A chat widget that looks like the rest of your shop — slot templates are live
A chat widget that looks like the rest of your shop
About a month ago we met with a large Dutch publisher. Two of their titles run e-commerce shops with very strong visual identities. A red price split into two sizes (large whole part, smaller cents slightly raised). A yellow tag in the upper-left corner of the product card with the advice price and the actual price stacked next to each other. An orange arrow as the call-to-action. A click on the card or the arrow was meant to open the product details in a modal, not redirect to the shop page. Many of those elements had to look completely different from the standard Upsellic widget.
At the time, the entire Upsellic theme configuration boiled down to four colors. We said it plainly: we can't deliver this without rebuilding the system.
We did.
What slot templates are
Each Upsellic widget theme now consists of 15 independent templates. Every template is a fragment of code in Nunjucks — a language similar to Twig, Handlebars or Jinja. One central CSS file ties everything together. Together they render everything the visitor sees: product cards inside the assistant's messages, conversation bubbles, the product detail modal, the conversation rating modal, the widget header, the footer, and the promo banner.
You can rewrite all of them from scratch. You have full control over the HTML structure, CSS classes, the order of elements, and the entire layout. The only things that stay untouched are the variable names — product.title, theme.primaryColour, phrases.viewProduct — which the backend automatically wires to the right data. You don't need to memorize them; the system template you start from already uses every variable that's available. You copy, edit, and check the result.
What changes day-to-day
Suppose you're rolling out the widget on a cosmetics shop. The product page has a minimalist layout — lots of white space, the price as a single clean number, a black "Add to cart" button. The default Upsellic widget has product cards with a gradient, soft shadows, and a purple CTA — looks pleasant, but doesn't fit the rest of the page.
Instead of emailing us for help, you clone a system theme, open the template editor, pick the PRODUCT_CARD slot, drop the gradient, reduce the shadow, change the button to a black rectangle. On the right side of the panel a live preview keeps re-rendering with sample data — you immediately see how the card looks both standalone and with the AI's recommendation reasoning written underneath the title.
Every keystroke goes into a draft. The draft never leaves your panel — the production widget keeps serving whatever you last published. You can work on a slot for an hour, leave a half-baked sketch for a week, come back tomorrow morning and continue. Customers see nothing until you click Publish.
That's a deliberate design decision, not a technical detail. We've seen merchants too scared to touch anything in production because every change goes live instantly. Here it's the other way around — experimenting costs nothing, and the last step (publishing) takes one conscious click.
Compare with source — what actually changed
After an hour of editing it's easy to forget what was changed. Next to every slot there's a Compare with source button that switches the editor into side-by-side diff mode: original system template on the left, your version on the right. Every difference is highlighted line by line.
There's no commit-log style history — this isn't Git. This view is enough in practice: you see what was added, what was removed, and you can either keep the changes or revert them via Reset (restores the slot to the system version) or Discard draft (rolls back to whatever is currently published).
Export and import — themes are portable
Every custom theme can be exported to a single JSON file. Colors, all 15 slots, including drafts and published. The file is named with the export date, e.g. MyTheme.2026-05-01T12-34-56.theme.json.
Why bother? Three concrete situations.
First: an agency designs the theme on a staging account, exports it, the client imports it on their production account. No copy-pasting slot by slot.
Second: you want to roll back. Got an export from two weeks ago? Import it back — and here's the important detail — import never overwrites an existing theme. It creates a new theme with (import 2026-05-01 14:22:08) appended to the name. The old theme, the one currently live, stays untouched. To roll back, you just point the widget settings at the imported theme. If it turns out the newer version was actually better — switch back to the previous theme with one click.
Third: serious A/B tests. Import variant B as a separate theme, hook it up to a second widget on the same site (e.g. for 50% of traffic), collect data for a week, decide which theme works better.
Inside the editor
The template editor is Monaco — the same engine that powers VS Code. Syntax highlighting for HTML and Nunjucks in slot templates, CSS in the STYLES slot. Multi-cursor, find & replace, bracket matching, line numbers, and a full set of keyboard shortcuts.
On the right there's the live preview that automatically refreshes every time the draft changes. It uses sample data — a product, a content article, an order, and conversation bubbles that mirror what a real assistant chat looks like. Click on a product card in the preview — the modal you just edited opens. Click X in the upper-right corner — the modal closes.
The toolbar also has a Clear widget cache button. Use it when you want to force a rebuild on production without changing any template.
System themes are read-only — and why that's the right call
The three system themes — default, minimal, editorial — are marked read-only. To change anything you have to clone first. That's deliberate.
Reason: when we ship updates (add a new element, fix a visual regression in some browser), the changes only land in the system themes. Your cloned theme stays exactly as you left it. There's no scenario where you wake up, open the shop, and the widget suddenly looks different.
If you want to see what changed in the system version — the "Compare with source" button always shows the current system template next to yours. If you decide that the new system version contains a useful element you'd like to pick up, you copy it manually into your own theme. Without the risk of our changes overwriting your customizations.
Who this is for
If your shop has a strong visual identity and you've been making do with four colors from the configurator — this is for you. If you run a shop on a standard theme and want the AI assistant to sit next to products as if it were part of the layout, not a stuck-on third-party widget — this is also for you.
If your visitors can't tell the widget apart from the rest of the page, well done — your conversion on AI-driven recommendations just went up. Whatever the assistant shows them, it first has to be noticed and treated as a credible interlocutor.
How to start
The editor is available on every account under Themes → pick a theme → Code editor. The first step is cloning one of the system themes — you immediately get a name and all 15 slots pre-filled with system content. From there it's just edit, preview, publish.
The full step-by-step walkthrough — every button, every screenshot, the export and import process — lives in a separate guide: