Customizing Your Storefront with Theme Customizer 2.0

Theme Customizer 2.0 is the visual editor where you change how your storefront looks — layout, sections, colors, typography, images — without touching code. Everything you change is previewed live in the editor before you publish.

Opening the customizer

1. Go to Online Store → Themes.
2. Find the theme you want to edit (it doesn't have to be the published one).
3. Click Customize.

The editor opens with your live storefront in the centre, a sidebar on the left for sections and settings, and a top bar for page selection, device preview, undo/redo, and publishing.

Sections and blocks

Storefronts are built from sections (full horizontal bands — hero, featured collection, image-with-text, testimonials, footer) and the blocks inside them (a single slide, a single product card, a single FAQ row).

• Add a section — click the + between any two sections, pick from the gallery.
• Reorder — drag sections up or down in the sidebar.
• Add a block inside a section — expand the section in the sidebar and click + Add block.
• Hide instead of delete — click the eye icon to hide a section without losing its settings.

Header and footer

Header controls the top of every page — logo, menu, search, cart, account, and announcement bar. Footer controls the bottom — menus, social links, payment icons, copyright. Both are edited inline; changes apply across every storefront page.

Theme settings

Click the gear icon to open Theme settings, where you configure store-wide defaults:

• Colors — one or more color schemes (background, foreground, accents, buttons). Sections can pick which scheme to use, so a single setting updates everywhere consistently.
• Typography — heading and body font, sizes, weight.
• Buttons — corner radius, border, hover state.
• Social links — URLs to your social profiles, used in the footer and any social-icon block.
• Favicon — the browser tab icon (recommend 32×32 PNG).
• Custom CSS — for advanced tweaks.

Section settings types you'll see

Each section exposes its own settings panel. Common controls include:

• Text / heading / link inputs.
• Image picker (with a Media library for reuse across sections).
• Color and color scheme dropdowns.
• Resource pickers — pick a product, collection, blog, article, or page.
• Range sliders for padding, image height, columns, autoplay speed.
• Checkboxes for toggle-style features.

Templates

Different page types have their own template — homepage, product, collection, cart, search, blog, article, page, 404. Switch between them from the top bar to customize each one. You can also create multiple templates of the same type (e.g. product.featured) and assign them to specific products.

Saving and publishing

Click Save to keep your work as a draft on this theme. Click Publish to make this theme live on your storefront. The customizer also supports unlimited undo/redo while the editor is open, and you can revert to a previously published version from the theme actions menu.

FAQ

Do I need to publish to see changes on my live store?

Yes — the customizer edits a draft. Click Publish to push the changes to shoppers. Until you publish, only the editor preview reflects them.

Can I work on a new design without affecting my live store?

Yes. Duplicate your current theme from the Themes page, edit the copy in the customizer, preview it, and only publish when you're happy.

How do I preview on mobile?

Use the device toggle in the top bar to flip between desktop, tablet, and mobile. The preview rerenders at the correct breakpoint, so what you see is what shoppers see.

What happens if I delete a section I needed?

Use Undo while the editor is open. After publishing, you can roll back to a previous published version from the theme actions menu.

Can two stores share a theme?

Themes are installed per-store. You can package a theme as a ZIP and install the same ZIP into a different store, but the two installations are independent — changes in one do not affect the other.