Creating Storefront Settings

The settings folder is used to define and register all your Storefront Settings.

Because the Storefront settings are globally accessible, they are ideal for architecting content features and toggle-able options in site-wide components such as:

• Header and footer menus

• Promo bars

• Modals

• Sidebars

• Shared size guides

• Cart settings

• Account settings

• etc.

Registering grouped site settings

To register new setting(s) in the Customizer you must include your setting(s) within the default export at /settings/index.js The default export must be an array of site settings. These settings will use the same fields that you use in sections. You can find a list of our supported fields here.

settings/index.js (example with multiple grouped settings)

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

export default settings;

An index.js file exporting an array of settings is required on /settings

Additional Documentation

• Learn more about fields.

• Retrieving Storefront Settings using the useSettings() hook.