BigCommerce
Storefront
Stencil
Themes
Page Context
Theme Object Reference
config.json

config.json

The main configuration file for Stencil Themes.

  • name
    string
    required

    The theme name.

    Example: Starlight

  • version
    string
    required

    The themeʼs version number.

    Example: "2.6.0"

  • meta
    object
    required

    BigCommerce will use this metadata to list themes in Theme Marketplace.

  • css_compiler
    string

    Name of the themeʼs CSS preprocessor.

    Example: "scss"

    Default: SCSS

  • autoprefixer_cascade
    boolean

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

    Example: true

  • autoprefixer_browsers
    array[string]

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

    Type: array[string]
    Example: ["> 1%","last 2 versions","Firefox ESR"]

  • settings
    object
    required

    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}}
    
    
  • read_only_files
    array[string]

  • resources
    object

  • variations
    array[object]
    required

Did you find what you were looking for?