Custom templates
Replace a built-in section of the cart drawer, a product page offer or a product list with your own JSX code.
A custom template is a piece of JSX (React markup) that replaces the built-in layout of one section. Oxify gives your code the section's data as props, and your code decides how it looks.
For developers
Oxify labels every editor Technical skills required. The app states: "our support team cannot assist with custom template development or debugging." A template is JavaScript that runs in your shoppers' browsers, so only use code you wrote or trust.
Where templates are available
Each editor is a card named Custom template, at the bottom of its screen.
| Where | Editor tabs |
|---|---|
| Cart Editor, Design | Header, Footer |
| Cart Editor, Cart Items | Skeleton, Product tile, Variant, Properties, Price, Volume tiers |
| Cart Editor, Announcements | Main, Skeleton |
| Cart Editor, Rewards | Full, Skeleton, Rewards to be achieved, Pick Free Gift, and Added Free Gifts (only when Position of Free Gift Items is Top of Cart or Bottom of Cart) |
| Cart Editor, Upsells (and each extra upsell widget) | Custom template, Bottom sheet |
| Cart Editor, Upsells with Discount | Custom template, Bottom sheet |
| Cart Editor, Add Ons | Add-ons, Loading skeleton |
| Cart Editor, Additional Notes | Notes |
| Cart Editor, Split Payments | Split payments |
| Cart Editor, Discount Codes | Basic input, Advanced banner, Advanced sheet |
| Cart Editor, Trust Badges | Trust badges |
| Cart Editor, Empty Cart | Empty state, Recommendations |
| Product Page Upsell offer, Design tab | One template for the offer's type and layout |
| Product List Widget, Design tab | Custom template |
The Volume Discount, Subscription Upgrades, Custom HTML & CSS, Express Checkout, Integrations and Settings sections of the Cart Editor have no template editor.
Turn the editors on
In the Oxify app, open Settings and find the Custom templates section (badge: Technical knowledge required).
Tick Enable custom template editors and click Save.
Open the Cart Editor. The Custom template card now shows in the sections above.
This setting only controls whether the Cart Editor shows the cart drawer editors. The Product Page Upsell and Product List Widget editors are always shown. The setting's help text says: "Already-active templates on your storefront keep running even if you turn this off."
What to read next
- Use the template editor: the switch, Compile, Format, saving, and what happens on errors.
- Props reference: cart header, footer, items and rewards, upsells and cart extras, product page offers and product lists.
- Template examples and Troubleshooting.
For plain styling changes, use custom CSS or custom HTML and CSS injection instead.