Product recommendations section
The Product Recommendations section helps increase product discovery and conversions by showcasing either Related Products or Recently Viewed Products (or both) in a tabbed or standalone layout. This section is highly customizable in terms of layout, typography, and padding, and is responsive across desktop and mobile devices.
It supports two content blocks:
Related products - This block automatically displays products that are related to the currently viewed product, based on Shopify’s product recommendation algorithm.
Recently viewed products - This block tracks and displays products the current visitor has previously viewed during their session.
These blocks can be displayed in tabs (if enabled) or as separate sections.
Enable tabs
checkbox
When enabled, displays Related and Recently Viewed products in a tabbed interface.
Alignment
select
Controls heading alignment. Options: Left or Centered.
Heading size
select
Sets heading font size. Only shown when tabs are disabled.
Product limit
range
Number of products to display in each block (1–10).
Desktop
Product grid layout
select
Choose between Grid or Slider layout on desktop.
Grid
Products per row
range
Number of items per row (2–5). Applies when layout is set to Grid.
Number of rows
range
Number of product rows (1–5). Applies when layout is set to Grid.
Mobile
Mobile layout
select
Controls product layout on mobile: 1 item per row, 2 items per row, or Slider.
Colors
Color scheme
color_scheme
Assigns theme-defined color styling.
Padding
Top
range
Sets space above the section.
Bottom
range
Sets space below the section.
Usage Tips
Tabs: Use tabs to keep the UI clean and allow users to toggle between product categories.
Responsive layout: Choose '
Slider' on mobile for a compact, swipeable experience.Color scheme: Match your brand or page theme using color schemes.
Block flexibility: You can include one or both blocks based on your merchandising strategy.
Last updated