Page Builder

config.json

The main configuration file for Stencil Themes.

object
minProperties: 0
name
string

The theme name

1 validation + required
version
string

The theme’s version number

1 validation + required
meta
object

BigCommerce will use this metadata to list themes in Theme Marketplace

required
css_compiler
string

Name of the theme’s CSS preprocessor.

2 validations
autoprefixer_cascade
boolean

Denotes whether to enable the Autoprefixer CSS postprocessor in order to add vendor prefixes to CSS rules.

1 validation
autoprefixer_browsers
array[string]

Which legacy browsers Autoprefixer should support, specified in Browserslist query format.

1 validation
settings
object

Display-oriented key names and values that you can arbitrarily set for your theme. Handlebars accesses the combined settings as the context variable {{theme_settings}}.

Theme variations also have their own settings sections. Values that you set at the variation level will override global values that you set here (for corresponding key names and within the scope of that variation).

If you want to create a custom variable to use in Handlebars, either add it within this theme-level settings section, or add it down in a variation-level settings section.

You would access your arbitrarily named custom variable in Handlebars as {{theme_settings.<variablename>}}.

Here is an example of a custom variable in the default theme’s config.json:

"settings": { "homepage_featured_products_count": 6, }

Here is the corresponding front matter in home.html that calls this variable. (Note that this is pure YAML – the {{...}} used to reference config.json variables within pages’ front matter do not constitute a Handlebars statement)


products:
  featured:
      limit: {{theme_settings.homepage_featured_products_count}}

required
read_only_files
array[string]
resources
object
variations
array[object]
required