Product Recommendations

The product recommendations that display in the section are based on products that are commonly purchased together or products in related collections. For more information, see Product recommendations.

How to add the Product Recommendations section?

1. From your Shopify admin, go to Online Store -> Themes.

2. Find the theme that you want to edit, and then click Customize.

3. Choose Products from the dropdown window.

4. In the Templates -> Add section -> choose Product Recommendations.

Product Recommendations - Settings Guide

This guide explains all available settings for the Product Recommendations in order from top to bottom as they appear in the Theme Editor.

Product Settings

Setting	Type	Description	Visibility
Product	product	Select specific product for recommendations (defaults to current product)	Always visible
Type	select	Choose recommendation algorithm (related/complementary)	Always visible

Layout Settings

Setting	Type	Description	Visibility
Layout style	select	Choose between grid or carousel layout	Always visible
Carousel on mobile	checkbox	Enable carousel behavior on mobile for grid layout	layout_type == 'grid'
Maximum products to show	range	Number of products to display (2-25)	Always visible
Number of columns on desktop	range	Desktop column count (1-6)	Always visible
Horizontal gap	range	Spacing between columns (0-100px)	Always visible
Vertical gap	range	Spacing between rows (0-100px)	layout_type == 'grid'

Show More Settings (Grid Layout Only)

Setting	Type	Description	Visibility
Enable	checkbox	Enable show more functionality	layout_type == 'grid'
Text	text	Button text for show more	layout_type == 'grid'
Font size	select	Button font size (10px-28px)	show_more_product == true
Font weight	select	Button font weight (thin to black)	show_more_product == true
Width desktop	select	Button width on desktop (fit-content/custom)	Always visible
Unit	select	Unit for custom width (pixel/percent)	show_more_product_width == 'custom'
Custom width	range	Custom width percentage (0-100%)	show_more_product_width == 'custom' AND unit == 'percent'
Custom width	range	Custom width pixels (100-500px)	show_more_product_width == 'custom' AND unit == 'pixel'
Width mobile	select	Button width on mobile (fit-content/custom)	Always visible
Unit mobile	select	Unit for mobile custom width (pixel/percent)	show_more_product_width_mobile == 'custom'
Custom width mobile	range	Mobile custom width percentage (0-100%)	show_more_product_width_mobile == 'custom' AND unit_mobile == 'percent'
Custom width mobile	range	Mobile custom width pixels (100-500px)	show_more_product_width_mobile == 'custom' AND unit_mobile == 'pixel'
Spacing top	range	Top spacing for show more button (0-100px)	show_more_product == true

Carousel Settings

Setting	Type	Description	Visibility
Loop	checkbox	Enable infinite loop for carousel	layout_type == 'carousel'
Full width	checkbox	Extend carousel beyond page margins	page_width == 'page-width' AND layout_type == 'carousel'
Navigation	select	Navigation type (none/arrows/pagination/both)	layout_type == 'carousel'
Arrows position	select	Position of navigation arrows (inside/bottom)	layout_type == 'carousel' AND navigation contains 'arrows'
Pagination type	select	Style of pagination (bullets/dynamic/progressbar/fraction)	layout_type == 'carousel' AND navigation contains 'pagination'
Dots top offset	range	Spacing above pagination dots (20-100px)	pagination_type == 'bullets' AND navigation contains 'pagination'
Progress top offset	range	Spacing above progress bar (20-100px)	pagination_type == 'progressbar' AND navigation contains 'pagination'

Section Layout Settings

Setting	Type	Description	Visibility
Width	select	Section width constraint (page-width/full-width/custom)	Always visible
Custom page width	range	Custom section width (1000-2000px)	page_width == 'custom'
Gap	range	General element spacing (0-100px)	Always visible
Color scheme	color_scheme	Section color scheme	Always visible

Mobile Layout Settings

Setting	Type	Description	Visibility
Number of columns on mobile	select	Mobile column count (1-2)	Always visible

Spacing Settings

Setting	Type	Description	Visibility
Padding top	range	Top padding for section (0-100px)	Always visible
Padding bottom	range	Bottom padding for section (0-100px)	Always visible

The section accepts various block types for content customization:

Block Type	Description	Visibility
@theme	All theme blocks available	Always visible
@app	All app blocks available	Always visible
text	Text content blocks	Always visible
icon	Icon display blocks	Always visible
image	Image content blocks	Always visible
button	Button/CTA blocks	Always visible
video	Video content blocks	Always visible
group	Container blocks	Always visible
spacer	Spacing elements	Always visible
_divider	Divider elements	Always visible