logo
Shopify Builds>Surfaces>Home page

Home page

The home page is the storefront's index template: a section group a merchandiser reorders in the theme editor without a deploy. It carries heroes, product rails, editorial bands and campaign content. Every section on it has to survive being moved, duplicated or left empty, because the running order changes with the marketing calendar rather than with the code.

How We've Used It

Home is where the reuse discipline shows. A section built for this page is written as a preset with its own settings, scoped CSS custom properties and an id-namespaced instance, so a merchandiser can place it twice with different content and neither copy interferes with the other. Rails share the same product card the listing pages use rather than a home-only variant. Media is the other constant: the first image on this page is the one a shopper sees before anything else, so heroes are authored with explicit desktop and mobile assets and carousels are laid out correctly in markup before any slider script touches them.

Builds Using It

44 further gated builds use it; their pages follow.

Related Entities

Builds

Accessible link-label helpers for repeated CTAs

Two Liquid snippets that resolve a real conflict between two link-naming rules — identical link text on different destinations versus an accessible name that must contain the visible label — by deriving a name from the link's href and emitting it only when it differs from what the shopper can see.

Nudestix

Brand story split panel: one section that renders image, hosted video or YouTube with separate desktop and mobile assets

A 50/50 story panel whose media half is a picture, a Shopify-hosted video or a YouTube embed depending on one select, whose mobile aspect ratio is computed in Liquid from the asset that will actually load, and whose type scale, spacing and side-flip are all settings — so an About page is one section, placed as many times as the story needs.

LUS Brands

Product-card hover video and a reusable deferred-media playback refactor

The shared product card's hover slot can hold a short clip instead of a second still: a per-product metafield decides which, the card emits a video that fetches nothing until asked, and a pointer-only, motion-aware binder plays it on hover of the whole card — plus a refactor of Dawn's deferred-media element that handles every player kind through one function.

LUS Brands

Collection grid card on a licensed theme: metafield merchandising, a badge precedence chain, a hover-swap swatch element and first-row loading hints

Palo Alto's grid item extended so the card's title, strapline, cutline and badge come from product metafields, badges resolve in one fixed order, color options become a swatch element that swaps the card image on hover, and column classes are computed from whatever section happens to be calling.

Three Ships

Tabbed collection product slider and the shared merchandising card

One section renders every configured collection at once and switches between them with a class, so moving from Serums to Cleansers waits on nothing — and one card snippet backs the shelf, the blog and the rewards page.

Three Ships

Marketing image banner with mobile art, typography controls and highlight headings

A campaign banner built as a fork of Dawn's image banner: the vendor's class contract and overlay behaviour left intact, with a real mobile source, per-block type controls and an inline highlight convention layered on top.

LUS Brands

Merchandisable homepage product carousel with a tag-driven badge engine and inline add-to-bag

A two-column row — optional linked lifestyle image, Swiper rail — where every label, color, badge and product is a theme-editor setting, and each card can add to bag without leaving the page.

LUS Brands

DE Hero: art-directed image/video hero with layout controls

A campaign hero that serves a genuinely different mobile crop through hand-built `<picture>` markup, publishes both breakpoints' aspect ratios as CSS custom properties, switches to a hosted video from one setting, can make the whole frame a link, and decides its own loading priority from where it sits on the page.

LUS Brands

Shop-by-category carousel with collection-aware card fallbacks

A homepage category rail where adding a category is one action — pick the collection. The image, the link and the label all resolve from the collection record unless a merchandiser deliberately overrides them.

LUS Brands

Editorial split banner with typographic control and merchandiser-authored offer details

A homepage banner where layout mode, desktop and mobile artwork, subtext type scale, five colours and an offer-details panel are all settings, so a campaign and its terms publish together without a developer in the loop.

Nudestix

Homepage exclusive-offers rail with caption heights equalized in idle time

A merchandiser-built row of promotional tiles for the Nudestix homepage — grid or swipe rail, chosen separately for desktop and mobile — whose uneven caption blocks are measured in idle time and equalized through a single `--content-height` custom property.

Nudestix

Featured-collection product card with metafield hero/hover media and a tag-driven badge stack

