Skip to content

Section Reference

Sections are what a merchant adds when they click Add section in the theme customizer. Each owns its own layout, background and padding, and most accept blocks for the content inside.

Section What it’s for
Header Site header — logo, navigation, action icons, mobile drawer
Hero Top-of-page banner, full-screen or split layout
Featured Products Product card grid with heading and optional disclaimer
Search Results Search results page — product grid with article and page rails
Testimonials Customer quotes with ratings
Text Image Split Two-column copy and image layout
Article Feed Three-up blog feed with a heading and optional link
Teaser Centred heading and CTA over a gradient, with a bottom-cropped product image
Footer Site-wide footer — newsletter, brand, menu columns, disclaimers, legal
Health Library Blog index — search, topic filters and a load-more article grid
Video Showcase Featured YouTube video with a playlist and a full-screen player
UGC Spotlight Copy column beside a carousel of vertical customer videos
Reviews Hosting frame for the Okendo reviews widget
Featured Collections Collection cards as a grid or carousel, with a heading and CTA
Featured Banner Rounded image or video banner with a dark glass content card
Collection Grid The collection page — title, description and a two-column product grid
Product Row Horizontally scrolling product cards from a collection or hand-picked
Related Products Recommendation carousel with a hand-picked fallback list
Comparison Table Feature comparison grid with a highlighted column, CTA row and stats
Announcement Bar The strip above the header — one message or a rotating set
FAQ Section Question-and-answer accordion, from blocks or a reusable FAQ cluster
Features Grid of icon-led feature cards with an optional CTA and callout bar
Marquee Continuously scrolling strip of short phrases and small images
Rich Text General-purpose text container — headings, copy, lists and buttons
Title A standalone heading on its own band

The theme has 49 sections; the twenty-five above are written up so far. See the Docs Backlog for the full inventory and the order they’ll be worked through.

A section’s absence here means the page hasn’t been written — not that the section doesn’t exist.

Section ID — an optional anchor for in-page jump links. Set it to why-migrelief and the section is reachable at /page#why-migrelief.

Padding — top and bottom, in rem, set separately for mobile, tablet and desktop.

Background gradient — where present, a CSS background with a gradient picker supporting any number of colour stops. Empty means no background. See Colours.

Text themeLight or Dark. Dark flips text to white and inverts buttons and links automatically.