Advanced

Editing the code, and the things worth knowing before you do.

Editing theme code is fine — it's your theme. Two things worth knowing first.

Duplicate before you edit. Online Store → Themes → Actions → Duplicate. If an edit goes wrong you can publish the copy while you sort it out.

Updates overwrite edits. When we ship a new version of SUPRA, you upload a fresh zip — your code edits don't carry across. Keep a note of what you changed. Settings and content are stored against your store, not the theme file, so those survive.

Where things live

File	What's in it
assets/base.css	All the styling, in numbered sections
assets/global.js	All the behaviour, as small named functions
sections/	One file per section, with its settings schema at the bottom
snippets/	Shared pieces — product cards, icons, the clock, the filmstrip sliver
locales/en.default.json	Every piece of text the theme prints

Changing wording

Don't edit the Liquid. Almost every string comes from locales/en.default.json, so changing it there changes it everywhere and keeps translations working.

Changing the font

Courier Prime is bundled in assets/ and declared in layout/theme.liquid. To swap it, replace the @font-face blocks and the --font-body token. The layout is built around monospace metrics — a proportional face will need spacing adjustments in several places.

Changing the page width

--page-width is set in layout/theme.liquid at 874px. It isn't a setting on purpose: the collection grid's five columns, the cart's price cells and the product page's buy row are all measured against it.

Adding a form embed elsewhere

The password page takes a pasted app form. If you want the same on the footer or another section, that's a small addition — get in touch rather than wiring it up by hand and losing it on the next update.