The card that renders inside the homepage's main merchandising rail: hero and hover art chosen in the Shopify admin, a responsive image ladder built by hand, and a badge stack resolved from tags, price and block settings at render time.

LUS Brands

Size-pill variant picker and quick add-to-cart inside product grids

One click handler, registered once on `document` in the capture phase, turns any grid card with a size-pill row into a variant selector and an add to cart — including cards that did not exist when the page loaded.

Three Ships

Hero slide content renderer with per-breakpoint typography controls

One Liquid snippet renders a hero slide's pretitle, title, description and CTA from block settings, carrying the desktop and the mobile type spec on the same element as paired CSS custom properties, so two different slideshow sections share a single copy renderer.

Nudestix

Homepage hero carousel v2 - video and split-image slides with per-slide typography control

The live homepage hero: two independent carousels over one authored slide list, video slides and split-image slides, typography controlled per slide, and promotion events fired from the slide's own copy.

Nudestix

Kids featured collection: a custom element that builds its Swiper on approach and wraps the theme's own product cards

A `<kids-featured-collection>` element leaves its slides as static markup until an IntersectionObserver fires, initializes Swiper then, and tears everything down when the section is removed — around Dawn's `card-product`, not a card of its own.

LUS Brands

Landing-page hero sections with a no-JS add-to-cart on page templates

A hero kit for standalone campaign pages: per-breakpoint artwork and text placement in repeatable blocks, and a CTA that can be a real Liquid product form on a template where Shopify hands the theme no product at all.

Three Ships

Press / trust logo strip with scroll-snap carousel and no JavaScript

A blocks-based logo row for the homepage that a merchandiser can reorder, relabel and link — and that becomes a swipeable, snapping carousel on mobile through CSS alone, with no slider library and no script of its own.

LUS Brands

Configurable PDP block system on the Palo Alto theme (Recharge widget placement, size charts, siblings, quick view)

Merchandiser-orderable buy-box blocks on Three Ships' licensed theme, with the subscription app block captured and re-emitted inside the buy box, plus metafield-driven size charts, a product-family switcher and a sticky add-to-cart bar.

Three Ships

Product card with award badges, per-variant content payload and per-card structured data

One snippet renders the whole Nudestix grid card: tag and award badges, quick view, wishlist, comparison, an in-grid add to bag, and a per-variant data payload the shade switcher reads without a fetch.

Nudestix

Rich-text section rebuilt as a per-block typography and highlight system

Dawn's `rich-text.liquid`, kept under its own name and rebuilt inside: every heading, text and button block writes its own type, spacing and colour tokens as CSS custom properties, and the `[[word]]` highlight and the button become snippets other sections share.

LUS Brands

Themed host section for Shopify Forms app blocks

A section whose only block type is `@app`, wrapping any app block in the theme's width, padding and background scaffolding — and, when a merchandiser switches it on, writing the `--forms-heading-*` and `--forms-body-*` custom properties that Shopify's Forms embed reads for its own typography.

Three Ships

Skin quiz entry-point sections: separate desktop and mobile artwork in one section

A campaign panel that opens the Three Ships skin quiz, built so the desktop and mobile crops are two independently chosen images and the copy above them is four editable blocks.

Three Ships

"Start with the basics" — a merchandiser-authored 3-step routine section with measured read-more clamping

A homepage routine band whose three step cards are theme-editor blocks tied to real products, whose heading takes a `[[...]]` highlight token, and whose "Read more" button is unhidden only after the browser has measured that the copy overflows its four-line clamp.

LUS Brands

Responsive video hero with independent desktop/mobile sources and single-source-of-truth playback controls

A `<video-hero>` custom element that holds a 16:9 cut and a 9:16 cut, promotes only the active breakpoint's sources to `src`, and wires one play/pause and one mute button to whichever video is live — with server-rendered control state so the buttons read correctly before the script runs.

LUS Brands

Accessible play/pause web component for autoplaying hero video

A `<play-pause>` custom element that gives a muted, autoplaying hero video a real keyboard-reachable control — self-wiring from a selector in its own markup, so Swiper can clone and reorder slides without any script knowing how many there are.

Nudestix