Component Docs

Expanding Cards Footer (HW)

Optional area below the expanding cards track (CTA, disclaimer, trust line, etc.). Same allowed children as the section header.

HW Accordion

How to add and configure the HW Accordion on any page using the Shopify theme editor.

Absolute (HW)

How to use **Absolute (HW)** — content pinned to a corner or inset over a parent group.

Add to cart (HW)

How to use **Add to cart (HW)** — the button customers click to add a product to their cart.

Text (HW, align)

How to use **Text (HW, align)** — rich text with independent mobile and desktop alignment, even when the block is not full width.

Announcement Text (HW)

Delta doc. For slides, autoplay, and bar layout, see [Announcement Bar (HW)](../../sections/hw-header-announcements/EDITOR_GUIDE.md).

Article Date (HW)

How to use **Article date (HW)** — a formatted blog post date with the same typography controls as Text (HW).

Badge (HW)

How to use **Badge (HW)** — sale, sold-out, or custom labels on product card images.

Blog Card (HW)

How to use **Blog Card (HW)** — the composable card for a single blog post.

Button (HW)

How to use **Button (HW)** — the standard clickable button/link block used across the theme.

Button modal (HW)

How to add a button that opens a modal dialog with custom content.

HW Buy Buttons

How to configure **Buy buttons (HW)** inside a Product card (HW).

HW Card

How to configure the `HW Card` block inside the **HW Carousel / Grid** section.

HW Card Divider

How to configure **Card divider (HW)** inside a Product card (HW).

HW Card Icon Text

How to configure **Card icon text (HW)** inside a Product card (HW).

HW Card Popup

How to configure **Card popup (HW)** inside a Product card (HW).

Collection Count (HW)

How to display a collection's product count inside custom richtext copy.

Collection Tabs (HW)

Pill buttons that switch which collection’s products show in **Featured Collections (HW)**.

Compare Cell (HW)

One value in the table — this column's answer for one feature row.

Compare Column (HW)

One column in the comparison table — a product, a plan, or a competitor. Nests one [Compare Cell](../hw-compare-cell/EDITOR_GUIDE.md) per feature row.

Compare Columns (HW)

Fixed slot that holds every comparison column. Column width and the gap between items live here, not on the section — set once for the whole table.

Compare Footer (HW)

Optional area below the comparison table (disclaimer text, a repeated "Shop now" button, trust badges, etc). Same settings as a generic Group block. Mirrors [Compare Header](../hw-compare-header/EDITOR_GUIDE.md).

Compare Header (HW)

Optional heading/subtitle/button area above (or beside) the comparison table. Same settings as a generic Group block. Mirrors [Compare Footer](../hw-compare-footer/EDITOR_GUIDE.md).

Compare Row (HW)

One feature label, e.g. "Free shipping" or "30 sachets per box."

Compare Rows (HW)

Fixed slot that holds every feature row. Feature-label column width and typography live here, not on the section.

Group (Conditional)

How to use **Group (Conditional)** — a Group that only appears when a linked value is present.

Text (Conditional)

How to use **Text (Conditional)** — text that shows or hides based on linked values.

HW Countdown Timer

How to add and configure countdown timers using the Shopify theme editor.

Countdown Delivery (HW)

How to use **Countdown Delivery (HW)** — a next-day delivery countdown with cutoff time and delivery day.

Email Signup (HW)

Newsletter / email capture form. Often sits under the logo in the footer brand column; works in other sections too.

HW FAQ Split

How to add and configure the **FAQ Split (HW)** section.

FAQ Split Content (HW)

Delta doc. For the full section walkthrough (adding FAQ Split, building a two-column layout, filter categories), see [`hw-faq-split/EDITOR_GUIDE.md`](../hw-faq-split/EDITOR_GUIDE.md). This file covers only the **FAQ Split Content (HW)** block itself.

FAQ Split Data (HW)

How to use **FAQ Split Data (HW)** — an accordion built from a FAQ Group metaobject or a product FAQ metafield list.

FAQ Split Filter (HW)

Delta doc. For adding the section and the basic pill settings (label, typography, spacing, colours, padding override), see [`hw-faq-split/EDITOR_GUIDE.md`](../hw-faq-split/EDITOR_GUIDE.md) §"Filter Pills". This file covers the settings **not** already listed there: the active-pill override and the layout override.

