The layout option controls how a recommendation looks and how its products are arranged on your store. To access this option, open a recommendation and switch to the Layout tab to customize its design.
Choose a Layout
Start by selecting one of the 5 premade layouts. Each layout uses a different product card arrangement, so you can choose the structure that best fits the page and recommendation placement.
After selecting a layout, you can further customize it from the settings below.
Configure the Layout
Under Layout Settings, you can control how the recommendation is displayed.
Layout Type
Choose between:
Grid– Displays recommended products in rows and columns.Slider– Displays products in a horizontally scrollable slider.
Total Number of Products to Display
Set how many recommended products should be shown in the recommendation. You can use the + and – controls to adjust the number.
Maximum Products per Row
Set the maximum number of products shown in one row for each device type:
- Desktop
- Tablet
- Mobile
For example, you can show 3 products on desktop, 2 on tablet, and 1 on mobile. This lets you keep the recommendation layout readable across different screen sizes.
Heading Alignment
Choose how the recommendation heading should be aligned:
| Left | Middle | Right |
Adjust the Layout Style
Use Layout Style to control the visual appearance of the recommendation.
Content Size
Choose between: Medium or Large. This changes the overall size of the content displayed inside the recommendation cards.
Border Type
Choose:
- None – Display the product cards without a border.
- Default – Use the default card border.
Choose Which Product Elements to Show
The Element Display section lets you show or hide individual parts of the product card. You can control:
- Product Image
- Product Category
- Product Title
- Rating
- Product Price
- Add to Cart Button
For example, you can create a simpler recommendation by showing only the image, title, and price, or enable more details when customers need additional product information.
Once the design looks right in the preview, click Save Changes.
