logo
Shopify Builds>Surfaces>Landing page

Landing page

Landing pages are the page templates a storefront stands up for campaigns, programs and editorial: quizzes, rewards explainers, program applications, help content. Shopify gives them the same section architecture as the home page, so a landing page is usually a stack of reusable sections plus content held in page metafields, not a bespoke template written once and abandoned.

How We've Used It

This is the largest surface in the graph, and the reason is reuse: a section written for one campaign is placed on the next one by a merchandiser rather than rebuilt. So the pattern is sections designed to be moved — every string a setting or a metafield, every media slot with a desktop and a mobile variant, and no assumption about what sits above or below. Page metafields carry the long content, which keeps FAQ and program copy out of the theme where the people who own it can edit it. Where a page builder generates the page instead, the job becomes wiring: the vendor's layout has to load the same storefront stack the theme layout loads.

Builds Using It

106 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

Arched-label icon grid PDP block

A six-slot row of circular badge icons with captions that curve over them — an SVG `textPath` per label, an arc id composed from `block.id` so the block can repeat, and layout driven entirely by custom properties the merchandiser sets.

LUS Brands

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

Creator collab video listing driven by article metafields

A blog turned into a creator video index: each article is a creator record whose video address, platform and handle live in article metafields, rendered as a paginated grid of inline-playing cards that request no third-party iframe until someone presses play.

Nudestix

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

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

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

Kids FAQ page: single-level variant of the FAQ engine

A second FAQ page for the kids sub-brand that shares the help center's content model — the same page metafield, the same accordion contract — but drops the category layer, so a shorter list of questions reads as one flat, keyboard-operable accordion with its own tone and its own way out.

LUS Brands

Featured tutorial with an adjacent shoppable product rail

One section, two halves: a poster-first video that fetches its YouTube or Vimeo player only on click, and beside it the first three products of whichever collection a merchandiser picks — each one a real card with a quick view and an add to bag that never leaves the page.

Nudestix

GA4 ecommerce dataLayer instrumentation across a Rebuy cart

A client-side event layer that hangs off the network rather than off the DOM: a `fetch` wrapper that recognizes a cart add, a diff against the previous cart so the event reports what changed, and item taxonomy read from a block the product page already renders.

Three Ships

Before/after customer results carousel with an attached product card

One slide per customer result: two labeled photos, a quote with its attribution, and the product that was used — rendered as the storefront's own product card, with the live price and a working add-to-bag, on a page template where Shopify hands the theme no product at all.

Nudestix

Metafield-driven two-level FAQ accordion grafted into a help-center app's shell

The help-center page kept the app's shell. The answers inside it moved into a Shopify page metafield, and a two-level accordion we wrote renders them — deep-linkable, keyboard-operable and reusable elsewhere in the theme.

LUS Brands

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

A-Z ingredient glossary with scroll-spy letter navigation and product cross-sell

An ingredient encyclopedia authored as theme-editor blocks across 14 section instances on one page template, joined to a sticky letter bar by a single shared attribute, with every entry an accordion that links out to the products it appears in — education page as cross-sell surface.

Three Ships

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

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

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

Shoppable-video to cart bridge: Hue add-to-cart event wired into Rebuy's drawer

A document-level listener that turns a shoppable-video app's add-to-cart intent into a real `cart/add.js` call with the cart sections rendered in the same response, then dispatches the theme's own cart events so the drawer, the count badge and every other subscriber update at once.

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

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