Related products

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

  1. Add the section to a product template.
  2. Set the heading and typography under Typography.
  3. 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.

Heading heading_block max 2

HeadingText
ID
heading
Default
Related Products
Font size (desktop)Dropdown
ID
font_size_desktop
Default
Medium
  • XSd_heading-xs
  • Smalld_heading-sm
  • Mediumd_heading-base
  • Larged_heading-lg
  • XLd_heading-xl
  • 2XLd_heading-2xl
  • 3XLd_heading-3xl
  • 4XLd_heading-4xl
  • 5XLd_heading-5xl
  • 6XLd_heading-6xl
Font size (mobile)Dropdown
ID
font_size_mobile
Default
Medium
  • XSm_heading-xs
  • Smallm_heading-sm
  • Mediumm_heading-base
  • Largem_heading-lg
  • XLm_heading-xl
  • 2XLm_heading-2xl
Text opacity (%)Slider
ID
text_opacity
Default
100
Range
0 to 100, in steps of 5

Text styling

Text alignmentDropdown
ID
heading_text_alignment
Default
Center
  • Leftleft
  • Centercenter
  • Rightright
Text transformDropdown
ID
text_transform
Default
UPPERCASE
  • UPPERCASEuppercase
  • Lowercaselowercase
  • Capitalizecapitalize
Line height (em)Slider
ID
line_height
Default
1.2
Range
1 to 3, in steps of 0.1
Letter spacing (px)Slider
ID
letter_spacing
Default
2
Range
-2 to 15, in steps of 1

Text spacing

Top marginSlider
ID
margin_top
Default
20
Range
0px to 100px, in steps of 4px
Bottom marginSlider
ID
margin_bottom
Default
20
Range
0px to 100px, in steps of 4px

Text shadow styling

Enable text shadowCheckbox
ID
enable_text_shadow
Default
Off
Shadow x offset (px)Slider
ID
text_shadow_x
Default
0
Range
-10 to 10, in steps of 1
Shadow y offset (px)Slider
ID
text_shadow_y
Default
0
Range
-10 to 10, in steps of 1
Shadow blur radius (px)Slider
ID
text_shadow_blur
Default
0
Range
0 to 10, in steps of 1

Text animation

Heading animationDropdown
ID
text_animation
Default
None
  • Nonenone
  • Fade infade-in
  • Slide upslide-up
  • Slide downslide-down
  • Zoom inzoom-in

Text border styling

Enable text borderCheckbox
ID
enable_text_border
Default
Off
Text border width (px)Slider
ID
text_stroke_width
Default
1
Range
0 to 5, in steps of 0.5
Border styleDropdown
ID
border_style
Default
Solid
  • Solidsolid
  • Doubledouble
  • Dotteddotted
  • Dasheddashed