> For the complete documentation index, see [llms.txt](https://docs.webexp.dev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.webexp.dev/supra-shopify-theme/supra/advanced.md).

# 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.