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 → Themes → Customize. You can drag and drop sections, change colors and fonts, swap images, and preview changes on desktop or mobile before publishing. Changes are only live once you click Save. You can always undo changes by using theme version history.
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 left sidebar.
Go to Themes. You will see your current (live) theme and any other themes you have installed.
Click Customize. Click the Customize button next to your live theme. The theme editor opens in a new view.
Understanding the theme editor layout
The editor has three main areas:
Left panel — Sections and settings. This is where you make changes. You will see a list of sections (the building blocks of your page) at the top, and a settings panel when you click on anything.
Center — Preview. A live preview of your store. Click on any element in the preview to select it in the left panel.
Top bar — Page and device selector. Switch between pages (Home, Product, Collection, etc.) using the dropdown at the top. Switch between desktop, tablet, and mobile preview using the device icons.
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 left panel:
- Add a section: Click Add section at the bottom of the sections list.
- Move a section: Drag the six-dot handle to reorder sections.
- Remove a section: Click a section to select it, then click the bin icon.
Colors and typography
Click the Theme settings panel (usually a paintbrush or gear icon at the bottom of the left panel) to access global settings:
- Colors — change your brand color palette, background colors, button colors
- Typography — change the fonts for headings and body text
- Buttons — adjust button shape, size, and style
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 on any image section in the preview or left panel to swap it. You will see an Image or Select image field — click it and choose from your media library or upload a new image.
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 click Save in the top-right corner. A small "Saving" indicator appears while it processes.
The preview you see while editing is only visible to you. Customers see the current live version until you save.
There is no auto-save
If you close the theme editor without saving, your changes will be lost. Save frequently, especially before switching to a different page or section.
Previewing on mobile
Click the mobile icon in the top bar to see a mobile preview. 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. Over half of most store visitors are on mobile.
Using theme version history
If you make changes and something looks wrong, you can revert to an earlier version of your theme. Go to Online Store → Themes, click the three-dot menu next to your theme, and look for Version history or Older versions. This lets you restore a previous saved state.
What the theme editor cannot do
Here is the honest answer about limits:
- You cannot change your checkout's layout or add custom checkout sections 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 from the theme editor. Code editing happens in Online Store → Themes → Edit code, and 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
Related guides
- Shopify apps explained
- Understanding the Shopify cart & checkout
- Shopify plans & billing
- Troubleshooting Shopify problems
Need a hand?
Learn more
Shopify apps explained
Learn what Shopify apps are, how to find and install them, what they cost, and what to watch out for before adding them to your store.
Shopify plans & billing
Understand Shopify's pricing plans, what each one includes, how billing works, and how to choose the right plan for your store.