The basic details of the Cornerstone theme are outlined in the theme’s configuration file, config.json. You can update the Cornerstone’s config.json file to reflect your theme’s values, such as name, version number, and documentation URL.
Here are the first key-value sets in Cornerstone’s config.json:
The following example shows how to change Cornerstone’s configurations to reflect your own theme’s name, version number, price on Theme Marketplace, and documentation URL:
You define variations in your theme’s config.json file. Below is the Cornerstone Light variation’s definition from Cornerstone’s config.json:
Try inserting your custom variation into the variations object of Cornerstone’s config.json. Your variation’s definition might look something like this:
To learn more about defining variations, see Defining Global Styles. In particular, note the option to configure settings and variables that are scoped to each variation.
The following example shows how to set the body font of a theme variation to a specific typeface/family by inserting the body-font-family key into the settings object:
For details on preparing screenshots that enable merchants to preview each variation, and to preview your theme as a whole in the BigCommerce control panel and Theme Marketplace, see Preparing Thumbnail Images.
To locally test/debug a specific variation of your theme, launch it by invoking the Stencil CLI’s stencil start -v switch. Enter the following code into the terminal, replacing variation-name with your theme’s variation name as listed in config.json:
stencil start -v variation-name