Featured Strip (HW)

How to use **Featured Strip (HW)** — a compact product or collection strip for drawers, menus, and footers.

Flex Spacer (HW)

How to use the **Flex Spacer (HW)** block and related **Group (HW)** height options to control vertical spacing in flex layouts (especially heroes and full-height groups).

Copyright (HW)

Shows the © line in **Policies & Links**. Parent: [Policies & Links](../../sections/hw-footer-utilities/EDITOR_GUIDE.md).

Footer Menu Group (HW)

A column inside the main footer. Parent: [Footer (HW)](../../sections/hw-footer/EDITOR_GUIDE.md).

Policy Link (HW)

One manual policy (or legal) link inside a **Policy List**. Parent: [Policy List](../hw-footer-policy-list/EDITOR_GUIDE.md).

Policy List (HW)

Policy links row in **Policies & Links**. Parent: [Policies & Links](../../sections/hw-footer-utilities/EDITOR_GUIDE.md).

HW Grid — Editor Guide

**HW Grid** is a CSS grid container. Use it inside **Group (HW)**, **HW Carousel / Grid** slides, or anywhere the block is allowed.

HW Grid item

Delta doc. For the parent grid (columns, gaps, overflow, bleed, appearance), see [`hw-grid/EDITOR_GUIDE.md`](../hw-grid/EDITOR_GUIDE.md). This file covers only the **HW Grid item** block.

HW Group — Editor Guide

**HW Group** is a flexible container that wraps child blocks in a flex layout. Use it to stack, align, or space children — vertically or horizontally — on mobile and desktop independently. It also supports background media, borders, padding, sticky positioning, and a clickable block link.

Group (HW, basic)

How to use **Group (HW, basic)** — the lightest-weight layout container in the Group (HW) family.

Group (HW, card)

How to use **Group (HW, card)** — a styled card container with background, border, and full sizing control.

Group Hover (HW)

How to use **Group Hover (HW)** — a full **Group (HW)** container with optional hover transitions for cards, tiles, and clickable surfaces.

Group (HW, link)

How to use **Group (HW, link)** — a full **Group (HW, card)** container with a clickable link on the whole surface.

Hero Shape (HW)

How to use **Hero Shape (HW)** — a decorative image block that pins to a corner of the hero section, behind or above the content.

Icon (HW)

How to use **Icon (HW)** — a small icon or symbol, from the theme's built-in icon set, a custom image, or pasted SVG code.

Image (HW)

How to use **Image (HW)** — the standard image block, with independent width, max-size, and aspect-ratio control on mobile and desktop.

Inset (HW)

How to use **Inset (HW)** — a lightweight padding and margin wrapper for child blocks when you do not need flex layout.

HW Inventory Alert

How to configure **Inventory alert (HW)** inside a Product card (HW).

Logo (HW)

Shows the store logo from **Theme settings → Logo**. Change the image there — this block only controls size, padding, and optional inverse logo.

Collections loop

A compact slider or grid of Shopify collections — typically in the mobile menu footer or a mega menu. Not the same as **Loop – Collection Card** or **Loop – Collection Tiles** (those use collection metaobjects in a page section).

Ingredient tabs

Turns **Loop – Ingredient** into a tabbed strip — one tab per ingredient group, one shared card design. You only see this block when tabs are enabled on the ingredient section.

Collection Tile Item (HW) — Editor Guide

Block: `_hw-loop-item__collection-tile` (static block inside Loop – Collection Tiles)

HW Media Hotspots

How to add interactive hotspot pins to product images in the Shopify theme editor.

HW Media USPs

How to configure product-specific selling points that appear in the media gallery sidebar.

Mega Menu Collections (HW)

Delta doc. [Mega menu editor guide](../../header-navigation/mega-menu/EDITOR_GUIDE.md).

Mega Menu Content (HW)

Delta doc. [Mega menu editor guide](../../header-navigation/mega-menu/EDITOR_GUIDE.md).

Mega Menu Group (HW)

Delta doc. [Mega menu editor guide](../../header-navigation/mega-menu/EDITOR_GUIDE.md).

Mega Menu Image (HW)

Delta doc. [Mega menu editor guide](../../header-navigation/mega-menu/EDITOR_GUIDE.md).

