> 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
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
***
### 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.
{% 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 %}
***
### 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
{% 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
{% 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 %}
***
### 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](broken://spaces/6DraMvJNYYlFJqlho1aV/pages/416edc1381c20849bc41111b02e482a722a49b94)
---
# 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 dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://staylime.com/docs/theme-editor/how-to-use-the-shopify-theme-editor.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
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.