Store pages
Product recommendations
Related products and complementary products below the product details.
Two sections, available only on the product template, suggest other pieces below the product details: related products, calculated automatically by Shopify, and complementary products, which you choose yourself.
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".
| 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
- Name in the editor
- Complementary products (FR: Produits complémentaires)
- Where to add it
- Only on product pages
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. 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 section shows the chosen products below the product details.
| 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. |
Loading and display
- Both sections load as the shopper scrolls near them, so the product page stays fast.
- The grid has four columns on desktop and two on phones.
- Cards follow the settings in the Product card group, described in Product cards.
Maison 1.0.0