Technical Reference
Repository & theme structure
How the Car Battery Pro theme codebase is organised.
Repository & theme structure
🛠 Dev
The theme follows the standard Shopify theme layout. This page is a map; the authoritative
conventions live in CLAUDE.md and AGENTS.md at the repo root.
Directory layout
assets/ Static CSS, JS, images. JS modules are classes on window.theme.*
blocks/ Nestable editor-customisable components (require {% schema %})
config/ settings_schema.json + settings_data.json (theme settings)
layout/ Top-level HTML wrappers (<head>, <body>)
locales/ Translation JSON files (en.default.json, *.schema.json)
sections/ Full-width editor-customisable modules (require {% schema %})
snippets/ Reusable Liquid fragments (require {% doc %})
templates/ JSON files defining page structureKey root files
| File | Purpose |
|---|---|
CLAUDE.md | Coding conventions (Liquid, CSS/BEM, JS, translations). Read this first. |
AGENTS.md | The detailed contributor/agent guide. |
DESIGN-GUIDELINES.md | The design system and visual standards. |
TRACKING.md | The analytics / data-layer contract (reproduced under Tracking). |
README.md | Shopify CLI setup and deployment basics. |
scripts/deploy.js | Custom deployment helper (see Deployment). |
web-pixel.js | The Shopify Web Pixel source for GTM (see Tracking). |
Custom feature entry points
| Feature | Where to look |
|---|---|
| Vehicle lookup | sections/rego-entry.liquid, assets/rego-entry.js, assets/vehicle-details.js |
| Battery compatibility UI | assets/vehicle-suitability.js |
| Postcode / delivery zones | sections/postcode-entry.liquid, assets/postcode-entry.js |
| Installation booking | sections/installation.liquid, assets/installation.js |
| API bootstrap | snippets/api-init.liquid, snippets/development-mode.liquid |
| Auth | assets/session-manager.js |
See Custom JavaScript modules for what each module does.