Using the Shopify theme editor

Learn how to use Shopify's theme editor to customize your store's appearance — what you can change yourself and when to call in a developer.

Your Shopify store's look and feel is controlled by its theme. The theme editor is where you change colors, fonts, images, and the layout of your pages — without touching any code.

Quick summary

Open the theme editor from Online Store by clicking Edit theme next to your theme. You can add and rearrange sections, change colors and fonts, swap images, and preview changes on desktop or mobile. Changes are only live once you click Save (on your live theme, the button may say Publish). Shopify has no version history for a whole theme, so duplicate your theme before making big changes.

What you'll need

Beginner No coding needed

Admin access to your Shopify store
A published or draft theme to edit

Opening the theme editor

Go to Online Store. From your Shopify admin, click Online Store in the sidebar.

Find your theme. You will see your current (published) theme, plus a Draft themes section with any other themes you have added.

Click Edit theme. Click Edit theme next to the theme you want to change. The theme editor opens.

Understanding the theme editor layout

The editor has three main areas:

Sidebar — Sections and settings. This is where you make changes. It shows a tree of the sections and blocks (the building blocks of your page) on the page you're viewing. Click any section or block to see its settings. On wider screens, the settings open in a second panel on the right.

Preview. A live preview of your store that updates as you make changes. Turn on the preview inspector to manage content directly in the preview.

Menu bar — Navigation, page menu and preview controls. Buttons on the left switch the sidebar between sections, theme settings, and app embeds. In the centre, the template menu switches between pages (Home, Product, Collection, etc.). On the right are undo and redo, a mobile preview button, and Save. There is no separate tablet preview.

What you can change in the theme editor

Sections and content

Your pages are built from sections — modular blocks like an image banner, a product grid, a text block, or a testimonial row. In the sidebar:

Add a section: Click Add section, then pick a section from the list or search for one.
Move a section: Hover over the section name, then drag its handle to reorder sections.
Remove a section: Hover over the section name and click the delete icon, or click the section and then click Remove section.

Colors and typography

Click the Theme settings button on the left of the menu bar to open your store's global settings. The exact options depend on your theme, but they usually include:

Colors — change your brand color palette, background colors, button colors
Typography — change the fonts for headings and body text
Buttons — adjust how your buttons look

Changes here affect your whole store

Typography and color changes in Theme settings apply site-wide. A change to your heading font will update every page at once. This is usually what you want, but be aware of the scope.

Images and media

Click a section that contains an image to swap it. Click Select image, then choose an image you have already uploaded to your Shopify admin, or add a new one.

Text content

Some text in your store (like your homepage headline or a description block) can be edited directly in the theme editor. Other text — like product names and descriptions — is managed in your product or page editor, not in the theme editor.

Saving and publishing changes

Changes in the theme editor are not live until you save them with the Save button on the right of the menu bar. When you are editing your live theme, the button may say Publish instead.

Customers can't see the preview you're working on. They see the current live version until you save.

There is no auto-save

Unsaved changes aren't live, and undo and redo only work until you save. Save regularly, and always before you leave the editor, or you may lose your work.

Previewing on mobile

Click the mobile preview button in the menu bar to see a mobile preview, and click it again to return to the desktop view. This does not change your live store — it just shows you how it will look on a smaller screen.

We strongly recommend checking the mobile view any time you add or change a section.

Undoing changes and restoring an earlier version

Shopify has no version history for a whole theme, so plan ahead:

Before you save, use the undo button to step back through your unsaved changes. Once you save, you can no longer undo or redo.
Before big changes, duplicate your theme (see the question below). If something goes wrong, you can publish the copy you made.
For code files, the code editor has a Timeline view that restores one file at a time to an earlier version. It can't restore a whole theme or bring back deleted files, and older versions might not be available. We handle code changes for you.

What the theme editor cannot do

Here is the honest answer about limits:

You cannot make deep changes to your checkout, such as adding custom fields to the checkout steps, without Shopify Plus. See Understanding the Shopify cart & checkout.
You cannot add new functionality (like a custom product filter or a wishlist) through the theme editor alone — that requires an app or code changes.
You cannot edit the theme's underlying code in the theme editor itself. Code editing happens in the code editor: on the Online Store page, open the theme's actions menu and click Edit code. You can only edit the code of a theme you've purchased, and it requires developer knowledge. We handle this for you.

Be careful with Edit code

The code editor is powerful but risky. One wrong change can break your store's layout. If you need something that the theme editor can't do, reach out to us rather than editing code yourself.

Common questions

Can I test changes without going live?

Sort of. Unsaved changes aren't live, but saving your live theme makes changes live straight away. For bigger changes, duplicate your theme first: on the Online Store page, open the theme's actions menu and click Duplicate. Make your changes on the copy, then publish it when you are happy. Your previous theme moves to Draft themes, so it stays available as a backup.

Why can't I see a section I just added?

Some sections are only visible on certain pages. Make sure the correct page is selected in the template menu at the top (e.g., 'Home page' vs 'Product page'). Also check that the section is not hidden: hover over its name in the sidebar and look for the hide button.

My store looks different from what I see in the editor — why?

Browser caching is a common cause. Try a hard refresh (hold Shift and click the refresh button in your browser). Also check that you saved (or published) your changes before previewing the live site.

Can I change my theme without losing my content?

Products, collections, menus, pages, and blog posts are managed in your Shopify admin — not in the theme. They stay in place when you switch to a new theme. However, the settings you made in the old theme (section and block settings, colors and fonts, and edited wording) belong to that theme and will not transfer. You would need to set those up again in the new theme.

Need a hand?

If you're stuck, email support@chykalophia.com and we'll help. Include your website address and a screenshot if you can.