Mega Menu Link Column (HW)

Delta doc. [Mega menu editor guide](../../header-navigation/mega-menu/EDITOR_GUIDE.md).

Mega Menu Panel (HW)

Delta doc. [Mega menu editor guide](../../header-navigation/mega-menu/EDITOR_GUIDE.md).

Mega Menu Products (HW)

Delta doc. [Mega menu editor guide](../../header-navigation/mega-menu/EDITOR_GUIDE.md).

Mega Menu Promo (HW)

Delta doc. [Mega menu editor guide](../../header-navigation/mega-menu/EDITOR_GUIDE.md).

Metaobject Price Calculation (HW)

How to use **Metaobject price calculation (HW)** — a calculated unit price (e.g. price per serve) from a product and a divisor.

Metaobject Text List (HW)

How to use **Metaobject text list (HW)** — a list of short strings from a metaobject field, shown as badge-style rows.

Mobile Drawer Menu (HW)

Delta doc. [Mobile navigation editor guide](../../header-navigation/mobile-nav/EDITOR_GUIDE.md).

Mobile Drawer Menu Links (HW)

Delta doc. [Mobile navigation editor guide](../../header-navigation/mobile-nav/EDITOR_GUIDE.md).

Mobile Drawer Menu Rich Branch (HW)

Delta doc. [Mobile navigation editor guide](../../header-navigation/mobile-nav/EDITOR_GUIDE.md).

Mobile Menu Drawer (HW)

Delta doc. Drawer zones, split mode, and troubleshooting: [Mobile navigation editor guide](../../header-navigation/mobile-nav/EDITOR_GUIDE.md).

Mobile Menu Drawer Content (HW)

Delta doc. [Mobile navigation editor guide](../../header-navigation/mobile-nav/EDITOR_GUIDE.md).

Mobile Menu Drawer Footer (HW)

Delta doc. [Mobile navigation editor guide](../../header-navigation/mobile-nav/EDITOR_GUIDE.md).

Mobile Menu Drawer Header (HW)

Delta doc. [Mobile navigation editor guide](../../header-navigation/mobile-nav/EDITOR_GUIDE.md).

Nav Item (HW)

Delta doc. Header layout, menu position, and sticky behaviour are in [HW Header](../../sections/hw-header/EDITOR_GUIDE.md). Composable mega panels (link columns, promo tiles) are in [Mega menu editor guide](../../header-navigation/mega-menu/EDITOR_GUIDE.md).

Overflow (HW)

How to use **Overflow (HW)** — a horizontal row that can scroll or bleed past the section edges.

HW Popup

How to configure the Returning Visitor Popup in the Shopify theme editor.

Checkout Button

Parent: [Returning visitor popup](../hw-popup/EDITOR_GUIDE.md) (footer children). Sibling: [View cart link](../hw-popup-view-cart-link/EDITOR_GUIDE.md).

Popup Footer

Parent: [Returning visitor popup](../hw-popup/EDITOR_GUIDE.md). Siblings: [Header](../hw-popup-header/EDITOR_GUIDE.md), [Items](../hw-popup-items/EDITOR_GUIDE.md). Related: [View cart link](../hw-popup-view-cart-link/EDITOR_GUIDE.md), [Checkout button](../hw-popup-checkout-button/EDITOR_GUIDE.md).

Popup Header

Parent: [Returning visitor popup](../hw-popup/EDITOR_GUIDE.md). Siblings: [Items](../hw-popup-items/EDITOR_GUIDE.md), [Footer](../hw-popup-footer/EDITOR_GUIDE.md).

Popup Items

Parent: [Returning visitor popup](../hw-popup/EDITOR_GUIDE.md). Siblings: [Header](../hw-popup-header/EDITOR_GUIDE.md), [Footer](../hw-popup-footer/EDITOR_GUIDE.md).

View Cart Link

Parent: [Returning visitor popup](../hw-popup/EDITOR_GUIDE.md) (footer children). Sibling: [Checkout button](../hw-popup-checkout-button/EDITOR_GUIDE.md). Footer: [Popup footer](../hw-popup-footer/EDITOR_GUIDE.md).

Presence indicator (HW) — Editor Guide

**Theme editor:** Add **Presence indicator (HW)** from the block picker where your layout allows it (typically inside a **Group (HW)** row next to a name or avatar, or in the **Hero (HW)**).

