The storefront editor is a tool for changing and previewing theme settings in real-time. Merchants access the storefront editor by clicking Customize theme for a theme in the Themes page of their Shopify admin.
All themes include a
settings_schema.json file in the theme's
config directory that specifies what theme settings appear on the Customize theme page.
Editing theme settings
If you're a theme author, you can edit
settings_schema.json to change options on the Customize theme page:
settings_schema.jsonfile in the
configdirectory of your theme. Follow the specified format.
Edit your other theme files to access the settings that you've defined.
Theme settings that a merchant configures using the Customize theme page are saved in
settings_data.json in the
config directory of every Shopify theme.
The storefront editor generates a preview of your store using an inline frame (
<iframe>) element. For security reasons, most browsers prevent mixed content (both
https: together), so it's important that your theme loads successfully over HTTPS and contains no hard-coded HTTP assets.