Storefront editor

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.

Storefront editor

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:

  1. Edit the settings_schema.json file in the config directory of your theme. Follow the specified format.

  2. Edit your other theme files to access the settings that you've defined.

Merchant settings

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.

Content types

The storefront editor generates a preview of your store using an inline frame (<iframe>) element. For security reasons, most browsers prevent mixed content (both http: and https: together), so it's important that your theme loads successfully over HTTPS and contains no hard-coded HTTP assets.

Want to discuss this page?

Visit the Shopify Community