> For the complete documentation index, see [llms.txt](https://staylime.com/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://staylime.com/docs/theme-editor/how-to-use-the-shopify-theme-editor.md).

# 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

{% hint style="warning" icon="triangle-exclamation" %}
**Always customize a duplicate, not your live theme. One wrong click can break your storefront for customers.**
{% endhint %}

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

<figure><img src="https://2798262541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7SDIiatjQ7RGqq2Io8z4%2Fuploads%2Fj0D13kCorWDxJgL3BZLY%2FScreenshot_1.png?alt=media&#x26;token=79caf5ae-b3a5-40c0-a634-853a3e5c416c" alt=""><figcaption></figcaption></figure>

***

### 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.

<figure><img src="https://2798262541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7SDIiatjQ7RGqq2Io8z4%2Fuploads%2F75XTWXtvILQGW9VO9DKG%2FScreenshot_2.png?alt=media&#x26;token=d5e1d576-f53d-4d3d-a223-20fdea0696bd" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**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.
{% endhint %}

#### Using the inspector to set block alignment

Several settings in our themes position a block **inside its container** rather than on the page — horizontal and vertical alignment, content width, paddings. The catch is that a container is invisible until something is drawn on top of it, so moving an alignment setting can look like it does nothing, or like it moves the block too far.

The inspector solves this. With it active, hover over the block in the preview and the editor outlines the container it sits in. Now you can see the space the block actually has to move within, and the alignment settings become predictable: the block travels to the edges of that outline, not to the edges of the screen.

1. Click **Activate inspector** (the Preview inspector, cursor arrow icon) in the top-right toolbar of the editor.
2. Hover over the block you are editing — the outline shows its container.
3. Change the alignment setting in the sidebar and watch where the block lands inside that outline.
4. If the block will not move far enough, the container is the limit, not the setting — look at the section's width, content width or padding settings instead.

{% hint style="info" %}
**Tip:** Check alignment with the inspector in both desktop and mobile preview. Containers are narrower on mobile, so a block that has room to move on desktop may already be at its limit on a phone.
{% endhint %}

***

### 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.**

<figure><img src="https://2798262541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7SDIiatjQ7RGqq2Io8z4%2Fuploads%2FwKbK72JlgB4f7e01zI66%2FScreenshot_3.png?alt=media&#x26;token=f8e35aa9-d584-440f-a305-802add0806a9" alt=""><figcaption></figcaption></figure>

#### 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

{% hint style="warning" %}
**Note:** Some settings — like Typography font changes — require a full page reload after saving to appear correctly in the preview.
{% endhint %}

***

### 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

<figure><img src="https://2798262541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7SDIiatjQ7RGqq2Io8z4%2Fuploads%2FwYHUnITSmOjVCTbRx8rC%2FScreenshot_4.png?alt=media&#x26;token=71a84baf-487b-4670-9401-7240ac5b9f2b" alt=""><figcaption></figcaption></figure>

{% hint style="warning" icon="triangle-exclamation" %}
**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.**
{% endhint %}

***

### 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 |

{% hint style="info" %}
**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.
{% endhint %}

<figure><img src="https://2798262541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7SDIiatjQ7RGqq2Io8z4%2Fuploads%2FI4o0ZVzjWoku4WstuWKZ%2FScreenshot_5.png?alt=media&#x26;token=1365555c-5824-4517-8b82-f96da6584734" alt=""><figcaption></figcaption></figure>

***

### Related

* [Install & activate Avante](/docs/avante-themes/getting-started/install-and-activate-avante.md)
* [Install & activate Volume](/docs/volume-themes/getting-started/install-and-activate-volume.md)
* Update your theme


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://staylime.com/docs/theme-editor/how-to-use-the-shopify-theme-editor.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.