Product recommendations
Use the "Product recommendations" section to add the list of related products.
Tip: Drag and drop the section to the desired position on a page. If the section is unnecessary, you can hide it. Hover over a section title and click the eye icon to hide a section.
In the "Heading", you can place a title for the section.
The font size of the title can be changed to "Small", "Medium", or "Large" in the "Heading font size" drop-down.
If you need to set up the color of the title, use the "Heading color" picker. Here you can paste the hex code to the related field or choose the color using the paint pallet. The color settings will be used for both desktop and mobile.
Layout
The layout settings change the look and feel of the section.
Choose one of the options "In-grid heading", "Heading on top", or "Heading top center" in the "Layout" drop-down.
Use the "Mobile align" settings to change the alignment of the heading and description to the "Left" or "Center". Leave the "Auto" option to use the pre-designed theme settings.
If you need to show a "Dividing line", choose "Top" or "Bottom" positions. It will be hidden once you use the option "None".
On the "Top spacing" and "Bottom spacing" scales, decide whether to add spaces at the top and bottom of the section. Control spacing settings from 0 to 100 pixels on each scale.
Content
Here you can apply general settings to products that are displayed in the section. More about the algorithm for displaying recommended products, you can read in the following article.
The number of products per row can be set in the "Products in row" drop-down. Decide if to display 2, 4, or 6 items in each row.
To control the number of products displayed in the section, use the "Maximum products to show" scale. It can be changed from 2 to 12 items.
Enable swipe on mobile
Check the box to add scrollbars instead of displaying the list of collections on mobile view.
The "Image ratio" can be changed from "Adapt to image" to "Portrait", "Square", "Landscape", or "Circle". Each image ratio, you can check here.
Use the "Information align" drop-down to decide whether to display the product information below the product card on the "Left", "Center", or "Right" side.
The second image of a product will be displayed on hover over the main image with the ticked "Show second image on hover" option.
If you need to add an extra space between images on both desktop and mobile, enable "Add image padding". Here is how it might display on the page:
To display a brand for each product, tick the option "Show vendor".
In the following examples, you can view how the Product recommendations might look on a desktop and mobile:
Last updated
