Most changes need no code: use the theme editor's sections, blocks and theme settings first. Edit the code when you need something the settings can't do.
The live theme and copies
You can edit the code of any of your themes, the live theme included. A save on the live theme applies to your storefront right away. It goes through the same checks as every save, so a save that's refused never reaches shoppers. Every save is a change in the theme's history, so you can undo it in History. The default theme can't be edited: in Online Store > Themes, duplicate it and edit the code of the copy. To try out a bigger change first, duplicate your theme, edit the copy, preview it, and when it looks right, make it live or schedule it. A copy of a Theme Store theme stays linked to its listing, so it still gets the theme's updates.
Changes that connected tools, apps and API tokens make to your live theme don't apply right away: they wait for your review. See Review theme changes from connected tools and apps.
Theme files
File |
What it holds |
|---|---|
theme.json |
The theme's pages and the sections each page requires or allows. |
tokens.json |
The theme's design tokens. |
config/settings_schema.json |
The theme settings, including the colour schemes. |
config/presets/ |
The theme's styles, one file per style. |
sections/ and blocks/ |
Each section and theme block: its markup, its style and its settings. |
templates/ |
Each page's layout: its sections, in order, with their settings. |
locales/ |
The theme's text in each language. |
assets/ |
The theme's images and fonts. |
You can also create, delete and rename page templates here; see Manage page templates in the code editor. Images and fonts can be replaced here; add videos by uploading a theme zip.
What every save checks
A save checks the whole theme the way a theme upload is checked, then shows every page that uses what you changed. The save is refused, naming the file and the reason, when it would:
leave a file that doesn't compile, or a section that reads store data it doesn't declare in its ctx_needs;
break a page's required sections or a template's settings;
remove a buy, cart, checkout or gift card form, one of its fields, or the price shown with the buy form;
stop a section listening for the theme editor's selection events, which the editor uses to show its hidden parts;
give the outer element of a drawer, dialog or panel a background, or a display rule that shows it while it's closed;
add a focus ring: an outline, shadow or border shown on focus;
remove or rename a colour scheme ID (its name and colours can change);
add text, an image or link address, or a colour written straight into the code where it should come from a setting or the theme's translations, or a new setting without its label in English, German, Spanish, French and Italian;
rename or remove a setting that has values saved in your store without a migration that carries them over or drops them, so your saved content would be lost;
stop a page from showing.
A page that already failed to show before your change doesn't stop the save; the save tells you about it. It also tells you about pages it couldn't show because the store has nothing to show them with yet, such as a product page before you add products.
If someone else saved the same file while you were editing, your save is refused so that nothing is overwritten. Reload the file and make your change again.
Upload a theme zip
Upload files replaces the theme's code with a theme zip, with the same checks as a save; on the live theme, it applies to your storefront right away. Files the zip doesn't have are removed; pages it doesn't have are kept.