What are custom templates?
Replace a built-in Bundle Builder template with your own JSX markup — for merchants comfortable with React.
Custom templates are the deepest level of customization the Bundle Builder offers. You write the markup for a piece of the builder; the app keeps handling products, prices, the cart, and analytics underneath it.
Who this is for
This feature is for people comfortable with React/JSX. If you only want to change colors, sizes, or text, use the normal Design tab settings instead — you don't need this. If you only want to restyle the built-in templates, use Custom CSS. Our support team can help with everything else in the app, but can't write or debug your custom templates.
The idea in one paragraph
The Bundle Builder does all the work: it loads products, resolves prices for the shopper's market, formats money, tracks what's in the kit, adds to the cart, and records analytics. It then hands your template a single bag of ready-to-use values and functions — props. Your template only decides how it looks. You never fetch data, hold state, or touch the cart directly, which is also why a broken template is harmless: if it fails to compile, nothing is published; if it fails while a shopper is looking at it, the app quietly falls back to the built-in design and your store keeps working.
The five templates
You can customize any combination of five pieces. Each is independent — customize one and leave the rest on the built-in design.
| Template | Replaces | Root class |
|---|---|---|
| Full layout | The whole arrangement — where the tabs, category title, product grid, and sidebar sit relative to each other. | foxr-bundle-builder-layout |
| Product card | One card in the products grid, rendered once per product. | foxr-bb-product-card |
| Category tabs | The category switcher above the grid. | foxr-bb-tabs |
| Sidebar | The kit summary and add-to-cart panel. | foxr-bb-kit-sidebar |
| Toast | The "added to bundle" confirmation message. | foxr-bb-toast |
Full layout is different from the other four — it doesn't replace one element, it replaces the arrangement of all of them. If you just want to move the sidebar above the grid instead of beside it, that's the one you need. It has its own guide; the other four are covered in The five templates.
Two more, on a product page builder
A product page builder shows two additional tabs on this card: Product slot (one slot tile in the Product slots template) and Add to Cart bar (the footer). Everything else on this page and The rules applies the same way to those.
Where to find it
Open your bundle builder and go to the Design tab.
Find the Custom design template card.
It's off by default — nothing about your builder changes until you turn it on.