Developer guide
Start here before your first change to the Beauty Affairs AU theme.
Developer guide
This repository uses two toolchains. Liquid runs on Shopify's servers, and Vite compiles everything under src/ into
the flat assets/ directory that Shopify serves.
Before your first change
Read How the build works. Most of the mistakes that cost a developer an afternoon
on this theme come from not knowing that assets/ and snippets/vite-tag.liquid are generated and committed.
Then check three things:
Confirm your Node version matches .nvmrc, which pins 24.4.0. The build works on other versions but the committed
output can differ.
Confirm the Shopify CLI is installed and authenticated against the a-sales-affair store. The store handle does not
match the brand name.
Confirm you are not on main or production. See Branches and theme sync.
Which file do I change?
| I want to change | Edit |
|---|---|
| Page markup or a section's settings schema | The Liquid file in sections/ or snippets/ |
| Behaviour in the browser | The TypeScript in src/entrypoints/ or src/components/ |
| Styling of a section | The CSS entrypoint beside its TypeScript, or Tailwind classes in the Liquid |
| A value a merchandiser should control | Add a setting to config/settings_schema.json or the section's schema |
| A value that belongs to store data | A metafield or metaobject in Shopify Admin, not this repository |
Anything under assets/ or snippets/vite-tag.liquid | Nothing. These are generated. Change the source |
Full directory detail is in Source map.
Day-to-day commands
nvm use # matches .nvmrc
npm install
npm run dev # four processes under run-ptyMake your change, check it in the browser, then before committing:
npm run typecheck # tsc --noEmit
npm run lint # shopify theme check
npm run build # regenerates assets/ and vite-tag.liquidThe pre-commit hook runs lint-staged and npm run build for you, so a commit always carries matching output. Run the
build yourself first so you can review that output before the hook commits it.
Detail is in Local development.
Common tasks
| Task | Page |
|---|---|
| Add a new browser behaviour to a section | Making common changes |
| Add a theme setting | Making common changes |
| Add a new section | Making common changes |
| Work on the cart | Mini-cart |
| Work on booking | MediSpa booking |
| Publish a preview theme | Deployment |
| Release to the live theme | Deployment |
What has no tests
This repository has no test suite and no CI beyond the theme pull workflow. There is no test command in package.json.
The three commands above are the only automated checks. npm run typecheck catches type errors across src/, and
npm run lint runs Shopify's Theme Check against the Liquid. Neither one will tell you a carousel stopped scrolling.
Verify visually, on a preview theme, at both desktop and mobile widths, before you ask anyone to review. Deployment covers publishing a preview without touching the live store.
Common surprises
assets/ contains both generated files and hand-written ones from previous theme versions. A file with an
eight-character hash in its name is generated. A file without one may be hand-written and still in use.
A section's JavaScript loads only where the section renders. A behaviour that works on the homepage and appears broken elsewhere is usually a bundle that was never loaded.
MediSpa pages block most third-party scripts. See Integrations.
sections/ and snippets/ hold a lot of files that nothing renders. Search before you edit. See
Legacy and unused code.