About this section
Shade matching: undertone swatches change the large product image, two finishes, and a button that adds the chosen shade.
How to add itCustomize → Add section
Where it can goAny page
Settings18 · 2 block types
Good to know: Choose the product for each swatch so the button adds the right variant.
Settings
| Setting | Type | What it does |
|---|---|---|
| Badge | Text | — |
| Heading | Text with bold, italic and links | — |
| Subheading | Text | — |
Shades
| Setting | Type | What it does |
|---|---|---|
| Product | Product | Every shade of this product shows with its swatch, photo, price and stock. Add shade blocks to choose which shades show and to add photos on skin. To show more products, add a Product block for each. Choose a product. |
| Shade option name | Text | The product option that holds the shades. If no option has this name, the first option is used. |
| Finish option name | Text | The product option that holds finishes, such as matte and satin. The finish choice shows only when the product has this option. |
| Fallback photo | Image | Shows for a shade that has no photo of its own. Choose an image from your files. |
Skin depths
| Setting | Type | What it does |
|---|---|---|
| Skin depth 1 (lightest) | Text | — |
| Skin depth 2 | Text | — |
| Skin depth 3 | Text | — |
| Skin depth 4 (deepest) | Text | — |
| Photo note | Text | Say how the photos were taken, for example in daylight with the color unretouched. Leave empty to hide. |
Highlights
| Setting | Type | What it does |
|---|---|---|
| Highlight 1 | Text | — |
| Highlight 2 | Text | — |
| Highlight 3 | Text | — |
| Button label | Text | — |
Section padding
| Setting | Type | What it does |
|---|---|---|
| Top padding | Slider | From 0 to 120 px, 36 px to start. |
| Bottom padding | Slider | From 0 to 120 px, 36 px to start. |
Blocks
Blocks are added inside the section with Add block, and can be reordered by dragging.
Product
| Setting | Type | What it does |
|---|---|---|
| Product | Product | Choose a product. |
| Tab label | Text | Leave empty to use the product's name. |
| Second choice | Text | The name of this product's other option to choose from, such as Undertone. Leave empty to use the section's finish option. |
Shade
| Setting | Type | What it does |
|---|---|---|
| Shade name | Text | Use the shade's option value in the product, such as Garnet, so the right variant is added. |
| Product | Product | Only for a shade sold as its own product. Otherwise the section's product is used. Choose a product. |
| Tagline | Text | A few words shown under the shade name, such as Cool pink. |
| Description | Text | — |
| Swatch color | Color | Leave empty to use the swatch set on the product's option. |
| Product photo | Image | Leave empty to use the variant's own photo. Choose an image from your files. |
Photos on skin
| Setting | Type | What it does |
|---|---|---|
| Skin depth 1 (lightest) | Image | Choose an image from your files. |
| Skin depth 2 | Image | Choose an image from your files. |
| Skin depth 3 | Image | Choose an image from your files. |
| Skin depth 4 (deepest) | Image | Choose an image from your files. |
Apps
App blocks from apps you have installed can be added here.
Something here not as described?Tell us which setting and what you saw. We reply within two business days.
Contact support