Troubleshooting

A custom template can fail in exactly two ways — at compile time, or at render time — and both are designed to leave your storefront working.

"Compile failed" with a red banner

The switch won't stay on, and the message names the line. Usual suspects:

• A missing closing tag
• class instead of className
• A stray const, if, or other statement
• More than one top-level element — wrap them in <>…</>

See The rules for the full list. Nothing is published while a compile is failing, so your live store is unaffected.

Looks right in the preview, but the storefront shows the old design

Compiled fine, but the storefront shows the built-in design instead of mine

Your template threw an error while rendering, so the app quietly reverted that piece to the built-in design rather than leave a hole in the page. Open your browser console and look for a message starting with [Foxr Bundle Builder] custom template.

The usual cause is reading through a value that can be missing — for example props.selectedBox.maxItems when no box is selected. Use props.maxItems instead (always a number), or guard it: props.selectedBox && props.selectedBox.maxItems.

Fix the code and click Compile again to get another attempt.

The badge says "Edited — compile to apply"

You changed the code since the last compile. The preview and your shoppers still see the older compiled version. Click Compile, then Save.

A button in my template does nothing when clicked

Errors thrown inside an onClick handler can't be caught the way render errors are, so the click is simply lost. Check the browser console for the error, and make sure the handler only calls functions listed in The five templates — for example onClick={() => props.onAddToKit()}.

The add button lets shoppers add too many items

You're not using props.isAddButtonDisabled on your button. Always pass it: disabled={props.isAddButtonDisabled}.

Looks right in the preview but wrong on the storefront

The preview renders inside the admin, where the surrounding page is narrower than most storefronts. Check your CSS for fixed widths, and prefer the --foxr-bb-* variables and percentage widths over hard-coded pixels. See CSS variables and styling.

I want to go back

Turn the template's switch off and save — the built-in design returns immediately, and your code stays in the editor for later. Reset to default is the only action that throws the code away.

---

FAQ

Do I need to customize all five templates? No. Each is independent; anything you leave off keeps the built-in design.

Will my template break my store if I make a mistake? No. A compile error is never published, and a published template that fails at runtime reverts that piece to the built-in design. The worst case is your styling doesn't appear — never a broken or empty page.

Can I add my own analytics or tracking to a button? No. Every handler in props already records analytics. Don't attempt to add your own tracking.

Can I copy a template between bundle builders? Yes — copy the code out of the editor and paste it into the other builder's editor, then compile and save there.

Can support help me write or debug my template? No — this is a developer feature. Support can help with everything else in the app, but writing and debugging custom JSX is outside what they cover.