Site Settings

Access Site Settings

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

Within site 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 site settings below for information on how to manage site settings as a developer).

Publish Site Settings

Once you're done editing your storefront 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 site settings will not be automatically published with the rest of your storefront content when a new deploy is triggered.

Define Site Settings

The settings folder is where you define and register all of your storefront 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 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;