To define a size of a recommendation box, choose a number of rows and items you would like to be displayed, in the Size section on the left of the screen.
At Devices section you can choose a number of items to be displayed per row, based on the user's screen resolution (phone/tablet/notebook). Choose a number from a drop down menu at each device (Extra small/Small/Medium/Large), and preview it on the right.
At the Background section, you can choose type of the background: None - no background color, Visible where you can insert a hexadecimal color value in the appropriate field or adjust a color at the pop-up window, or Source where you can insert an image source in the appropriate field.
By sliding the Opacity bar you can define the level of opacity/transparency of the background.
At the Spacing section, you can set a horizontal and a vertical spacing between the items in a recommendation box.
To enable a swiping functionality for your recommendation box, click the Swiper icon and set the length (number of the items in the row) and the timer (duration of transition between the items). By clicking the Loop icon you will enable the constant items rotation without stopping it when it reaches the last item in the row.
At the Margin & Padding section, you can define margin and padding proportions by simply clicking on the area with the property you would like to modify.
At the Items Tab you can set the design of separate items in the recommendation box. Each of the items consists of separate fields, like Title, Image, Price which you can also modify accordingly.
At the General section, you can define opacity and color of the items.
Below the Item link tag you can choose the property as the link of the item (e.g.ItemUrl) if needed. If your pages contain canonical URL we recommend to simply choose ItemId.
At the Border section, you can define the borders of each item by choosing a style from a drop-down menu width and color. By setting border-radius you can add rounded corners to an item by choosing its value. You will be able to see the applied parameters on the demo screen on the right.
At Margin & Padding you can set parameters for your item by applying desired values on the visual boxes.
At the Hover Border by enabling Hover Active tag you can choose border configuration to be applied when a mouse is over them on the actual recommendations.
At the Fields, you can decide on the order of the item fields by moving the arrows up or down.
By clicking on the editing icon next to each field you can modify its settings in a new open page as well. You can also modify separate item fields by simply clicking on one of them on the demo screen (e.g. Title, Image, Price).
For each field, you can define appropriate parameters, like width and height, text font and color, background color, opacity, borders, margin and padding and enable or disable hovering function.
Once you are ready with all the modification, push the Save button on the top menu. Afterwards, you can check the recommendation boxes by enabling a Test mode in the Web menu or publishing them on your website