HW Price Settings

How to configure global price display options in the Shopify theme editor.

HW Price Calculation

How to configure **Price calculation (HW)** inside a Product card (HW).

HW Product Card

How to add and configure the **Product card (HW)** block in the theme editor.

HW Product Card Gallery

How to configure **Product card media (HW)** inside a Product card (HW).

Product Card Media Overlay (HW)

How to use **Product card media overlay (HW)** — corner content on a product card’s image gallery.

HW Product Info Items

How to display structured product information in the media gallery sidebar.

HW Product Linked Cards

How to configure the **Product linked cards (HW)** block on product pages (“Add more, grow more” style upsell strip).

Product Media Overlay (HW)

How to use **Media overlay (HW)** on the product media gallery — badges, price callouts, or short text pinned to a corner of the gallery.

Product Siblings (HW)

Shows related products as clickable image circles so shoppers can jump between SKUs (e.g. different shades as separate products). Use inside **Product details** on the product page.

HW Product Title

How to configure **Product title (HW)** inside a Product card (HW).

HW Product USP Chips

How to show small USP chips (icon + label) in the product buy area — per product via metaobjects, or the same fixed chips on every product.

Progress (HW)

How to use **Progress (HW)** — a percentage bar with optional label and entrance animation.

HW Size Picker

How to configure **Size picker (HW)** inside a Product card (HW).

Star Rating (HW)

How to use **Star Rating (HW)** — a fixed 5-star rating display with optional custom icons.

Stat Split Content

Parent: [Stat Split](../../sections/hw-stat-split/EDITOR_GUIDE.md). Sibling: [Header](../hw-stat-split-header/EDITOR_GUIDE.md).

Stat Split Header

Parent: [Stat Split](../../sections/hw-stat-split/EDITOR_GUIDE.md). Sibling: [Content](../hw-stat-split-content/EDITOR_GUIDE.md).

HW Sticky Buy CTA

How to configure **Sticky buy CTA (HW)** on product pages (Glowwa-style scroll-to-buy bar).

Supply Picker Loop (HW)

Product-page cards for choosing a supply duration (e.g. 1 / 3 / 6 months). Each card can link to a sister product; the current product is highlighted and sold-out options show an overlay.

HW Swatches

How to configure **Swatches (HW)** inside a Product card (HW).

Tabbed content (HW)

How to add and configure **Tabbed content (HW)** and its child blocks in the Shopify theme editor.

Text (HW)

How to use **Text (HW)** — the full-featured text block, and how to tell when a lighter sibling would do the job instead.

Text (HW, basic)

How to use **Text (HW, basic)** — the default text block for plain headings and paragraphs.

Text (HW, basic align)

How to use **Text (HW, basic align)** — basic text with alignment that works even when width is Fit or Custom.

Text (HW, pill background)

How to use **Text (HW, pill background)** — a text block with a coloured background, corner radius, and its own padding, for tags, badges, and chip-style labels.

Text (HW, custom)

How to use **Text (HW, custom)** — for one-off typography that doesn't match any of the theme's design-system type presets.

Text (HW, truncate)

How to use **Text (HW, truncate)** — text that always clips to a character count, sentence count, or line count.

Timeline Header (HW)

Delta doc. For the full section walkthrough, see [`hw-timeline/EDITOR_GUIDE.md`](../../sections/hw-timeline/EDITOR_GUIDE.md).

Timeline Item (HW)

Delta doc. For the full section walkthrough (image, rail, scroll reveal), see [`hw-timeline/EDITOR_GUIDE.md`](../../sections/hw-timeline/EDITOR_GUIDE.md).

Timeline Items (HW)

Delta doc. For the full section walkthrough, see [`hw-timeline/EDITOR_GUIDE.md`](../../sections/hw-timeline/EDITOR_GUIDE.md).

Variant Picker (HW)

Lets shoppers choose product options (size, colour, etc.) on the product page. Prefer this over the base Variant picker when you need larger or smaller colour swatches on the PDP.

HW Video

How to configure the `HW Video` block.

HW View Product

How to configure **View product (HW)** inside a Product card (HW).

Untitled component

HW Product Media Gallery

How to configure the enhanced Product Media Gallery block in the Shopify theme editor.

