Storefront and Shop Settings

Access Storefront and Shop Settings

In the Customizer, click the gear icon labelled Storefront or Shop Settings to modify your settings. These settings apply globally across your Storefront and are available wherever you are within it.

Within Storefront or Shop settings, you can manage content elements such as:

1. Your website header
2. Your website footer
3. Promotional bars
4. Modals
5. Sidebars
6. Sizing guides
7. Cart settings
8. Account settings
9. And more.

Again, the exact settings you’ll have access to will largely depend on which settings have been made available to you (see the section on Define Settings below for information on how to manage settings as a developer).

Publish Settings

Once you're done editing your storefront or shop settings, make sure you click the Save button at the bottom of the panel, and then click the Publish Settings button to push the changes live on the site. Updates to your settings will not be automatically published with the rest of your storefront or shop content when a new deploy is triggered.

Define Settings

The settings folder is where you define and register all of your storefront or shop settings.

These global settings allow you to configure content features and options for site-wide sections, including headers, footers, promotional bars, modals, sidebars, size guides, cart and account settings, among others.

Define Site Settings

The settings folder is where you define and register all Storefront or Shop settings.

These global settings enable the configuration of content features and options for site-wide sections, including headers, footers, promotional bars, modals, sidebars, size guides, cart, and account settings, among others.

Register Grouped Site Settings

To add new settings to the Customizer, include them in the default export in /settings/index.js. These settings will use the same fields that you use in sections. You can find a list of our supported fields here.

Below is an example of how to structure this array:

// must be an array
const settings = [
    {
    label: 'Menu',
    name: 'menu',
    component: 'group-list',
    fields: [
      {
        label: 'Link',
        name: 'link',
        component: 'link',
      },
    ],
  },
]

export default settings;