Theme Editor
Build your storefront pages visually — drag sections into place, change their settings, preview on desktop and mobile, and publish when you're happy.
Open Design → Theme Editor.
This is different from Design → Appearance, which sets store-wide colours and basics. The Theme Editor rebuilds the layout of individual pages.
How it works
Three ideas:
- Page template — one page type on your store: Home, Product, Cart, Checkout and so on. You design each one separately.
- Section — a horizontal band on the page: a hero banner, a product grid, a FAQ list. Pages are stacks of sections.
- Block — a repeatable item inside a section: one nav link, one testimonial, one FAQ question.
When your custom design is live, shoppers see only your sections for that page — it is not blended with your theme's built-in page. An empty published page renders empty. Design the whole page, not just the part you want to change.
Which pages you can design
Main — Home, and Header & Footer (your store-wide chrome).
Shop — All collections, Collection, Search / all products, Product, Cart, Checkout.
Content — About, FAQ, Blog list, Blog post, Contact.
Account — Orders, Order detail, Track order, Wishlist, My account, Addresses.
Sign in — Login, Signup, Password reset, Verify.
Legal & system — Privacy, Terms, Refund policy, Return policy, Help centre, 404.
Plus two extras:
- New pages — click + New page to create your own page, served at
/page/your-slug. Deleting a custom page removes it and its history permanently. - Per-collection designs — give one collection its own design instead of the shared Collection template. Copy shared design gives you a starting point, and deleting the override returns that collection to the shared design.
Sections you can add
The palette on the left groups everything available. Broadly:
- Layout & content — Rich Text, Image with text, Columns, Image Banner, Image Gallery, Video, Divider, Spacer, Button
- Selling — Featured Products, Product Grid by collection, Collection List, Product Rail, Shoppable Image with hotspots, Product Recommendations
- Persuasion — Testimonials, FAQ, Logo List, Stats, Feature Grid, Countdown Timer, Call To Action, Before/After slider, Ticker
- Capture — Contact form, Newsletter Signup, Floating Button for WhatsApp or calls
- Developer — Custom HTML and Custom Liquid
Header, Footer and Announcement Bar only appear on the Header & Footer template, because they apply store-wide.
"Theme default" versus "customizable"
For pages like Cart, Checkout, Product and the account pages you'll see two versions of the same section — for example Checkout (form + payment) and Customizable Checkout.
- The theme default one drops in your theme's existing page, unchanged. It's the safe choice.
- The customizable one lets you restyle and rearrange the parts.
Use one or the other, never both. The editor warns you when a section can only be added once.
Customizable login, signup and checkout sections submit to exactly the same secure routes as the originals. Restyling them does not weaken CSRF protection, anti-bot checks, rate limits or payment handling.
Editing
From the Components list on the right:
- Drag a row to reorder sections
- Eye icon hides a section without deleting it
- Copy icon duplicates it directly below
- Trash icon deletes it — or press Delete with a section selected
- Rename a section in Properties so the list reads the way you think
You can also click any section directly in the preview to select it.
Undo and redo are in the toolbar, or ⌘Z / ⌘⇧Z. Two limits: history holds 60 steps, and it is cleared when you switch to a different template.
Section settings
Select a section and open Properties. Depending on the section you'll meet text boxes, image pickers, colour swatches, sliders, switches, dropdowns, alignment buttons, collection pickers, date pickers and code boxes.
Two things apply to almost every section:
- Blank colour means "use my theme's colour." Cleared swatches show as dashed — that's not an error.
- Design controls at the bottom of every section: background colour or image, text colour, scroll animations, padding and margin (with separate mobile values), content width, borders, shadow, minimum height, and Hide on mobile / Hide on desktop.
When the preview is switched to Mobile, settings that have a separate mobile value show that value instead — so you edit mobile spacing and sizes where you can see them.
Preview
The centre pane is your live storefront rendering your draft.
- Desktop / Mobile toggle frames the preview at phone width.
- Open in new tab opens the preview full size.
- The badge over the canvas tells you the truth about what you're looking at: green Live · customers see this, or amber Draft · not live yet.
The preview updates as you type — you don't need to save to see changes. What it shows is your draft, not what shoppers currently see.
Draft, Publish, and the Live switch
These are three separate things and mixing them up is the most common source of confusion.
| What it does | |
|---|---|
| Save draft | Stores your work privately. Autosaves about a second after you stop editing, or press ⌘S. Shoppers never see a draft. |
| Publish | Promotes the draft to the live version of that page. |
| Live switch | The master on/off for custom designs across your whole store. |
An amber dot on the Publish button means you have unpublished changes.
If the Live switch is off, publishing does not turn it on — you'll see "Published (currently OFF — turn Live on to show it)". The very first page you ever publish turns Live on by default.
The Live switch applies to every published page at once — turn it off and your whole store falls back to your theme. Nothing is deleted; it's a reversible kill switch. You cannot enable it before publishing something.
If you also have a Custom Homepage enabled (the separate code editor), turning the Live switch off can bring that custom homepage back on your home page rather than your theme's home page. Disable the Custom Homepage too if you want the plain theme.
Version history
Click the History icon.
- The last 20 published versions of each template are kept.
- A snapshot is taken only when you publish, capturing what was live before. Drafts are never snapshotted.
- Restore puts that version back into your draft, not straight onto your store. Review it, then publish.
Unpublished work in the draft is lost when you restore, and it was never snapshotted. Publish or copy anything you want to keep first.
Custom CSS
The Custom CSS button in the toolbar opens a code editor for CSS that applies to your entire store — every page, every theme, including checkout.
It warns you about unbalanced braces and flags unsaved changes, but there is no preview before saving and no way to limit its scope.
A broken selector here can break every page of your store, including checkout. Test carefully.
For styling one section only, use the Advanced (custom CSS) field inside that section's settings instead. It's scoped to that section and can't affect the rest of the page.
Custom Homepage — the other editor
Design → Custom Homepage is a completely different tool: a code editor with a file tree, for hand-writing your home page in HTML, CSS and JavaScript. It has no sections, no settings panels, no draft, no version history — just files and an Enable switch. Uploads are limited to 10 MB per file, and saving is immediately live.
Which one wins
If you publish a Home design in the Theme Editor and Live is on, that wins. Your custom homepage is ignored, even though its own page still says "Enabled".
Two consequences:
- Turning the Live switch off brings the custom homepage back, not your theme.
- When a custom homepage does render, its JavaScript does not run — scripts are stripped for security. Anything relying on
script.jswon't work.
If you're moving from the custom homepage to the Theme Editor, treat the switch as one-way and delete the old files once you're happy.
When shoppers see your changes
Publishing clears your storefront caches automatically, and changes normally appear within seconds.
If a cache refresh is missed somewhere, timing differs:
- A page published for the first time appears within about a minute.
- A page that was already live can take up to 30 minutes in the worst case.
To force it, use the Clear Cache tool in your dashboard, or add ?clearcache=1 to a storefront URL to check the fresh version yourself.
Common questions
I published but shoppers still see the old page. Check the Live switch is on — publishing alone doesn't enable it if it was off. Then allow a few minutes, or clear the cache.
My page is blank on the storefront. A published, live page with no sections renders empty. Custom designs replace the theme page rather than adding to it.
My changes vanished when I switched pages. Drafts autosave, so the work is saved — but the undo history is cleared when you change template. You can't undo your way back across a template switch.
Can I preview without customers seeing it? Yes — that's exactly what a draft is. The preview shows your draft; shoppers see the published version.
Should I use the theme default or the customizable section? Start with the theme default. Move to the customizable version only when you need to change the arrangement, and never add both to the same page.
I restored an old version but the store didn't change. Restore only fills your draft. Publish it to make it live.
Is my checkout still secure if I restyle it? Yes. The customizable sections post to the same secure routes with the same protections. Only the appearance changes.