Store pages
Product recommendations
Related products and complementary products below the product details.
Two features suggest other pieces on the product page: related products, calculated automatically by Shopify in a section below the product details, and complementary products, which you choose yourself, shown by a block in the buy box.
Product recommendations
- Name in the editor
- Product recommendations (FR: Recommandations de produits)
- Where to add it
- Only on product pages
Shopify automatically calculates related products based on order history and product similarity (description, collections, type). It usually takes a few orders before recommendations become more accurate. The default heading is "Related products". To choose related pieces yourself instead, use the Related products block in the buy box.
| Setting | Values | What it does |
|---|---|---|
| Color schemeFR: Palette de couleurs | Color schemeDefault: Scheme 1 | — |
| HeadingFR: Titre | Text | — |
| Number of products to showFR: Nombre de produits à afficher | From 2 to 10Default: 4 | — |
| Product card | ||
| Card layoutFR: Mise en page de la fiche |
| Standard sets the name below the image. Compact tightens it for dense grids. Full bleed sets the name over the image. |
| Image shapeFR: Forme de l’image |
| — |
| Card color schemeFR: Palette de couleurs de la fiche | Color schemeDefault: Scheme 1 | Match the section's scheme to leave cards on the page background. |
| Image overlayFR: Voile sur l’image | From 0 to 60%, in steps of 5Default: 0% | Washes the image toward the card background color. Useful when the product name sits over the image. |
| Show color swatchesFR: Afficher les nuanciers de couleurs | CheckboxDefault: On | — |
| Show badgesFR: Afficher les badges | CheckboxDefault: On | — |
| Show vendorFR: Afficher le fournisseur | CheckboxDefault: Off | — |
| Show second image on hoverFR: Afficher la deuxième image au survol | CheckboxDefault: On | — |
| Show quick addFR: Afficher l’ajout rapide | CheckboxDefault: Off | A product with one variant is added to the cart from the card; a product with options opens its choices in a drawer. |
Complementary products
Complementary products are the ones bought with the product: a belt with a pair of trousers, a care product with a bag. You choose them yourself, product by product, in Shopify's Search & Discovery app. They're shown by the Complementary products block in the product page's buy box: the default template has it at the end of the buy box, and you can add it with Add block in the Product section. The default heading is "Complementary products".
Install Search & Discovery
From the Shopify App Store, install the free Search & Discovery app.
Choose the products
In the app, open Product recommendations, choose a product, and add its complementary products.
Check the product page
The block shows the chosen products in the buy box.
| Setting | Values | What it does |
|---|---|---|
| HeadingFR: Titre | Text | — |
| Number of products to showFR: Nombre de produits à afficher | From 2 to 10Default: 4 | — |
Loading and display
- Both are asked of Shopify after the page has appeared, so they never hold it up: the related products once the page has finished loading, the complementary products straight away.
- The related products grid has four columns on desktop, and two on tablets and phones. Its cards follow the settings in the Product card group, described in Product cards.
- The complementary products block lists its products as compact rows (a small photo, the name and the price), each with a quick add button.
Faubourg 1.1.0