Skip to main content

Theme Editor

The theme editor lets you customize your storefront's appearance without writing code. You can rearrange content, change colors, upload your logo, and preview changes before publishing.

Opening the theme editor​

  1. Go to Online Store in the sidebar
  2. Click Customize Theme (or Edit Theme if you've customized before)
  3. The theme editor opens with a live preview of your storefront

Editor layout​

The theme editor has three parts:

  • Left panel — a tree view of all sections and blocks on the page
  • Center — a live preview of your storefront
  • Right panel — settings for the selected section or block

Click on any section in the left panel (or directly in the preview) to select it and see its settings on the right.

Working with sections​

Sections are the building blocks of your storefront pages. Each section is a horizontal content area — for example, a hero banner, a featured products grid, or a text block.

Adding a section​

  1. Click Add Section in the left panel
  2. Choose from available section types:
    • Hero Banner — large image with text overlay
    • Featured Products — a grid of selected items
    • Text — rich text content
    • Image with Text — side-by-side image and text
    • Collection List — display items from a category
  3. The new section appears in the preview

Reordering sections​

Drag and drop sections in the left panel to change their order on the page. The preview updates in real time.

Removing a section​

  1. Select the section in the left panel
  2. Click the Delete (trash) icon
  3. Confirm the removal

Section settings​

Each section type has its own settings. Select a section to see options like:

  • Content — text, images, links
  • Layout — columns, alignment, spacing
  • Visibility — show or hide the section

Working with blocks​

Some sections contain blocks — smaller content units within a section. For example, a "Features" section might contain multiple feature blocks, each with an icon, title, and description.

Adding a block​

  1. Select a section that supports blocks
  2. Click Add Block in the section settings
  3. Configure the block's content

Reordering blocks​

Drag and drop blocks within a section to change their order.

Customizing colors and branding​

Theme colors​

In the theme settings (click the paintbrush icon or select Theme Settings at the top of the left panel):

  • Primary color — your main brand color, used for buttons and accents
  • Background color — the page background
  • Text color — default text color
  1. Go to Theme Settings > Header
  2. Click Upload Logo
  3. Select your logo file (PNG or SVG recommended)
  4. Adjust the logo size if needed

Previewing changes​

As you make changes, the center preview updates in real time. You can also:

  • Switch between pages — use the page dropdown to preview different storefront pages
  • Check mobile view — resize your browser window to see how the storefront looks on smaller screens

Publishing​

Changes in the theme editor are saved as a draft until you publish.

  1. Review your changes in the preview
  2. Click Publish in the top-right corner
  3. Your changes go live on your storefront immediately
tip

If you're making major changes, use the preview to check every page before publishing. Draft changes are not visible to customers until you publish.

Reverting changes​

If you've made changes you want to undo (before publishing):

  • Use Ctrl+Z (or Cmd+Z on Mac) to undo recent edits
  • Or close the editor without publishing to discard all draft changes