About this section
Two questions, skin depth and undertone, that end in a matched shade, with the shade shown on skin and photographs of customers wearing it.
How to add itCustomize → Add section
Where it can goProduct pages, pages
Settings38 · 3 block types
Good to know: Add a block for each shade with its depth and undertone so the match is right.
Settings
| Setting | Type | What it does |
|---|
| Eyebrow | Text | — |
| Heading | Text | — |
| Supporting paragraph | Text | — |
| Product type | Choice | Lips shows each shade worn on lips and leaves out the arm swatches, which do not predict how a lip color looks once worn. Choose Complexion: foundation, concealer, tint, Lips: lipstick, gloss, liner. Complexion: foundation, concealer, tint to start. |
First question — depth
| Setting | Type | What it does |
|---|
| First question label | Text | — |
| First question | Text | — |
| First question help text | Text | — |
| First depth answer | Text | — |
| Second depth answer | Text | — |
| Third depth answer | Text | — |
| Fourth depth answer | Text | — |
Second question — undertone
| Setting | Type | What it does |
|---|
| Second question label | Text | — |
| Second question | Text | — |
| Second question help text | Text | — |
| Cool answer | Text | — |
| Neutral answer | Text | — |
| Warm answer | Text | — |
The match panel
| Setting | Type | What it does |
|---|
| Panel label | Text | — |
| Before both answers | Text | — |
| Before both answers, second line | Text | — |
| Apply button | Text | — |
| Between two shades note | Text | — |
Swatches on skin
| Setting | Type | What it does |
|---|
| Range label | Text | — |
| Verdict: same depth | Text | — |
| Verdict: one step light | Text | — |
| Verdict: one step deep | Text | — |
| Photo note | Text | Say how the photos were taken, for example in daylight with the color unretouched. Leave empty to hide. |
Customer photographs
| Setting | Type | What it does |
|---|
| Only-this-shade chip | Text | — |
| All-shades chip | Text | — |
| Photo caption prefix | Text | — |
| No photographs text | Text | — |
| Setting | Type | What it does |
|---|
| Promise heading | Text | — |
| Promise text | Text | — |
| Button label | Text | Use [shade] where the selected shade name should appear. |
| Button link | Link | Usually an anchor back to the buy button, for example #MainProduct. Leave empty to hide the button. A link to any page. |
Layout
| Setting | Type | What it does |
|---|
| Background color | Color | #00000000 to start. |
| Top padding | Slider | From 0 to 120 px, 56 px to start. |
| Bottom padding | Slider | From 0 to 120 px, 56 px to start. |
Blocks
Blocks are added inside the section with Add block, and can be reordered by dragging.
Shade up to 40
| Setting | Type | What it does |
|---|
| Shade name | Text | Match the variant name exactly, so photographs and swatches line up with what is for sale. |
| Swatch color | Color | #D9AE87 to start. |
| Depth | Choice | Choose 1 — fair, 2 — light to medium, 3 — tan to deep, 4 — deep to rich. 2 — light to medium to start. |
| Undertone | Choice | Choose Cool, Neutral, Warm. Warm to start. |
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. |
Skin depth up to 6
| Setting | Type | What it does |
|---|
| Skin depth name | Text | — |
| Skin color | Color | #DBB088 to start. |
Customer photo up to 24
| Setting | Type | What it does |
|---|
| Photograph | Image | Choose an image from your files. |
| Customer name | Text | — |
| Shade worn | Text | Must match a shade name above for the filter to find it. |
| What they said | Text | — |
Apps
App blocks from apps you have installed can be added here.
