Themes & the visual editor

Your storefront is built from a theme: a bundle of templates, sections, blocks, and global settings that controls how every page looks. You edit a theme in the visual editor — a live preview with a drag-and-drop sidebar — and changes only reach customers when you Publish.

Open Online store → Themes to see your theme library, then Customize on the current theme to launch the editor.

Note

Your logo, favicon, and brand colors are not part of the theme — they live under Settings → General → Brand. Themes reference those brand assets, so updating them there flows through to your storefront without re-editing the theme.

How the editor works

The editor has three zones:

• Left sidebar — the page tree. Every page is made of sections (hero, product grid, image banner, FAQ…) and blocks inside them. The tree is grouped into the Template (the body of the current page) and section groups like the header and footer that repeat across pages.
• Center — a live preview. Click anything to select it; the matching tree row highlights, and its settings open on the right.
• Right sidebar — the inspector. Edit the selected section’s or block’s settings, or open Theme Settings (top of the left sidebar) for global controls.

You can also double-click editable text directly on the canvas to edit it inline when the text maps to exactly one text setting.

Top bar tools

• Save / Publish — Save stores your draft; Publish ships it (see below).
• Undo / Redo — Ctrl/Cmd + Z and Ctrl/Cmd + Shift + Z.
• Responsive preview — switch the canvas between Mobile (375px), Tablet (768px), and Desktop.
• Inspector — toggles on-canvas outlines so you can see and click every section and block boundary.
• Reload preview / Reload editor state — refresh the iframe, or re-fetch the latest saved draft (this discards local edits).
• A Saved / Unsaved badge always shows whether the draft has pending changes.

Use the template picker in the top bar to jump between page types — Home page, Products, Collections, Pages, Cart, Search, 404, and Customers — so you edit the right template.

Editing sections and blocks

1. In the left sidebar, expand the Template or a section group to see its sections.

2. Click a section to select it and open its settings. Expand it to see its blocks; click a block to edit it.

3. Reorder by dragging the grip handle, or use the up/down arrows on a block.

4. Add with the Add section button (or Add section above/below in a section’s menu) and the + on a section to add a block. The picker only offers section and block types the theme allows in that spot.

5. Rename, Duplicate, or Copy/Paste sections and blocks from the actions menu (the chevron button on each row) — handy for repeating a layout. Sections offer Rename and Duplicate; blocks add Copy, Paste, and a quick Move up / Move down.

Hide vs. remove

Each section and block has an eye icon to hide it. A hidden item stays in the theme (dimmed in the tree) and renders nothing until you show it again — use this to temporarily turn a section off without losing its settings.

Remove section / Delete block takes the item out of the layout. Removed sections are not gone immediately: they collect in a Removed sections panel at the bottom of that template or group, where you can Restore them (settings intact) until you save. Forget discards a removed section for good — and even that only affects the theme files once you save.

Locked sections

Some sections show a lock icon and can’t be removed or duplicated. These are edit-only building blocks the theme provides with no add presets — you can still change their settings, just not delete them or add new copies. Static blocks (also locked) are fixed parts of a section and can’t be moved or deleted.

Header and footer (section groups)

The header and footer are section groups that render on every page, not part of a single template. They appear as their own panels in the left sidebar. Edit them once and the change applies storefront-wide.

Saving and publishing

Editing changes a draft. The draft is private until you publish, so you can experiment freely.

1. Make your changes — the badge flips to Unsaved.

2. Press Save to store the draft. The badge returns to Saved.

3. Press Publish. This creates a new live version from your saved draft and makes it the live theme.

Caution

Publish ships only the saved draft. If you press Publish with unsaved canvas changes, the editor prompts you to Save and publish first — otherwise those edits would be left out of the live version. Always Save, confirm the badge says Saved, then Publish.

Avoiding conflicts in two tabs

If the same draft is changed somewhere else (another tab or a teammate) after you opened the editor, you’ll see a “This draft was updated elsewhere” banner. If your Save is then rejected, a Draft changed elsewhere dialog appears: choose Reload latest to load the newer draft (this discards your local edits), or Keep editing to copy your changes out before reloading. Editing the same draft in two tabs at once is the usual cause — finish in one.

The theme library

The Themes page lists your active theme plus an unpublished library. Use Add theme (top right) for three options:

• Browse public themes — try a free public theme; it’s added to your library as a draft and opens in the editor.
• Upload zip file — import a theme .zip. See Import a theme ZIP.
• Create blank theme — start from an empty theme.

On a library theme, Customize opens the editor, Preview opens it in a new tab without going live, and Publish activates it — making it the storefront’s live theme. The active theme carries a green Live badge; library themes are marked Unpublished.

Versions and rollback

Every publish creates a numbered, immutable version (V1, V2, …) — a snapshot of the live theme at that moment. Expand View versions on a theme to manage them:

• Make live / Set live — point the storefront at an earlier published version. This is your rollback: instantly revert a bad publish without re-editing.
• Browse — open a read-only snapshot of any version in the editor.
• Use as draft — start a fresh draft from a published version, so you can branch new work off an older state.

Tip

Because publishing is versioned, you can roll back at any time. If a change looks wrong on the live store, Make live the previous version first, then fix the draft and re-publish.

Theme settings, schemes, and fonts

Open Theme Settings at the top of the left sidebar for global controls that apply across all pages. The exact options come from the theme, but most expose a font picker for typography, layout and spacing settings, and color schemes. A color scheme is a named set of colors (background, text, buttons) defined once and applied per section, so you can restyle the whole store from one place. Many text and image settings can also bind to dynamic sources so a section shows the right product or metafield content automatically.

Next steps

Visual editor guide

Section-by-section walkthrough of editing settings, blocks, and schemes — see Using the visual editor.

Manage themes

The full library, versions, rollback, and duplicating themes in Manage themes.

Alternate templates

Give specific products, collections, or pages their own layout with alternate templates.

Edit theme code

Liquid, CSS, and JSON for developers in Edit theme code.

Related: Navigation & content · Policies · Import a theme ZIP