Turn it on and save
The editor, the two switches that must both be on, and the buttons that compile, format, and reset.
The card at a glance
Everything on this card, in the order you'll use it:
| Control | What it's for | |
|---|---|---|
| 1 | Master switch | Turns the whole feature on. Off by default. The title shows a count once templates are active — Custom design template (1). The row stays collapsed until you click its title (or the arrow at the end of the row); with the switch off, opening it only shows a short description. |
| 2 | Template tabs | The five pieces you can replace: Full layout, Product card, Category tabs, Sidebar, Toast. Each is independent. |
| 3 | Per-template switch | Turns this template on. Shows Active or Inactive. |
| 4 | Reset / Format / Compile | Put the starting template back, format the code, or build your code into the preview. |
| 5 | Code editor | Pre-filled with a working starting template — a copy of the built-in Template 1 markup for that piece — so you edit rather than start blank. |
The arrow points to the props reference — a collapsible list of the values that template receives, each with its type and a one-line description. Some templates also list worked recipes there.
The info banner is telling the truth
The blue banner notes that support can't help debug custom templates. That's a real limit, not boilerplate — this is the one part of the app where you're writing the code.
Edit your first template
Open your bundle builder and go to the Design tab.
Find the Custom design template row and switch it on. This is the card's master switch — it's off by default, and nothing changes until you turn it on. Then click the row's title to open it.
Once you have templates running, the card title shows how many — Custom design template (2).
Pick a template to edit: Full layout, Product card, Category tabs, Sidebar, or Toast.
The editor opens pre-filled with a working starting template for that piece. Edit it.
Turn the template's own switch on. The app compiles your code for you at that moment — if there's a mistake, the switch stays off and a red Compile failed banner appears under the editor with the compiler's message and the line number.
Click Save in the save bar.
Both switches must be on
The card's master switch and the individual template's switch. If either is off, shoppers see the built-in design for that piece.
A template that's on replaces whichever built-in template the Design tab has selected for that piece — and that built-in selection is what shoppers get back if your template fails.
Once a template's switch is on, the Preview panel switches to your version straight away, so you can check your work before saving (it has desktop and mobile views, and a full-screen button). Keep editing and click Compile to push each change into the preview.
The buttons
| Button | What it does |
|---|---|
| Compile | Converts your JSX into something the storefront can run, and updates the preview. Turning the switch on does this for you whenever the code hasn't been compiled yet or has changed since the last compile — so you only need this button when reworking an already-active template. The first compile in a session also loads the compiler, so it can take a moment. Nothing reaches your store until you also click Save. |
| Format | Cosmetic only — it never changes what your template does, and code it can't read is left as it is. |
| Reset to default | Replaces the code in the editor with the starting template. Your edits are lost — there's no undo. It doesn't turn the template off or change the version that's already compiled, so an active template keeps running its old compiled code until you compile again (or switch it off) and save. |
After a successful Compile, a green banner confirms it. For an active template it says Compiled and applied to the preview. Save the bundle builder to publish it to your storefront. For one that's still off it says Compiled. Turn this template on, then save to publish it to your storefront.
When a compile fails
A red Compile failed banner appears under the editor. It shows the compiler's message — for example Unexpected token (2:0), sometimes starting with unknown: — followed by a few lines of your code with a > marking where it stopped. A blank editor gives Template is empty.
The app adds one line above your code before compiling, so the line number in the message is one higher than the line in the editor: line 2 in the message is the first line of your code.
Nothing is written when a compile fails, so your storefront keeps the last version that compiled. Common causes are in Troubleshooting.
The badges
| Badge | Meaning |
|---|---|
| Active / Inactive | Whether this template is currently the one shoppers see. |
| Edited — compile to apply | You changed the code since the last successful compile (this can also appear right after Reset to default). The preview and your shoppers still see the previously compiled version until you click Compile. |
The props reference is in the editor
Under each editor is a collapsible <template name> props reference — for example Full layout props reference. It lists every prop that template receives, with its type, as the app defines them. Use it as you write; these docs cover the same ground with recipes and context.
Save vs. compile vs. publish
These are separate steps, and it's easy to think one covers another:
| Step | What it actually does |
|---|---|
| Compile | Turns your JSX into runnable code and updates the preview only. |
| Save | The Save button in the save bar, which appears as soon as you change anything. Writes your builder — including your source and the compiled template — and refreshes what the storefront loads. If the builder is already published, shoppers get the new template once the save goes through. |
| Publish | The Publish button in the page header, shown while the builder is still a draft. It saves your changes and makes the builder live; Unpublish takes it down again. See Publish your builder. |
Compiling without saving means your next visit to the editor starts from the last saved version, not your unsaved edits — and Discard in the save bar throws away unsaved template work along with everything else. A draft builder isn't shown to shoppers however often you save it.
Go back at any time
Turn a template's switch off and save — the built-in design returns as soon as the save goes through, and your code stays in the editor for later. Turning the master switch off does the same for every template at once. Reset to default is the button that replaces your code with the starting template.