Editing your theme

Customize layout, content, and style in the theme editor — no code required.

Last updated About 8 hours ago

The theme editor is a visual workspace for your templates. Changes apply to the theme you're customizing; publish when you're ready for customers to see them.

Open the editor

  1. Go to Online Store > Themes.
  2. Click Customize on the theme you want to edit.

The left sidebar lists sections and blocks for the current template. Theme settings (gear icon) holds storewide defaults — colors, fonts, cards, cart behavior.

Use the top template menu to switch pages — home, product, collection, cart, blog, and others. Click Change in the preview bar to preview with a specific product, collection, or blog post loaded.

The Header and Footer groups are global: edits there appear on every page.

Add, move, and hide content

  • Add section — use + above or below a section, or the Add section button in the sidebar.
  • Add block — open a section and click Add block.
  • Reorder — drag the ⋮⋮ handle on a section or block.
  • Hide — click the eye icon to hide without deleting settings.
  • Remove — select the item and click Remove section or Remove block.

Click Save to apply. Undo/redo works until you save.

Use the preview inspector

Toggle the preview inspector in the top bar, then click any outlined area on the live preview to jump straight to that section or block's settings.

Switch desktop, mobile, and full-screen preview icons to check responsive layouts.

Duplicate before big changes

In Online Store > Themes, click … > Duplicate on your live theme. Customize the copy, then publish when satisfied.

Keyboard shortcuts

Press ⌘ + / (Mac) or Ctrl + / (Windows) in the editor for the full shortcut list. Handy ones: ⌘ + S to save, ⌘ + Z to undo.

Other settings

Storewide options live under Theme settings — start with Colors, Fonts, and Layout. For help, see Theme support.