Custom code (Scale plan)
If one of the built-in widget formats doesn't match your brand or layout, the Scale plan lets you swap its HTML, CSS, or JavaScript for your own. You write the markup; Valotrix Cart Rewards's engine keeps wiring up the data and the cart events behind it.
Where to find it
Open any campaign's Messaging tab → pick a widget format → switch to the Custom Code sub-tab. Each format (Toast, Promo popup, Progress bar, Gift choice, Reminder) has its own panes for HTML, CSS, and JavaScript. There's a Load default template button so you can start from the built-in design and modify from there.
What you can edit
Three independent fields per widget:
- HTML. Replace the entire widget markup. Valotrix Cart Rewards substitutes a handful of placeholder tokens (see below) just before rendering, so dynamic values like the customer's current cart subtotal or the gift product's title appear in the right spots.
- CSS. Custom styles applied alongside (and overriding) the built-in stylesheet. The engine also exposes a set of CSS custom properties (variables) so you can read live theme values like the accent color, body font, or border radius without hard-coding them.
- JavaScript. Optional. Runs once after the widget is rendered. Useful for small DOM tweaks, animations, or analytics pings - most stores never need to touch it.
Placeholder tokens you can use in the HTML
The token set depends on which widget format you're editing. The most common ones:
{{product_title}}- gift product title{{remaining}}- amount the customer still needs to spend to qualify (currency-formatted){{threshold}}- the campaign's total spend threshold (currency-formatted){{current}}- current cart subtotal{{gift_count}}- number of gifts the customer would receive{{campaign_name}}/{{rule_name}}- internal names from the editor- For the Gift choice widget, a per-gift
{{title}}/{{image_url}}/{{variant_id}}/{{price}}set is interpolated once per gift inside an Item HTML field.
The widget editor lists every available token for the format you're editing (with descriptions) in a collapsible reference panel right above the HTML pane - open it any time you forget which tokens apply to which widget.
CSS custom properties you can reference
Use these inside your CSS pane instead of hard-coded colors / sizes - they pick up the live theme settings the customer chose for the campaign:
--vltrx-bg- widget background color--vltrx-text- primary text color--vltrx-accent- accent / call-to-action color (with--vltrx-accent-hoverand--vltrx-accent-activefor interaction states)--vltrx-border- border color--vltrx-radius- border-radius in px--vltrx-font- configured font family--vltrx-heading-size/--vltrx-body-size/--vltrx-button-size- text sizes
Example:
.my-toast-card {
background: var(--vltrx-bg);
color: var(--vltrx-text);
border-radius: var(--vltrx-radius);
font-family: var(--vltrx-font);
}
.my-toast-card .cta {
background: var(--vltrx-accent);
}
.my-toast-card .cta:hover {
background: var(--vltrx-accent-hover);
}
Engine DOM selectors
If you'd rather override the default layout for a specific element instead of replacing the HTML, the engine renders predictable IDs and classes you can target from your CSS pane. The reference panel inside the editor lists them per widget - e.g. #vltrx-toast-container, .vltrx-promo__cta, .vltrx-progress-fill, etc.
Plan-tier gating
Custom code is a Scale-plan-only feature. On Free / Growth / Pro, the Custom Code sub-tab in the widget editor is shown as locked with an upgrade prompt, and any custom HTML/CSS/JS you previously saved is ignored at render time until you re-upgrade.
When to use it
- Your brand has very specific visual standards (specific motion, specific typographic system, specific micro-interactions) that the built-in formats don't capture.
- You want to integrate Valotrix Cart Rewards's widget into a custom storefront component (e.g. fold the progress bar into a hero banner).
- You're A/B testing a creative variant that the built-in editor can't express.
For most stores, the built-in formats with their per-template customization options are enough. Reach for custom code when you've outgrown them.