The theme editor
The theme editor is a tool that lets merchants customize the content and appearance of their store, and preview changes to their theme in real time.
As a theme developer, you can allow merchants to customize their theme in the theme editor by introducing settings, and by dividing your theme functionality into modular sections and blocks.
You need to integrate your theme with the theme editor to create a seamless editing experience for merchants. In the theme editor preview, the merchant should see exactly what will appear in the storefront when the theme is live.
Accessing the theme editor through the Shopify admin
Anchor link to section titled "Accessing the theme editor through the Shopify admin"Merchants can access the theme editor in the Shopify admin.
- From the Shopify admin, go to Online Store > Themes.
- Find the theme that you want to edit, and then click Customize.
Accessing the theme editor during development
Anchor link to section titled "Accessing the theme editor during development"To understand how your theme settings appear to merchants, you can preview your theme in the theme editor. You can access the theme editor during development by using the following methods:
- Run your theme as a development theme or push your theme to a store using Shopify CLI
- Connect a GitHub branch to your store using the Shopify GitHub integration
- Upload your theme changes to Shopify using Theme Kit
- Upload your theme as a ZIP to a Shopify store
You should choose the preview method that makes the most sense for your current development process.
Allowing for customization through the theme editor
Anchor link to section titled "Allowing for customization through the theme editor"The settings that a merchant can access in the theme editor are controlled by the theme. Settings can be specified in the following places:
- The theme's config/settings_schema.json file
- The setting attributes for each section that's included in the theme.
When a merchant configures these settings using the theme editor, their configurations are saved. Learn more about theme settings, and the types of settings that you can add to your theme.
Integrating your theme with the theme editor
Anchor link to section titled "Integrating your theme with the theme editor"You need to make sure that your theme behaves in the editor the same way it would in the storefront. In some cases, you need to adjust your theme's behavior when it's being previewed in the theme editor to give merchants this experience.
To make your theme context-aware, you need to integrate with the theme editor.
Integrating with the theme editor allows you to do the following:
- Disable any code that should be run only when the theme is viewed by a customer
- Enable or disable any code that should be run only when the theme is being edited
- Make sure that any necessary code is run or cleaned up when a section is added, removed, customized, or moved
Detecting the theme editor
Anchor link to section titled "Detecting the theme editor"Using Liquid
Anchor link to section titled "Using Liquid"The request.design_mode global variable can be used in your theme's Liquid files to detect whether the storefront is being viewed in the theme editor. The value of the variable is set to true when viewing the theme editor. Otherwise, it's set to false.
Using JavaScript
Anchor link to section titled "Using JavaScript"The Shopify.designMode global variable can be used in your theme's JavaScript files to detect whether the storefront is being viewed in the theme editor. The value of the variable is set to true when viewing the theme editor. Otherwise, it's set to undefined.
Reacting to theme editor JavaScript events
Anchor link to section titled "Reacting to theme editor JavaScript events"When a merchant interacts with a section or block in the theme editor, or activates or deactivates the theme editor preview inspector, the theme editor emits JavaScript events. To learn about the actions that your code should take to account for these events, refer to Integrate sections with the theme editor.