Homepage

The store's first page — merchandising, hero, featured collections and brand story sections.

Overview

Sections (top → bottom)

1. Shoppable hero — hero image + hotspot products + CTA
2. Featured collections — category tiles (tops, bottoms, dresses, layers)
3. Featured collection — "All New" product grid
4. Promo grid — promotional tiles / banners
5. Featured collection 2 — "Everyday Essentials"
6. Hero video — full-width video block
7. Text and image — editorial story block
8. Slideshow — image carousel
9. Image grid — visual mosaic
10. Text with icons — value props / trust points

Step-by-step user journey

Step 1 — Land on the homepage

• The shopper opens /
• The header and announcement bar are shown first

Step 2 — Shoppable hero

1. Read the hero headline and supporting text
2. Click or tap a hotspot (+) marker
3. A product popover with quick info opens
4. Go to the product, or open a collection or product from the CTA button ("Shop Linen")

Step 3 — Shop by category

1. Look through the featured collection tiles (Tops, Bottoms, Dresses, Layers)
2. Click a tile → that collection page

Step 4 — Browse featured products

1. Scroll the "All New" grid
2. On a product tile:
   • Product image → product page
   • Quick shop (if on) → modal product page
3. Colour swatches preview variants (if enabled)

Step 5 — Promo / campaign tiles

1. Sale and campaign banners in the promo grid
2. Follow the CTA links

Step 6 — Second merchandising grid

1. Browse the "Everyday Essentials" products
2. Open the product page or quick add

Step 7 — Video and editorial

1. Play the hero video
2. Read the text and image story blocks
3. Lookbook-style images in the slideshow

Step 8 — Image grid and icons

1. Scroll the visual grid
2. Confirm the brand benefits in text-with-icons
3. Move on using header search or the cart

Key interactions

Theme Editor tips

• Assign hotspot products in the shoppable-hero blocks
• Set the featured collection handles
• Update the promo images and links
• Changing the section order changes the homepage flow

Theme Editor settings

Each section below links to its full settings reference — every setting with id, type, default and a screenshot of the panel.

Full index: settings reference

Related files

templates/index.json
sections/shoppable-hero.liquid
sections/featured-collections.liquid
sections/featured-collection.liquid
sections/promo-grid.liquid
sections/hero-video.liquid
sections/text-and-image.liquid
sections/slideshow.liquid
sections/image-grid.liquid
sections/text-with-icons.liquid
snippets/product-grid-item.liquid