Home page sections
7.1 Image Banner (hero)
A full-width banner with an image or one video.
| Setting | What it does |
|---|---|
| First image / Second image | One image, or two side by side. |
| Only mobile image | A separate image for phones. |
| Video | Upload one video. It replaces the image and plays muted on a loop on desktop and phones. Remove it to show the image again. |
| Overlay opacity | Darkens the image or video so text is easier to read. |
| Banner height | Adapt, Small, Medium or Large. |
| Content position and alignment | Where the text sits. |
| Blocks | Heading, Text and Buttons. |
Video tips: MP4, 1920×1080, under 10 MB, 5 to 20 seconds, no sound needed.
7.2 Product Slider
A slider of product cards from a collection.
| Setting | What it does |
|---|---|
| Heading | Optional title. |
| Select collection | The products to show. |
| Big word when a product has no Card label | Fallback word for cards. |
Card layout:
- Top: the big card label, with a badge on the right.
- Middle: the product image.
- Bottom: stars and review count, title and price, the subtitle, and a BUY button.
On desktop:
- Hovering a card shows the second product image with a smooth fade.
- The title and price fade out and the BUY button slides up.
- A frosted "swipe" circle follows the mouse.
On phones:
- It becomes a swipe slider, with the next card peeking in on the right.
- Small dots under the slider show which card you're on.
- The BUY button is always visible.
Card text comes from product metafields (section 13).
7.3 Hover Text With Image
A text panel on the left with a list of words, and an image on the right. Hovering a word changes the text, button and image with a smooth fade.
| Setting | What it does |
|---|---|
| Fallback text / Fallback image | Used when an item has no text or image of its own. |
| Image fit | Show whole image or Fill the box. |
| Item 1 / 2 / 3 | Label (the hover word), text, button label, button link, image. |
On phones, tap a word to switch.
7.4 Product Tabs Showcase
An image on the left and product details on the right, with round buttons that switch between products.
| Setting | What it does |
|---|---|
| Accent color | Title and active round button color. |
| Switch on hover (desktop) | When off, customers click instead. |
| Section height | Height on desktop. |
Tab block (add one per product):
| Setting | What it does |
|---|---|
| Round button label | The text in the round button, for example TINT or TREAT. |
| Image | The image for this tab. |
| Title | The big title. |
| Subtitle | The line under the title. |
| Button label / link | The SEE DETAILS button. |
| Info rows 1 to 4 | A label and text for each row, such as What it is, Shades, Effect, Key ingredients. |
7.5 Image With Text, Image Carousel, Collection List
Standard sections: an image beside text, an image carousel for social or user photos, and a grid of collections. Edit the images, text and buttons in each section.