Custom sections reference

👤 Ops · 🛠 Dev

A quick reference to the bespoke sections used across the site. To add or rearrange a section on a page, open the page in the theme editor and click Add section.

Standard hero

Full-width hero with title, subtitle (rich text), background image/colour, and breadcrumb blocks. Add one breadcrumb block per crumb to build the trail.

Installation

The multi-step booking/purchase flow. This single section powers both the Scheduling tool and Buy for delivery pages — see those pages for the block-by-block breakdown.

Logos carousel

Scrolling brand logos. Two block types:

• Carousel logo — a small logo in the looping carousel.
• Prominent logo — a larger logo highlighted to one side.

Edit the title (rich text), after-text (e.g. "+ more"), and background colour at the section level.

Reviews carousel

Uses Reviews widget metaobjects plus optional inline review blocks.

FAQs and CVPs

A mixed section combining Image blocks, CVP blocks (icon + short value-prop text), and FAQ blocks (question + answer). Use it on landing-style pages to combine credibility messaging with FAQs in one band.

Two-column

A generic two-column layout. Supports a metaobject block of type faq_entries, so an FAQ entry can sit beside an image or marketing copy.

Hero space

A landing hero with an optional reviews-widget overlay (uses the reviews_widgets metaobject).

Postcode entry / Rego entry

Lightweight standalone forms that capture a rego or postcode and persist it to the browser, so the next page can pre-fill the vehicle/location. Used on the home and category pages. See Vehicle lookup and Delivery zones for what they feed.

Product carousel / Product quick view

Display product cards, with the option to open a quick-view modal that reuses the same product metafields as the PDP (pdp_bullet_points, key_features, specifications). See Managing battery products.

Developer reference

• All sections live under /sections/*.liquid with matching {% schema %} blocks defining settings and block types.
• Visual catalogue pages used during build live in templates/page.component-showcase.json plus the various *-showcase.liquid sections.
• BEM CSS, mobile-first, 4px grid — see CLAUDE.md and DESIGN-GUIDELINES.md.