Sections
Featured collection
A grid of products from a collection, in three starting layouts.
The featured collection shows the first products of a collection in a grid, with a link to the full collection. It's the most-used section for showing new arrivals or a curated selection.
- Name in the editor
- Featured collection (FR: Collection en vedette)
- Where to add it
- Any template, plus the header and footer
- Presets
- Featured collection · Editorial product field · Compact product feature
Three presets
Add section offers three starting points. They're the same section: only the product card layout changes, and you can switch from one to another with the Card layout setting.
| Preset | Product card | Best for |
|---|---|---|
| Featured collection | Standard: name and price stacked under the image | Everyday use |
| Editorial product field | Full bleed: name, price and swatches set over the bottom of the photo | A more editorial look, with strong on-model photos |
| Compact product feature | Compact: name and price on one line, price aligned right | Dense grids of four or five columns |
Settings
| Setting | Values | What it does |
|---|---|---|
| HeadingFR: Titre | TextDefault: “Featured” | — |
| Collection | Collection | — |
| Number of products to showFR: Nombre de produits à afficher | From 2 to 12Default: 4 | Pick a count your columns divide into. Seven products in three columns leaves a gap where the eighth would be, and the row reads as a mistake rather than as a choice. |
| Columns on desktopFR: Colonnes sur ordinateur |
| — |
| Columns on mobileFR: Colonnes sur mobile |
| — |
| Link labelFR: Libellé du lien | TextDefault: “View all” | — |
| Color schemeFR: Palette de couleurs | Color schemeDefault: Scheme 1 | — |
| 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. |
Choosing the number of products
Choose a number of products your columns divide into: 4 or 8 products in 4 columns, 3 or 6 in 3 columns. Seven products in three columns leaves a gap that looks like a mistake rather than a choice. The number of columns is automatically reduced if the collection has fewer products.
Product cards
The settings in the Product card group are the same in every grid in the theme. They're covered in Product cards.
Without a collection
- No collection selected: the grid shows placeholder cards ("Example product"), including on your online store, to flag the missing setting.
- Empty collection: a help message appears in place of the grid. Add products to the collection or choose another one.
Maison 1.0.0