Recommendation Layouts

In this article you will find:


Recommendation Layouts

Use this section to create the layouts that can be utilized by the Recommendation Widgets. These layouts can also be further edited specific to a widget within the Widget section of the Recommendation feature in the Workbench.




Navigating to the Recommendation Layout Administration page

This page displays all of the layouts currently available. You can edit existing layouts or create a new layout from this page.

1) Click on "Workbench" from top-navigation.

2) Choose "Recommendations" from left-navigation and select "Layouts" from the subcategories.

3) To edit a layout, click on the "Pencil" icon. To copy a layout, click on the "Paper" icon. To delete a layout, click on the "trashcan" icon.

4) To create a new layout, click on the "Add Recommendation Layout" link.




Adding/Editing a Recommendation Layout

1) Give the Layout a name. This name will be added to the list of Layouts you can choose from when creating a widget. 

2) Specify the number of items you wish to return in the Recommendation widget.

3) Select whether you would like the widget to display horizontally across the page or vertically up and down the page.

4) Your developers have complete control of the styling of the widget and can edit HTML directly in the tool using this feature. In addition, a Field Mapping List is available to help with referencing the Value to get the correct syntax.



5) The "Is Carousel" feature allows the user to scroll through products with in the widget beyond the initial products that fit within the size of the zone. Turning Carousel on will allow you to make further customizations to the display.

6) Preview will allow you to view what the widget will look like based on the current configuration without saving.

7) Once you have made all selections, click "Save." 



Editing Carousel Features


The "Is Carousel" feature allows the user to scroll through products within the widget beyond the initial products that fit within the size of the zone. Turning Carousel on will allow you to make further customizations to the display.

1) Enabling "Auto-repeat" will allow you to adjust the auto-repeat speed. The widget will automatically rotate through the available products within a Recommendation widget.  The "Animation Speed" determines how quickly the carousel moves when rotating from one product to the next. The closer to zero, the faster these items will move.

2) Enabling the "Show Prev/Next Buttons" will display arrows on either side of the widget, indicating that the widget is a carousel.

3) "Animation Speed" determines how quicky products move from one spot to the next upon rotation. The closer to 0, the faster the animation speed. 

4) When "Is Circular?" is enabled, once the last product in the widget is viewed, it will return to the beginning of the rotation.

5) Show "Carousel Dots" will appear at the bottom of the widget to indicate how many different views of products there are within the widget.

6) When the carousel is at rest, "Number of Visible Items" is the number of recommended products that will display.

7) You can specify the number of items that should be rotated through on one rotation. Ex. If 4 products are displayed in the widget and "Number of Items to Scroll" is 4, when a user clicks "Next" all 4 items will be new (assuming that there are eight or more products to display in the widget).

8) Enabling "Responsive Design" will allow you to edit the break points in the responsive design of the carousel. 

9) Clicking the "Preview button" allows you to visually preview what the layout of your widget will look like without having to save changes.