Layout Editor

Overview

A layout editor is provided with Experience Designer to design the layout of product recommendations. There is a visual editor and a code editor available. Once you use the code editor your changes cannot be viewed in the visual editor, but they can be previewed on the site.

The visual editor is a WYSIWYG editor designed for common ways that layouts are configured for product recommendations.

The code editor enabled you to edit the layout directly in html, CSS, and java script.

The code generated by the visual editor or provided with the code editor are saved in the layout for the placement and can be seen in the dashboard.

Visual Editor

To access the visual editor, click on the menu for a recommendation placement and select the layout editor. Note that you cannot edit the layout until the placement name has been saved.

You can follow the below steps using the visual editor to configure product recommendation layouts.

  1. Select the Item Variables to use. As you select them, they will update in the display window.

  2. With your mouse highlight any of the text variables in the display window and change the look using the rich text editor controls. You can change the font, size, alignment, and color.

  3. Use the arrows to select a variable and move it up or down in the display window.

  4. Add a border for the placement, then select the configuration options for the border.

  5. Configure the minimum and maximum number of products for the placement.

  6. Choose a single row layout or a slider.

If you are unable to configure the product recommendations to look the way you would like, then you have an option to click on the code editor.

Code Editor

With the code editor, you can make the recommendations placement look the way you would like. You can edit in html, java script, and CSS. Once you start editing the layout with the code editor, then you can preview the results to see how they look.

If you would like to go back to the visual editor, you can, but you will lose the changes that you made in the code editor.