Add sections, configure settings, and preview your changes using the Shopify theme editor. This is the control center of the theme where page templates can be customized for the home page, product page, and more.
Access the theme editor to get familiar with the top bar, Template, Theme settings, Theme actions, and Preview features.
Access the theme editor
Go to your Online Store, then Themes.
Click Customize beside the theme to open the theme editor.
Top bar
Undo, redo
The two buttons with circular arrows represent undo (left) and redo (right). Use these to correct any adjustments made in the theme editor.
Template selector
To open a template, use the page selector dropdown.
Device selector
Above the right-side preview, you can change the device view. Use this to get a sense of how your store appears in mobile, desktop with settings sidebar, and full-window desktop.
Publish button
Publish your theme without leaving the theme editor by selecting Publish.
Save button
The Save button applies your customizations to the theme. Save your theme to view the latest changes in the preview or live storefront.
Template
Formerly known as the Sections tab, the Template portion of the sidebar your control center for adding sections. Sections are stackable, dynamic features to customize the storefront. These are the building blocks of your store and provide a wide variety of features, layouts, and more.
The home page sections in themes are currently limited to the home page. Stay tuned, though. Sections for other pages will soon be available following platform and theme enhancement currently in development.
Add, remove, and reorder sections from Templates. Each section has customizable features and settings accessed by opening the section in the left sidebar.
Theme settings
Use the Theme settings to make global changes to various aspects of your theme, such as colors, typography, and layout.
Theme settings vary depending on the theme
-
Empire
Empire's theme settings: Animations
Using Empire's theme settings: Theme style
Using Empire's theme settings: Colors
Using Empire's theme settings: Typography
Using Empire's theme settings: Products
Using Empire's theme settings: Layout
Using Empire's theme settings: Social media
-
Atlantic
Atlantic's theme settings: Colors
Atlantic's theme settings: Typography
-
Superstore
Activating the Product Reviews app
Using Superstore's theme settings: Layout
Using Superstore's theme settings: Colors
Using Superstore's theme settings: Typography
Using Superstore's theme settings: Products
Using Superstore's theme settings: Advanced
Using Superstore's theme settings: Custom styles and scripts
Using Superstore's theme settings: Performance
Using Superstore's theme settings: Social media
Using custom fonts in Superstore
-
Grid
Grid's theme settings: Quickshop
Grid's theme settings: Typography
-
Pacific
Pacific's theme settings: Icons
Pacific's theme settings: Colors
Pacific's theme settings: Typography
Pacific's theme settings: Sidebar
Pacific's theme settings: Product grid
-
Startup
Startup's theme settings: Social media
Startup's theme settings: Product grid
Startup's theme settings: Breadcrumbs
Startup's theme settings: Backgrounds
Startup's theme settings: Typography
-
Launch
Launch's theme settings: Social media
Launch's theme settings: Product goal
Launch's theme settings: Featured product
Launch's theme settings: Typography
-
Handy
Handy's theme settings: Social media
Handy's theme settings: Typography
Handy's theme settings: Colors
-
Vogue
Vogue's theme settings: Typography
-
Reach
Reach's theme settings: Colors
Reach's theme settings: Typography
Reach's theme settings: Embellishments
Reach's theme settings: Products
Reach's theme settings: Quickshop
-
Editions
Using Editions' theme settings: Layout
Editions' theme settings: Background
Editions' theme settings: Colors
Editions' theme settings: Typography
Theme actions
View or preview theme
View theme will open a new tab or window to see how the saved content will display from the customer's point of view. This will be called Preview theme if the theme is still in the draft stage.
If your theme is hidden by a password page or unpublished, use the Share preview feature to generate a unique link to share with staff, clients, etc.
- Select Theme actions
- Preview theme
- In the Preview tab or window, select Share preview from the bottom bar
- Copy the provided code to share
Edit code
For direct theme file modifications, select Edit code from the Theme actions menu.
Theme file modifications are not advised. Changes to the theme files can result in errors on the storefront, so consider working with vetted 3rd-party developers if modifications are important for your store.
Edit languages
Access the language editor by selecting Edit languages Use this editor to change the language of your theme and checkout, as well as customize the terminology that is used throughout your store.
How do I change the wording in my theme?
Using the theme language editor
Preview
The right-side preview provides a window into the storefront's appearance. Use the top bar features to modify the window and device previews.
Interact directly with the right-side preview to test links and access pages more directly.