35 sections,
one system.
Every section reads the same global tokens — color, type, radius — so swapping presets repaints the whole page without breaking composition. Filter by category below; tap a card for the full docs entry.
All sections
- 01 / 35Hero
Editorial magazine cover
Masthead row, large image with overlapping headline, optional page number, numbered in-this-issue strip.
READ THE DOCS → - 02 / 35Hero
Heritage triple-rule masthead
Established date, oversized title, hairline + thick rules, image, attached product display with up to 12 ledger rows.
READ THE DOCS → - 03 / 35Hero
Quiet single product
Volume number, oversized pull-quote, italic attribution, image, product title + meta + CTA. Up to 8 spec rows.
READ THE DOCS → - 04 / 35Hero
Pop color block
Stacked color blocks with per-block fg / bg tokens, rotation, caption / title / subtitle / image / CTA, side-flip.
READ THE DOCS → - 05 / 35Hero
Pop H-scroller
Horizontal scrolling product cards with a rotating tone palette. Built for DTC drops and category launches.
READ THE DOCS → - 06 / 35Hero
Tech spec strip
Version label, oversized spec rows, launch-state indicator. Defaults dark; built for hardware launches.
READ THE DOCS → - 07 / 35Hero
Warm collections grid
Slow, configurable 2–4 column collection grid with material / origin captions. Designed for ceramics and pantry catalogs.
READ THE DOCS → - 08 / 35Editorial
Image with text
Side-by-side image and copy block. Configurable side, image ratio, headline, body, CTA.
READ THE DOCS → - 09 / 35Editorial
Multi-column / icon row
Two-to-four column row for benefits, value props, or icon-led explanations. Uses image or SVG per column.
READ THE DOCS → - 10 / 35Editorial
Image hotspot
Positioned markers on an image, desktop popovers, mobile numbered list, no-JS list fallback.
READ THE DOCS → - 11 / 35Editorial
Lookbook
Three layouts — mosaic, editorial-split, stacked-story — with product chips on each tile.
READ THE DOCS → - 12 / 35Editorial
Before / after
Native range-input image reveal with no-JS side-by-side fallback. Built for results-led merchants.
READ THE DOCS → - 13 / 35Editorial
Slideshow
Full-width rotating slides — each with its own image, text overlay, and CTA. Optional autoplay, arrows, and dots.
READ THE DOCS → - 14 / 35Editorial
Video
Hosted Shopify video or an external URL (YouTube / Vimeo) with an optional poster image and text overlay.
READ THE DOCS → - 15 / 35Editorial
Featured blog
Most recent posts from a chosen blog as a card grid — image, title, excerpt, date, and a view-all link.
READ THE DOCS → - 16 / 35Editorial
Editorial story
Long-form editorial spread — pull-quote, image, body, attribution. For brand pages and the about route.
READ THE DOCS → - 17 / 35Editorial
Pull-quote
Single oversized quote with italic attribution. A typographic gesture for editorial pages.
READ THE DOCS → - 18 / 35Editorial
Promo banner
Campaign banner with real-date countdown support and configurable CTA. Sits above-the-fold or inline.
READ THE DOCS → - 19 / 35Social proof
Testimonials
Customer quotes with attribution and source — shown as a single static quote or a rotating quote with prev/next buttons (no autoplay).
READ THE DOCS → - 20 / 35Social proof
Press / logos
Publication logo and quote blocks for as-seen-in surfaces. Supports SVG and image logos.
READ THE DOCS → - 21 / 35Social proof
FAQ
Disclosure list with editorial hairlines. Loads accessible details / summary primitives.
READ THE DOCS → - 22 / 35Collections
Collection navigation
Menu-driven or collection-list-driven nav chips. Built for category-rich catalogs.
READ THE DOCS → - 23 / 35Collections
Featured collection
Headline plus product grid. Configurable count, layout, and a view-all CTA.
READ THE DOCS → - 24 / 35Collections
Page-numbered collection grid
Single editorial collection grid that prints a decorative mono page number on each card — not interactive pagination, sort, or filter controls.
READ THE DOCS → - 25 / 35Collections
Promo tiles
Two-to-four promotional tiles with headline, image, and CTA per tile. For seasonal merchandising.
READ THE DOCS → - 26 / 35Product
Featured product
Single product surface with gallery + variant selector + buy. Use on the home page or any landing route.
READ THE DOCS → - 27 / 35Product
B2B quick order
Multi-variant grid for signed-in B2B buyers. Reuses quantity-rule and tier-price surfaces.
READ THE DOCS → - 28 / 35Product
Related products
Cross-sell row driven by Shopify's product recommendations API; the complementary instance reads a merchant-curated metafield list first.
READ THE DOCS → - 29 / 35Product
Recently viewed
Client-side recent products list, deduplicated, with configurable count. No personalisation tracking.
READ THE DOCS → - 30 / 35Product
Product card
Reusable card primitive — image, title, price, swatch, badges. Preview-only; embedded by grid sections.
READ THE DOCS → - 31 / 35Commerce
Newsletter
Email opt-in surface that wires into Shopify's customer marketing consent. Single-field or expanded.
READ THE DOCS → - 32 / 35Commerce
Custom Liquid
Escape hatch for embedded HTML / Liquid. For merchants who need a one-off custom block.
READ THE DOCS → - 33 / 35Navigation
Header
Top chrome — three-level mega menu, predictive search, currency + market switcher, cart drawer toggle.
READ THE DOCS → - 34 / 35Navigation
Footer
Multi-column footer with newsletter slot, menu picker, payment icons, social links, and locale lockup.
READ THE DOCS → - 35 / 35Navigation
Mobile bottom nav
Sticky bottom navigation for mobile viewports — home / browse / search / account; hidden at the top of the page and revealed once the header scrolls away.
READ THE DOCS →