Ctrlk
Contact support
For the complete documentation index, see llms.txt. This page is also available as Markdown.

How to use the Shopify theme editor

Shopify theme editor guide: duplicate before editing, use the section inspector, fix the tablet-look zoom issue, undo with version history, and manage sections.

Get the most out of the Shopify theme editor when customizing your store. This guide covers screen resolution issues, preview modes, saving changes, and common editor mistakes to avoid.

Before you start: duplicate your theme

Never customize your live theme directly. Always work on a dev copy first.

  1. In Shopify Admin → Online Store → Themes, click ⋯ next to your active theme

  2. Select Duplicate

  3. Rename the copy — for example, "Avante – Dev" or "Volume – Dev"

  4. Click Customize on the duplicate

Always customize a duplicate, not your live theme. One wrong click can break your storefront for customers.

When you're happy with the result, click Publish on the dev copy. Shopify automatically saves your previous live theme as a backup.

Switching between desktop and mobile preview

The theme editor has a mobile preview toggle in the top-right toolbar — the phone icon (📱).

  • Icon inactive → desktop view (default)

  • Icon active → mobile view — shows how your store looks on a smartphone

Inspecting sections and blocks

The Activate inspector button (cursor arrow icon, top-right toolbar) lets you click on any element in the preview to instantly select its section or block in the sidebar.

When active, hovering over the preview highlights sections and blocks with a blue outline — useful for seeing exact boundaries and sizing before editing.

Tip: Use the inspector when your store has many sections and you can't find the right one in the sidebar — just click directly on it in the preview.

Screen resolution: why your store looks like a tablet

On screens smaller than Full HD (1366px, 1400px, 1600px), the editor's side panels compress the preview area — making your desktop layout look like a tablet version.

This is the editor view only. Your customers don't see it this way.

Fix: zoom out your browser

Press Ctrl + - on Windows or Cmd + - on Mac to reduce browser zoom to 80–90%. The side panels take up less space and the desktop layout becomes visible.

Press Ctrl + 0 / Cmd + 0 when done to restore default zoom.

Saving and publishing changes

The theme editor saves changes to your theme file, but does not publish them live automatically.

  • Click Save (top-right) after every significant change

  • Changes are visible only in the editor preview until you click Publish

  • If you're on a dev copy, Publish replaces your live theme — your current live version is saved as a backup automatically

Note: Some settings — like Typography font changes — require a full page reload after saving to appear correctly in the preview.

Undoing changes

Press Ctrl + Z (Windows) or Cmd + Z (Mac) to undo recent changes within the current editor session.

For deeper rollbacks, Shopify has a built-in version history for theme files. To access it:

  1. In the theme editor top-right menu, click ⋯ → Edit code

  2. Open any file (e.g. config/settings_data.json)

  3. In the bottom-left panel, find Timeline — it shows saved versions of that file

  4. Click a version to restore it

The code editor is for advanced users. If you're not sure what you're doing, use a duplicated theme instead — it's a safer rollback method.

Working with sections

Action
How

Add a section

Click Add section at the bottom of the left sidebar

Hide a section

Click the 👁 eye icon next to the section name

Reorder sections

Click and hold a section, then drag it up or down

Remove a section

Hover over a section or block — click the 🗑 trash icon that appears

Tip: Hide sections instead of deleting them when testing layouts. Hidden sections are invisible to customers but stay saved in the editor — you can restore them any time.

Related

Last updated

Was this helpful?