Shopify's product recommendations plus manually curated complementary products, with quick add inline.
Merchant-addable
Yes
Settings
33
Block types
1
File
sections/related-products.liquid
Used by default on: Product , product.set , Product (stage)
Screenshots pending
Captures for Related products at desktop and mobile widths are generated from a live store by
npm run shots. They appear here automatically once that has run.
When to use it
Below the fold on product pages, once the primary decision has been made.
Setting it up
Add the section to a product template.
Set the heading and typography under Typography.
Recommendations populate automatically from Shopify. Complementary products are set in the free Search & Discovery app under Product relationships.
Where the content comes from
Entirely Shopify product data. The section has no editorial content of its own beyond the heading.
Notes and cautions
Shopify's recommendation engine learns from your store's order history. On a new store it falls back to products from the same collection, so it looks thin until you have sales.
Section settings
Every setting on the section itself, in the order it appears in the theme editor. Group headings
match the editor's own grouping.
ProductProduct
Used to fetch recommendations if not on a product page (e.g. Home Page).
ID
manual_product
Number of productsSlider
ID
products_to_show
Default
4
Range
2 to 10, in steps of 1
LayoutDropdown
ID
layout
Default
Layout 1 (background)
Layout 1 (background)layout-1
Layout 2 (clean and simple)layout-2
Show collection nameCheckbox
ID
show_collection
Default
On
Show product ratingCheckbox
ID
show_rating
Default
Off
Show product priceCheckbox
ID
show_price
Default
On
Typography
Title font size (desktop)Slider
ID
title_size_desktop
Default
14
Range
10px to 40px, in steps of 1px
Title font size (mobile)Slider
ID
title_size_mobile
Default
12
Range
10px to 30px, in steps of 1px
Price font size (desktop)Slider
ID
price_size_desktop
Default
14
Range
10px to 40px, in steps of 1px
Price font size (mobile)Slider
ID
price_size_mobile
Default
12
Range
10px to 30px, in steps of 1px
Product info alignmentDropdown
ID
info_alignment
Default
Left
Leftleft
Centercenter
Rightright
Show secondary image on hoverCheckbox
ID
show_secondary_image
Default
Off
Color schemeColor scheme
ID
color_scheme
Default
scheme-1
Section padding
Top paddingSlider
ID
padding_top
Default
36
Range
0px to 100px, in steps of 4px
Bottom paddingSlider
ID
padding_bottom
Default
36
Range
0px to 100px, in steps of 4px
Blocks
Blocks are added, reordered, duplicated, and removed inside the section. Each type has its
own settings.