config.json
The theme name
The theme’s version number
BigCommerce will use this metadata to list themes in Theme Marketplace
Name of the theme’s CSS preprocessor.
Denotes whether to enable the Autoprefixer CSS postprocessor in order to add vendor prefixes to CSS rules.
Which legacy browsers Autoprefixer should support, specified in Browserslist query format.
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}}