Theme Playground

Storefront

Storefront building blocks, primitives, and content sections for navigation, product pages, and editorials

24 components

AccordionBlock

Data-driven accordion block for CMS-managed FAQs, specifications, and policy content.

BlockHeading

Reusable section heading block with optional preheader, body copy, alignment, and size controls.

CardImageWithCaption

Figure card with a 4:5 image and optional title and caption text. Use it for editorial galleries, team photos, and captioned product imagery.

CardVideo

Video thumbnail card with a play button overlay. Links to an external video URL and supports optional title and caption text below the thumbnail.

ContentWithGallery

Editorial section that pairs text content with an image gallery and optional product-card content.

ContentWithImageProductData

Feature section that combines a lead image, editorial copy, USP list, and optional product-card content.

CTAGroup

Paired action row that combines a primary button with an optional secondary text link.

DownloadItem

Download link primitive for manuals, care guides, technical sheets, and other supporting files.

Gallery

Section wrapper for arranging image, block, or product children in a consistent gallery layout.

GalleryWithCaption

Gallery wrapper with optional heading, indentation, and color-theme control for caption-led image sections.

GalleryWithLinkBlocks

LinkBlock-focused gallery row for image-led navigation and category discovery.

Hero

Composition-first hero layout for campaign landings, collection openers, and editorial storefront moments. The root owns layout and spacing while child slots own content structure.

ImageBlock

Simple media block for editorial images, campaign photography, and supporting visuals. Handles common aspect ratios and optional caption text.

ImageWithHover

Lightweight image helper that adds the shared hover-scale treatment to standard image content.

LinkBlock

Promotional navigation block for category landings, curated edits, and campaign jump points. Supports image overlay, card, and text-only presentations.

LinkBlockSmall

Compact image-led category tile for sub-navigation, seasonal edits, and small promotional grids.

ProductCard

Product display card for grids, search results, and recommendation rails. Supports standard layouts plus a compound slot surface on the same canonical export for custom merchandising treatments.

ProductImage

Product detail media gallery with synced active image state, variant-aware image selection, thumbnail rails, dots, and lightbox-first viewing.

QuickLinks

Responsive shortcut navigation that can render as compact pills, richer image-backed cards, or a composed browse section around the same directional navigation core.

Spacer

Deliberate vertical whitespace block for controlling rhythm between storefront sections.

TextContent

Editorial content block for brand storytelling, campaign messaging, and section intros. Supports standard, pull-quote, and column variants with CTA options.

TextContentWithImage

Editorial text block paired with supporting imagery. Supports side-by-side, stacked, and overlap layouts for campaigns, brand stories, and collection storytelling.

TruncatedText

Expandable rich-text block that starts with a shorter preview and reveals the full body on demand.

VariableTextContent

Prose-rendered HTML content block for rich text that arrives from CMS or external content sources.