Products
Product set
Section handle:
product-setHTML tag:<section>
Settings
| Setting | Type | Default | Description |
|---|---|---|---|
| Eyebrow | Text | Featured products | — |
| Heading | Text | Shop the set | — |
| Supporting text | Rich text | <p>Explain how these products work together.</p> | — |
| Desktop image | Image | — | The image the numbered product markers sit on. Also used on phones when there is no mobile image. Blank uses the built-in layered artwork. |
| Mobile image | Image | — | Shown on screens narrower than 768px. Blank uses the desktop image. If it is composed differently, set phone positions on each product. |
| Image alt text | Text | — | Describes the image for screen readers. Update it when you change the image, since the default text describes the built-in artwork. |
| Product list label | Text | Products | Names the product list for screen readers. Not shown on the page. |
| Product link label | Text | View product | Text shown before the product name in each product link, for example Shop. |
Blocks
Maximum blocks: 4
Product
Block type:
product
| Setting | Type | Default | Description |
|---|---|---|---|
| Product | Product | — | Each product gets a numbered marker on the image, in block order. Blocks without a product are hidden. |
| Label | Text | — | Short name shown with the product number in the tabs and product card, for example Base layer. Blank uses the product title. |
| Role label | Text | — | Line shown under the price in the product card. Blank uses the label. |
| Summary | Multi-line text | — | Short description in the product card. Blank shows a default sentence naming the product. |
| Feature list | Multi-line text | — | One feature per line. Shown as a bulleted list in the product card. |
| Horizontal position | Slider | 50 | Where this product's number marker sits on the image, as a percentage across from the start edge (left in left-to-right languages). · Min: 5 · Max: 95 · Unit: % |
| Vertical position | Slider | 50 | Where this product's number marker sits on the image, as a percentage down from the top. · Min: 5 · Max: 95 · Unit: % |
| Highlight size | Slider | 25 | How much of the image around the marker is lit while this product is active, as a percentage of the image width. Desktop only. · Min: 10 · Max: 50 · Unit: % |
| Use a separate position on phones | Toggle (on/off) | Off | For a mobile image composed differently from the desktop one. |
| Horizontal position on phones | Slider | 50 | Marker position on screens narrower than 768px, as a percentage across from the start edge. Only used when Use a separate position on phones is on. · Min: 5 · Max: 95 · Unit: % |
| Vertical position on phones | Slider | 50 | Marker position on screens narrower than 768px, as a percentage down from the top. Only used when Use a separate position on phones is on. · Min: 5 · Max: 95 · Unit: % |
Default Configuration
When you add this section from the Theme Editor, it comes pre-configured with:
- Product set — 3× Product