Sixteen components across six categories. One is live today with a fully-functional playground; the rest are planned, with their categorization, type, and intended file paths fixed so the IA is stable before any of them get built. Each component will land as its own page under this hub when its playground is complete.
Shopify themes distinguish sections, blocks, and snippets — each does a different job, lives in a different directory, and has different rules about schema. Every component in this library is labeled with one or more of these types. Knowing which is which dictates the file structure, what the merchant sees in the theme editor, and how it gets reused.
A top-level part of a template. Renderable independently. Has a {% schema %} tag that defines its settings, blocks, and presets. Merchants can add, remove, and reorder sections in the theme editor.
A nested, repeatable component within a section. Defined in the parent section's schema under blocks: [...]. Merchants add and reorder them inside the section. Newer theme architecture allows section-blocks in their own files.
A reusable Liquid partial included via {% render 'name', param: value %}. No schema, no editor presence — parameters are passed by the calling section or block. Used for shared UI primitives like buttons or pricing.
Every component page in this library follows the same pattern — a settings panel on the left that mirrors the Shopify theme editor, a live preview that updates as settings change, and exportable schema JSON plus rendered Liquid below. The point is: dial in the look you want, copy the schema, and ship it to the theme.
Live preview area — updates instantly as settings change
default to inverted, or toggle the optional heading on.{% schema %} JSON that should go in the section's Liquid file, with the current settings as defaults.Organized into six categories — containers, typography, marketing, forms, product, and navigation. Each card shows the component's type (section / block / snippet — some are multi-typed), its status, the intended file paths, and a short description. The single live component links to its playground; the planned ones describe what they'll cover when built.
The structural building blocks. Section is the primary top-level container that wraps everything else. Flexible Columns and Flexible Rows are the layout primitives for arranging content within sections or as full-page templates.
The top-level container. Wraps page content, applies background, padding, width, optional heading + kicker, optional top/bottom borders, optional anchor ID for in-page nav. The starting point — every other section component extends this base.
A configurable column layout — 2 / 3 / 4 / 5 column variants with merchant-controlled column count, gap, vertical alignment, and per-column width balance. Each column hosts blocks for nested content.
A vertically-stacked container with row-level gap, divider, and alignment controls. Useful for editorial pages where each row contains a different block type and needs independent vertical rhythm.
The atoms of page content. Headings, body text, and images — each as both a block (configurable in the theme editor) and as a snippet (reusable in other components' Liquid).
Standalone heading block with size (display / hero / large / medium / small / compact), semantic level (h1–h6), alignment, weight, family (sans or serif-italic), tone (default / muted / inverted / brand), optional kicker, optional intro paragraph, optional rule. The reusable snippet version takes the same params and renders inline within other components.
A block for body copy. Supports paragraphs, lists, links, emphasis, inline code. Settings for size (small / body / large / lede), alignment, max-width (measure / wide / full), and optional drop-cap.
Responsive image with proper srcset, lazy-loading, aspect-ratio preservation, optional caption, optional link, focal-point support for art-directed crops. The snippet version is used by every other component that renders product images.
Larger components that combine the primitives. Hero is a section variant tuned for top-of-page splash. Tabs and Collapsible Sections are interactive disclosure patterns.
A section variant tuned for top-of-page splash — large heading, lede, dual CTAs, optional media background (image or video), content overlay positioning, height controls (auto / 60vh / 80vh / 100vh). Used as the first section on most landing pages.
Tabbed disclosure — multiple panels, one visible at a time, controlled by a tab strip. Each tab is a block holding its own content. URL-state-sync support for deep-linkable tab states. WCAG-compliant keyboard navigation.
Accordion-style disclosure — repeatable panel blocks, expand/collapse, single-open or multi-open modes. Anchor-URL support for deep-linkable open states. Used for FAQs, product spec groups, install steps.
Form-related components — the form container itself (with field blocks) and the button primitive used throughout the theme as a snippet.
A merchant-configurable form. Field blocks (text, textarea, select, checkbox, radio, file upload). Form-level settings for submission target (contact / customer / quote / draft order), required/optional validation, success message, error handling. Used for warranty, quote requests, contact.
The button snippet, used everywhere. Variant (primary / secondary / ghost / link), size (small / medium / large), icon position (none / leading / trailing), href, target, loading state. The block version is for theme-editor-controlled button instances.
Product-specific primitives that get reused across PDP, collection cards, quick-view, compare, and search results. Both implemented as snippets so they're parameter-driven and consistent across contexts.
Star rating display. Reads from the product's review metafield (or shop-installed review app). Variants for size (small / medium / large), show count (yes / no), show "out of" (yes / no), link to reviews section. Used on PDP, collection cards, quick-view.
Product price display with sale price, compare-at price, percent-off badge, "from" prefix for variant ranges, "quote only" alternative for products with no fixed price. Variant-aware updates on PDP. Used everywhere price displays.
The components that get the buyer from the homepage to the product. Header navigation with mega-menu, predictive search, collection filtering. All performance-sensitive — they're loaded on most or every page.
The site header — logo, top-level nav with mega-menu drops on desktop, accordion drawer on mobile. Reads from Shopify's linklists. WCAG-compliant keyboard nav, focus management, ESC-to-close. The 5-top-level IA from the redesign plan.
Header-launched predictive search modal. Product, variant, document, FAQ, glossary results. Compatibility-aware mode that scopes to parts-that-fit when triggered from a PDP context. SKU exact-match priority. Recent searches, popular searches, empty state with helpful copy.
Collection-page filter sidebar. Spec-driven facets, count badges, collapsible groups, range sliders for numeric facets, swatch grids for visual facets. Mobile bottom-sheet variant. URL-state-sync so filter combos are shareable and crawlable.
Section unlocks every other component — they all render inside one. After Section, the order respects dependencies — heading and button are needed by almost everything, image is needed by Hero, and Hero + Form get built before the long-tail product components.
| Order | Component | Why it's here | Status |
|---|---|---|---|
| U-01 | Section | The primary container that wraps everything else. Defines the page-section pattern. | Live |
| U-02 | Headings | Needed by Section (heading slot), Hero, every content section. | Live |
| U-09 | Buttons | Needed by Hero, Form, every CTA. Cheap to build, high reuse. | Planned |
| U-06 | Text | Needed by Section's optional lede, by every editorial section. | Planned |
| U-07 | Image / Picture | Needed by Hero's media background, product cards, image-with-text. | Planned |
| U-03 | Hero | Has all dependencies in place; unlocks landing pages. | Planned |
| U-04 / U-05 | Flexible Columns / Rows | Layout primitives for editorial and marketing pages. | Planned |
| U-10 / U-11 | Tabs / Collapsible Sections | Interactive disclosure patterns for PDPs and FAQs. | Planned |
| U-08 | Form | Unlocks warranty + quote + contact pages. | Planned |
| U-12 / U-13 | Product Rating / Price | PDP primitives, low complexity, high reuse. | Planned |
| U-14 / U-15 / U-16 | Navigation / Search / Filters | Highest-visibility, highest-stakes components. Build last when patterns are well-established. | Planned |