Use the template editor

Edit, compile, switch on and save a custom template, and what happens when the code has an error.

Edit and switch on a template

Open the section's screen (for example Cart Editor, Announcements) and scroll to the Custom template card. If it has several tabs, click the one you want. A green dot on a tab means that template is Active.

The code box shows Oxify's starter code for that tab (the seed) until you change it. Edit it. The box is a code editor with line numbers; autocomplete is off.

Click Compile. The message Successfully compiled appears, or Compile error: followed by the reason.

Turn on the switch. The badge changes from Inactive to Active and the message reads "Template activated — compiled from current editor code". If the code does not compile, the switch stays off and you see the error.

Save in the Cart Editor (or the offer or widget editor) like any other change. A successful cart save shows Cart Saved Successfully.

Typing only changes the code you see. What shoppers get is the compiled result, so click Compile after every edit. The switch also recompiles when you turn it on.

The controls

Control	What it does
Switch + Active / Inactive badge	Turns the template for the current tab on or off. Turning it off keeps your code.
Compile	Converts your code and stores the result. Shows the error if the code is invalid.
Format	Tidies the code (Prettier, 80 columns, 2-space indent). It does not compile. Shows Format error: if the code cannot be parsed.
Reset to default template (icon, hover for the tooltip)	Puts the starter code back in the box. It does not compile and does not switch anything off. Click Compile to apply it.
Generate from current settings (icon)	Only on tabs that offer it: Cart Items Product tile and Price, Rewards Full, Upsells Custom template, Upsells with Discount Custom template, and the Product Page Upsell and Product List Widget editors. Writes code that matches the section's current built-in style and compiles it ("Generated and compiled from current settings"). It does not change the switch.
Read more / Show less	Under the code box: a one-line summary of the tab and a list of prop names.
documentation link	Opens Oxify's help article for custom templates.

What your code can be

Oxify wraps your code as (props) => ( YOUR CODE ). So:

Write one JSX expression, with a single root element or a fragment <>...</>.
Read data from props, for example props.title.
Do not write import, export, function declarations or several statements at the top level.
Inside the expression you can use normal JavaScript, such as props.items.map(...) and ternaries.
React is available. Nothing else is passed in.

What shoppers see

A template only runs when its switch is Active and it has compiled code. Otherwise the built-in layout shows.
Only compiled code of Active templates is sent to the storefront; the editable source is not.
Templates also run inside the Cart Editor preview.
If an Active template throws an error while rendering, that section shows nothing (it does not fall back to the built-in layout). It tries again when its data or code changes.
If the compiled code cannot be built into a component, the section also shows nothing.
Some templates show nothing when there is nothing to show (for example Upsells with no products).

Section-specific rules

Upsells, Upsells with Discount: the Bottom sheet tab replaces only the variant picker's content. Oxify keeps the overlay.
Discount Codes: Advanced sheet replaces only the sheet's content. Which tabs apply depends on whether you use the basic code input or the advanced coupons banner.
Rewards: with a Full template active, the reward-achieved actions (confetti, adding gifts, analytics) still run. The Added Free Gifts tab appears only when Position of Free Gift Items is Top of Cart or Bottom of Cart; otherwise the card shows: "Set "Position of Free Gift Items" to Top of Cart or Bottom of Cart (Rewards → General settings) to enable the Added Free Gifts template."
Empty Cart: your custom HTML for the empty cart screen still shows before the Empty state template. Recommendations only show if that option is on and there are products.
Product Page Upsell: each combination of offer type and layout has its own saved template. Changing the offer type or layout switches which one you edit. A Custom Templates button opens a Template library; choose a card and click Use template to compile and switch it on (if you edited by hand you are asked Replace your edited template?). The library can be empty: "No templates for this offer type yet."
Product List Widgets: the same Custom Templates button and library, plus one Custom template tab. If the editor warns Approaching the size limit, switch off unused custom templates.

Every prop is listed in the props reference pages.