HW Social Media Links

How to configure and use the Social Media Links block in the Shopify theme editor.

HW Cart Drawer

How to configure and preview the cart drawer using the Shopify theme editor.

HW Empty Cart State

How to configure the empty cart experience in the Shopify theme editor.

HW Estimated Delivery

How to configure and use the Estimated Delivery block in the Shopify theme editor.

Cart Footer

Parent: [Cart drawer](../../EDITOR_GUIDE.md). Cart page summary (different block): [Cart summary](../hw-cart-summary/EDITOR_GUIDE.md).

Cart Header

Parent: [Cart drawer](../../EDITOR_GUIDE.md). Empty-cart header controls live on the **Cart drawer** section — see [Empty cart](../../../empty-cart/EDITOR_GUIDE.md).

Cart Items

Parent: [Cart drawer](../../EDITOR_GUIDE.md). Line rows: [Cart line item](../hw-cart-line-item/EDITOR_GUIDE.md). Upsells: [Cart upsells](../hw-cart-upsells/EDITOR_GUIDE.md).

HW Cart Free Shipping & Gifts

How to configure and use the Free Shipping & Gifts block in the Shopify theme editor.

Cart Line Item

Parent: [Cart drawer](../../EDITOR_GUIDE.md) (full setting walkthrough under **Cart Line Item**). Cart page products use a different block — see [Main cart](../../../../sections/hw-main-cart/EDITOR_GUIDE.md).

Cart Summary

Used on the **cart page** (Main cart). Drawer checkout/totals are edited under **Cart footer** — see [Cart footer](../hw-cart-drawer-footer/EDITOR_GUIDE.md). Parent page: [Main cart](../../../../sections/hw-main-cart/EDITOR_GUIDE.md).

HW Cart Upsells

How to configure and use the Cart Upsells block in the Shopify theme editor.

HW Payment Icons

How to configure and use the Payment Icons block in the Shopify theme editor.

Header navigation (HW) — editor guides (index)

Merchant-facing docs are **split by topic** so you can jump straight to what you are configuring.

Mega menu (HW) — editor guide

How to build **desktop** dropdown mega menus in the Shopify theme editor: panels, handles, link columns, and fallback behaviour. The **Menu (HW)** block lives under **Header** in the **Header** group.

Mobile navigation (HW) — editor guide

How to configure the **mobile menu drawer** when using **Menu (HW)** and **Mobile menu drawer (HW)** blocks. Desktop mega menus are documented separately: [Mega menu — editor guide](../mega-menu/EDITOR_GUIDE.md).

HW Carousel / Grid — editor guide

How to add and configure **HW Carousel / Grid** in the Shopify theme editor.

Cart Upsells Metafield Bridge

Related: [Cart upsells](../../cart/cart-drawer/blocks/hw-cart-upsells/EDITOR_GUIDE.md).

Compare (HW)

Side-by-side comparison table — your product vs. competitors, or one plan vs. another. Child blocks: [Header](../../blocks/hw-compare-header/EDITOR_GUIDE.md), [Compare columns](../../blocks/hw-compare-column-list/EDITOR_GUIDE.md), [Compare rows](../../blocks/hw-compare-row-list/EDITOR_GUIDE.md), [Footer](../../blocks/hw-compare-footer/EDITOR_GUIDE.md).

Expanding Cards (HW)

How to use **Expanding Cards (HW)** — a row of media cards that expand on desktop and swipe as a peek carousel on mobile.

Fade Slider (HW)

How to use **Fade Slider (HW)** — stacked slides that crossfade instead of scrolling sideways.

Featured Blog (HW)

How to use **Featured Blog (HW)** — a blog post carousel or grid with fully composable cards.

Featured Collections (HW)

Shows products from several collections behind a row of tabs — carousel or grid per breakpoint.

HW Footer

How to use **Footer** (HW) — the main footer section. The thin bar underneath (policies, copyright) is a separate section: [Policies & Links](../hw-footer-utilities/EDITOR_GUIDE.md).

Policies & Links (HW Footer Utilities)

The thin bar under the main footer — policies, copyright, payment icons. Parent footer: [Footer (HW)](../hw-footer/EDITOR_GUIDE.md).

HW Header

