Page template: Scheduling tool
The structure of the book-a-battery-fitting page and how to edit it safely.
Page template: Scheduling tool
👤 Ops · 🛠 Dev
The Scheduling tool is the multi-step book a battery fitting flow. It uses the page.scheduling-tool
template (set via the page's Theme template dropdown). For how the booking works at runtime — the
Order ID, reservation, and payment confirmation — see Installation booking.
Section order on the page
- Standard hero — title, subtitle, breadcrumbs.
- Installation — the multi-step booking flow (the heart of the page).
- Logos carousel — supported car-make logos.
- Reviews carousel — review widgets + sample reviews.
- FAQs and CVPs — value propositions, images, FAQs.
The Installation section in detail
The Installation section is a series of bullets (top of section) followed by step and validation blocks. Each block's form type ties it to the JS-driven flow.
| Block | Form type | Purpose |
|---|---|---|
| Step | rego-entry | Customer enters their car rego. |
| Validation (success) | rego-entry | Confirms the detected vehicle. |
| Validation (warning) | rego-entry | Vehicle not in database — fallback CTAs. |
| Step | batteries | Pick a battery for the detected vehicle. |
| Validation (warning) | batteries | No batteries found — call us / callback. |
| Step | details | Confirm name / address / contact. |
| Step | time-slot | Pick an install time slot. |
| Step | confirmation | Final review + pay & schedule CTA. |
Editing copy
Click any Step or Validation block to change its Title, Subtitle, Content, Button text, and Help text.
Do not change a block's form type — that's how the section knows which UI to render and which API to call. Changing it breaks the step.
Editing the bullets at the top
Click a Bullet block to edit its text and tooltip. Add or remove bullets via the section's left sidebar.
Adding or removing a step
Avoid removing steps — the JavaScript expects the full sequence. To hide a step, mark its block
as disabled. Adding a new step requires a developer to extend assets/installation.js and the
matching component.installation.* snippets.
Common edits
- Hero image / title — click the Standard hero section.
- Bullet copy at the top of the form — click the relevant Bullet block under Installation.
- FAQ content at the bottom — edit the FAQs and CVPs section blocks.
- Phone number on a warning state — edit the Validation block (
rego-entrywarning orbatterieswarning) and update its Primary CTA URL to the newtel:link.
Developer reference
- Template:
templates/page.scheduling-tool.json(generated by the theme editor — edit via admin). - Section:
sections/installation.liquid. Schema definesbullet,step, andvalidationblock types. - Step renderers (one per form type):
snippets/component.installation.select-battery.liquid,…details.liquid,…time-slot.liquid,…confirmation.liquid; rego entry usessnippets/component.rego-entry-form.liquidandassets/rego-entry.js. - JS modules:
window.theme.regoEntry,window.theme.vehicleDetails,window.theme.sessionManager. See Custom JavaScript modules and The backend API.