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.

A custom page replaces the theme page completely

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.

Global sections — edit once, appears everywhere

The Header & Footer template is not just for the header and footer. Any section you place on it appears on every page of your store — a trust bar, a newsletter signup, a floating WhatsApp button. Edit it there once and every page updates.

Two controls make global sections precise:

• Global placement (in the section's Design panel, under Advanced) — choose whether the section renders above each page's content or below it, next to the footer. The default is sensible: footers go below, everything else above.
• Conditional visibility (see Design controls) — the Only on pages and Only on collections settings let a global section appear on just some pages, e.g. a shipping banner on product and cart pages only.

Sections you can add

The palette on the left groups everything available. Broadly:

• Layout & content — Rich Text, Image with text, Columns, Bento Grid, 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, Timeline, Comparison Table, 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.

Newer sections worth knowing

• Bento Grid — a flexible mosaic where each tile can span multiple columns and rows. Tiles take a background image or colour, a title and text, and can be made clickable as a whole — great for editorial layouts, promo tiles and category mosaics.
• Timeline — your brand story as milestones along a vertical line. Each milestone has a date, title, text and optional image; cards alternate sides on desktop and stack on mobile.
• Comparison Table — compare your product against alternatives, up to four columns. Type "yes" or "no" in a cell and it renders as a tick or a cross, and you can highlight your own column.

"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.

nota

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.

The right panel has a third tab, Theme, which edits your store-wide styles — colours, fonts, buttons and inputs that every page inherits. Those are covered in Design & Themes.

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.

Three things apply to almost every section:

• Blank colour means "use my theme's colour." Cleared swatches show as dashed — that's not an error.
• Show heading — every section with a heading has a toggle to hide it without deleting the text, so you can turn it back on later.
• Design controls at the bottom of every section — see below.

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.

Design controls on every section

Every section — header and footer included — has the same Design panel at the bottom of its settings. It's organised into groups:

• Background — a colour, a gradient, or an image with an optional parallax effect and a tinted overlay to keep text readable, plus a text colour. A colour scheme picker applies a whole named palette from the Theme tab in one pick.
• Motion (reveal on scroll) — the section animates in the first time it scrolls into view: fade, slide, zoom, flip, blur or wipe, with a duration slider. Stagger cards makes items in grid sections cascade in one after another. Animations automatically respect visitors who prefer reduced motion.
• Padding and margin — space inside and outside the section, each side separately, with independent mobile and tablet values.
• Visibility — see the next heading.
• Effects — opacity, rotate, scale, offsets, a frosted-glass backdrop blur, and a hover effect (lift, scale up or glow) when the pointer is over the section.
• Advanced — content width, borders, corner radius, drop shadow styles, minimum height, sticky-to-top behaviour and layering.
• Custom code — see Custom code on a section.

A handful of simple sections (Divider, Button, Spacer) show a trimmed-down panel, because most of these controls wouldn't do anything useful there.

Visibility — including conditional visibility

Beyond the familiar Hide on mobile / Hide on tablet / Hide on desktop toggles, every section can decide who sees it and when:

• Show to — everyone, signed-in customers only, or signed-out visitors only. Perfect for members-only content, or a "create an account" pitch that disappears once they do.
• Show from / Show until — start and end dates, so you can schedule a sale banner ahead of time and have it retire itself.
• Only on pages / Only on collections — restrict a section to certain page types or certain collections. Mainly useful for global sections on the Header & Footer template.

Conditionally hidden sections are removed before the page is sent to the shopper — they aren't just visually hidden.

Custom code on a section

At the bottom of every section's Design panel:

• Custom CSS — styles scoped to that one section. Target anything inside it; it cannot affect the rest of the page.
• Custom HTML — before / after content — your own HTML rendered just above or just below the section's content, inside the section box. It's sanitised for safety, and you can style it with the Custom CSS above.

This works on every section, header and footer included — so you can add a small custom touch without reaching for the store-wide Custom CSS editor.

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.

Publishing keeps your current Live setting

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.

precaución

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.

Restoring overwrites your current draft

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.

Global means global

A broken selector here can break every page of your store, including checkout. Test carefully.

For styling one section only, use the Custom CSS field in that section's Design panel instead (under Custom code). 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.js won'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.