logo
Shopify Builds>Primitives>Theme blocks

Theme blocks

Definition

Theme blocks are the repeatable, merchant-arrangeable units inside a Shopify section. A section's schema declares block types with their own settings and limits, and a merchant adds, removes and reorders instances in the theme editor. Liquid renders them in one loop that branches on block type, so a single section can serve many page compositions without a template per variation.

Documented at https://shopify.dev/docs/storefronts/themes/architecture/blocks.

How we've used it

Blocks are how a product page stops being a deploy. The recurring move is to take everything a merchandiser might reorder — badge copy, ingredient rails, customer-photo rows, bundle rails, icon grids, campaign ribbons — and declare each as a block type dispatched from one case statement, so several product templates share one section and differ only in settings. Two rules keep it from collapsing. Block settings hold layout and behavior; metafields hold the words, because copy varies per product and settings don't. And when a block needs a variation the schema can't express, we fork to a new section type rather than editing the live one, since the theme editor keys saved settings to the section type and an in-place schema change would clobber templates that are already merchandised.

Builds using it

28 further gated builds use it; their pages follow.

Related entities

Liquid section schema and settings · Theme sections · Section presets · Theme app extension blocks · Metafields

Builds

Audience-targeted announcement bar with sticky-height measurement

Dawn's announcement bar, extended so each announcement block carries an audience setting, the section counts the matching blocks before it renders, and that count decides whether the page gets no bar, a static line or a carousel — with slide numbering that matches what's actually on screen, and a pinned height the rest of the layout can read.

LUS Brands

Rotating announcement carousel above the header, with pause control

An auto-rotating promo bar rendered by the layout above the header: a looped Swiper of up to ten text blocks that reserves its height before any script runs, waits for the carousel library on a bounded retry, and gives the shopper a real pause control whose label always says what it will do next.

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

Collection page: three filter modes, in-grid promo blocks and infinite scroll

The live collection body here is vendor code from a paid premium theme. This page documents what that code does, how it is configured across a large template set, and where our own contribution to it begins and ends.

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

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

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

Mega-menu header with separate mobile menu and image blocks

A second link-list setting gives the mobile drawer its own information architecture, and section blocks put imagery into panels that Shopify's link lists have no way to carry it in.

Three Ships

Tabbed mobile Shop menu with featured banner panel

A custom `<shop-tabs>` element turns the drawer's first-level Shop menu into horizontal tabs with panels of category links, merges a theme-editor banner block into the tab order by position, and leaves every other drawer item on the vendor's accordion.

Three Ships

PDP content accordion that borrows the premium theme's collapsible contract

A product-page accordion block that reuses Palo Alto's own `data-collapsible-*` behavior wiring while supplying its own heading semantics, CSS-variable theming and a responsive table layout for the long-form panels merchandisers author per product.

Three Ships

Product-page FAQ accordion: page-backed answers, mobile 'View More' reveal, auto-emitted FAQPage

A local extension of Palo Alto's Tabs section that hides every FAQ row past the third on mobile behind one reveal button, and emits `FAQPage` JSON-LD from the vendor's own block loop, reading each answer from the same Shopify page or rich-text field the accordion displays.

Three Ships

Variant-aware PDP hero banner driven by a 'heroic' metaobject

An editorial hero below the buy box that resolves its art, headline and copy from a per-variant metaobject, and refetches its own content through the Section Rendering API when the shopper switches variant.

LUS Brands

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

Filter-triggered promo cards inside the search results grid

A theme-editor block that puts a merchandiser-designed card into the search results grid at a chosen position, and shows it only while a named facet is active on that query.

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

Subscription bundle grid with tiered unlock progress

Two custom elements on the subscription landing page: a card whose two-step button reveals a frequency choice and then posts the variant with that `selling_plan` to the cart, and a wrapper that fetches the live cart after every add and drives a merchandiser-defined tier bar from what it finds there.

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