Homepage
Reorder and edit the homepage sections in the theme editor. The template is templates/index.json, so every change is a setting rather than code.
Go to Online Store > Themes > Customize. The homepage loads by default. The left sidebar lists sections in the order they appear on the page, and you can drag them to reorder.
The sections on the homepage
In the order they currently render:
| Section in the editor | What it shows | Repeatable blocks |
|---|---|---|
| Hero Banner | Full-width rotating banner at the top | Slide |
| CVP Carousel | Short value propositions | CVP |
| Explore by Category | Category tiles | Category |
| Items You'll Love | Tabbed product carousels | Recently Viewed, Purchase Again, Collection Items |
| Medispa Service Callout | Promotion for clinic treatments | Label |
| Skin Type Carousels | Product carousels grouped by skin type | Banner CTA, Skin Type |
| Shop By Routine | Routine steps with products | Routine |
| Review Carousel | Customer reviews | Review |
| Popular Brand Carousel | Brand logos and links | Brand |
| Unlock Free Bonus | Gift tier promotion | None |
| Gift Ideas Cards | Gift cards grid | Gift Idea Card |
| Our Difference | Brand story with images | Banner Image, Content, CVP |
| Special Offer | Single promotional block | None |
| Popular Categories | Category links | Category |
| Blog Posts Redesign | Recent articles | None |
| SEO Copy and SEO Content Redesign | Long-form text near the footer | None |
| Need Help Popup | The popup trigger, not visible inline | Klaviyo Offer Popup, CTA Button |
| Sticky Categories Bar | Category bar that follows the shopper down the page | Menu Item |
Items You'll Love appears twice. The second one is set up for fragrances, so check which one you are editing before you change its heading.
The Unlock Free Bonus section takes its wording from theme settings, not from the section. Edit it under the gear icon, Rewards Tiers. See Mini-cart and gifts.
Add or remove a carousel item
Most of these sections use blocks. Click the section, then Add block at the bottom of its settings. Drag blocks to reorder them, and use the block's own menu to remove one.
Each section's schema sets a maximum number of blocks. When Add block is greyed out, the section is full, and a developer has to raise the limit in code.
Change images
Every image setting uploads into Content > Files. Replacing an image in a section does not delete the old file, so the Files library keeps growing.
Upload images at the size they display. The theme does not crop, and an oversized image slows the page for every shopper. Where a section offers separate desktop and mobile images, such as the hero slides, set both.
Business rules
Reordering sections here changes the homepage only. Other pages that use the same sections keep their own order and settings.
An empty section with no blocks still takes up space on the page. To get rid of one, use Remove section in the section's menu instead of emptying it.
Hiding a section with the eye icon keeps its settings. Hide it instead of removing it when you expect to bring it back.
Verify the change
- Use Preview in the theme editor before saving, then check the live page after saving.
- Load the homepage on a phone. Below about 750 pixels wide, several sections switch layout and use different images.
- Scroll the whole page and confirm the sticky category bar still follows you down.
Developer map
| Concern | Source |
|---|---|
| Which sections appear and in what order | templates/index.json |
| Section markup and settings | sections/<section-name>.liquid |
| Carousel and tile behaviour | src/entrypoints/homepage-redesign/components/ |
| Product card used inside carousels | snippets/homepage-component-product-card.liquid |
| Which bundle a section loads | Entrypoints |