> **Historical note:** this section was called "Header 2" during a period when it existed alongside an older, separate header implementation. That older header has been removed and this is now the only header section in the theme — you do not need to choose between two headers.

Announcement Bar (HW)

Delta doc. For header-group placement and how the bar relates to the main header, see the [Header navigation editor index](../../header-navigation/EDITOR_GUIDE.md).

Header Offset Spacer (HW)

Delta doc. For why the header group needs offset space at all, see the [Header navigation editor index](../../header-navigation/EDITOR_GUIDE.md).

HW Hero

How to use **HW Hero** — the full-bleed banner section used at the top of most pages.

Hero slideshow (HW)

How to use **Hero slideshow (HW)** — a full-bleed rotating banner in the same family as **Hero (HW)**.

Loop – Card Object

Flexible card carousel/grid driven by **Card Object** metaobjects. Use when the card fields don’t match a dedicated loop type (UGC, review, ingredient, etc.). Prefer a typed loop when one exists.

Loop – Collection Card

Hand-picked **collection card** metaobjects in a carousel or grid. Use for curated collection promos. For tiles that highlight the current collection from a group, use **Loop – Collection Tiles**. For a simple list of Shopify collections in the mobile menu, use **Collections loop**.

HW Loop Collection Tiles — editor guide

How to configure **Loop – Collection Tiles** in the Shopify theme editor.

Loop – FAQ

FAQ questions and answers in a carousel or grid. Prefer this when FAQs come from a product metafield or an FAQ group. For a two-column FAQ with filters, use the FAQ split sections instead.

Loop – Ingredient

Ingredient cards from an ingredient group — single strip or tabbed groups. Use this for formula/ingredient storytelling. For materials use **Loop – Material**; for a simple picked card set use **Loop – Card Object**.

Loop – Material

Material / fabric cards in a carousel or grid. Use for material stories on PDPs. For ingredients use **Loop – Ingredient**; for reviews use **Loop – Review**.

Loop – Review

Shows product reviews in a carousel or grid. Use this for review content; use **Loop – UGC** for shopper videos and **Loop – Card Object** for generic custom cards.

Loop – UGC

Carousel or grid of user-generated video cards from a UGC video group. Prefer this over the generic Loop section when the content is UGC videos. For product reviews use **Loop – Review**; for store-picked video cards use **Loop – Video**.

Loop – Video

Hand-picked video cards in a carousel or grid. Use when you want a curated list of **video card** metaobjects. For UGC clips from a group entry, prefer **Loop – UGC**.

Main Cart

Empty state details: [Empty cart](../../cart/empty-cart/EDITOR_GUIDE.md). Drawer (separate): [Cart drawer](../../cart/cart-drawer/EDITOR_GUIDE.md). Summary column: [Cart summary](../../cart/cart-drawer/blocks/hw-cart-summary/EDITOR_GUIDE.md).

Marquee (HW)

How to use the standalone **Marquee (HW)** section — a continuous scrolling strip for short phrases or logo rows.

Product Carousel/Grid (HW)

How to use **Product Carousel/Grid (HW)** — products in a per-breakpoint carousel or grid with Product Card (HW).

Product Information (HW)

Main product page layout: media on one side, product details on the other, plus optional sticky bars at the bottom.

Product List (HW)

How to use **Product List (HW)** — a collection product grid/carousel using Product Card (HW).

HW Search Panel

How to configure the **Horizon Works** full-width search overlay for **HW Header 2**.

HW Section Starter

How to use **HW Section Starter** — a flexible, general-purpose content section with layout, background, and divider controls.

Stat Split (HW)

Full-bleed photo with a text/stats column on the left or right. Child blocks: [Header](../../blocks/hw-stat-split-header/EDITOR_GUIDE.md) and [Content](../../blocks/hw-stat-split-content/EDITOR_GUIDE.md).

HW Timeline

How to use **HW Timeline** — a storytelling section with a sticky image beside a vertical step list that can reveal as the shopper scrolls.

Buttons — Editor guide

For merchants and editors. **Theme settings → Buttons.**

Color Palette — Editor Guide

> For merchants and content editors who manage the Horizon Works storefront.

HW Cursor

How to configure the custom cursor feature in the Shopify theme editor.

Product cards — Editor guide

For merchants and editors. **Theme settings → Product cards.**

Typography — Editor Guide

**Theme settings → Typography**