Sales Channels > Online Store > Theme Editor
Open in TWICE Admin
online-store/themes
Prerequisites
Before you start, understand one thing:Saving publishes. There is no draft, no publish step and no theme library — your account has exactly one storefront configuration and the editor edits it in place. Anything you save is live for customers immediately. Plan the work into sittings you can finish rather than leaving a half-changed design saved.
The walkthrough
1
Open the editor and accept that saving is publishing
From Online Store → Themes, the single card shows desktop and mobile previews and your storefront URL. Edit opens the editor.There is no theme to pick and nothing to duplicate — one configuration, edited directly. The consequence is the whole shape of this guide: you cannot stage a redesign and release it in one go, so work top-down and save at points where the storefront is coherent.
If you close the editor with unsaved changes, a dialog offers Save changes or Discard. Discard is the only undo — there is no version history to roll back to.
2
Set the global design tokens first, in Theme mode
Theme mode holds the settings that apply storewide. Do these before touching any page, because they change how every page already looks:
3
Settle the tokens before you tune a page
Getting these right first is what stops you re-tuning a home page twice. A colour change late in the process silently re-renders every page and every card on it.
4
Tune the components customers see on every page
With the tokens set, move to the component panels. In rough order of how much a customer sees them:
- Listings card and Collection card — the repeated units that make up most of a storefront.
- Header bar and Search bar — on every page.
5
Tune the booking panels, then the finishing pass
- Calendar and Availability indicator — where a booking is actually made, so worth more attention than their size suggests.
- Announcement bar, Breadcrumbs, Variant pills, Filter section — the finishing pass.
6
Know which brand assets are not set here
Two things people hunt for in the editor and do not find:
- The logo image is set in Settings → General, not in the theme editor. The editor’s Logo panel controls how the logo is displayed — width and placement — and says so, pointing you to Settings → General to change the file itself.
- The favicon is in the editor, on the same Logo panel, displayed at 32 × 32 px.
7
Trace an unexpected colour to this editor
Account-level branding settings exist separately from the storefront theme. The storefront’s appearance is resolved from the theme settings you edit here, so if a colour is not what you expected, it came from this editor or from the theme’s own default — not from an account branding field.
8
Preview across viewports before you save, not after
The editor previews desktop, tablet and mobile. Because saving is publishing, the preview is your only pre-flight — use all three.Mobile is where storefront designs break, and it is where most customers are. Check the header, the listing card grid, and the calendar at mobile width specifically; those three carry the most layout risk.
9
Reach for Custom CSS only when the panels genuinely cannot do it
Custom CSS is the escape hatch for what the visual editor does not expose.Treat it as a last resort rather than a shortcut. CSS written against the current markup is the part of your storefront most likely to break silently when the storefront updates, and nothing will warn you — a panel setting will not.
How do I know it worked?
- The storefront matches the editor’s preview, at desktop and at mobile width.
- Nothing looks half-finished to a customer, because you saved at coherent points rather than mid-change.
- A colour or font change shows up everywhere it should — cards, header, calendar — rather than only on the page you were looking at.
- Your logo is right, which means you set it in Settings → General.
Troubleshooting / common pitfalls
I saved and want to undo it
I saved and want to undo it
There is no version history and no draft to fall back to. Discard only works before saving.What to do: change the settings back by hand. This is the reason to work top-down and save at coherent points — and the reason to note what a value was before you change it, on anything you are unsure about.
I cannot find where to upload the logo
I cannot find where to upload the logo
It is not in the theme editor. The Logo panel controls display width and placement, and points you at Settings → General for the image itself.What to do: set the file in Settings → General, then come back to the editor to size and place it.
I changed the palette and the pages I had already styled look wrong
I changed the palette and the pages I had already styled look wrong
Expected — that is the order problem this guide exists to prevent. Theme tokens apply storewide and re-render every page.What to do: finish the global tokens before per-page work. If you are already past that, re-check the pages you tuned early rather than assuming they survived.
My custom CSS stopped working
My custom CSS stopped working
Cause: CSS written against storefront markup is not a supported interface, and storefront updates can change it.What to do: check whether a theme panel now does what your CSS was doing, and prefer the panel. Keep custom CSS minimal for exactly this reason.
Someone else edited the storefront at the same time
Someone else edited the storefront at the same time
There is nothing stopping two people editing — no drafts means no branching, and the last save wins.What to do: agree who is working in the editor before a redesign. On a live storefront this matters more than it sounds, because both people are publishing as they go.
Related articles
Build pages and navigation
The per-page work that follows the global design.
Theme Editor
Every mode and panel in full.
Set up the online store
The launch sequence this design work sits inside.
Shape the storefront
The launch step this guide sits inside.
Custom CSS
The escape hatch, and its costs.