Naming Your Theme and Theme Variations

Naming Your Theme

You can configure certain values in config.json that outline the basic details of your theme. Here are the first few key/value sets in version 1.0.0 Cornerstone’s config.json:

Cornerstone config.json settings
{
"name": "Cornerstone",
"version": "1.0.0",
"meta": {
  "price": 0,
   "documentation_url": 		
   "https://support.bigcommerce.com/articles/Public/Cornerstone-Theme-Manual",
  // ...
  }
}

The next code block shows how you might change these values to reflect your own theme’s name, version number, price on Theme Marketplace, and documentation URL:

{
"name": "MyTheme",
"version": "1.1.2",
"meta": {
  "price": 10000,
  "documentation_url": "https://www.mywebsite.com/theme-docs/my-theme.html",
  // ...
  }
}

Creating and Naming a New Theme Variation

You define variations in your theme’s config.json file. Below is the Cornerstone Light variation’s definition, followed by the head of the Bold variation’s definition from Cornerstone’s config.json:

"variations": [
  {
    "name": "Light",
    "id": "light",
    "meta": {
      "desktop_screenshot": "desktop_screenshot.jpg",
      "mobile_screenshot": "mobile_screenshot.png",
      "description": "This is the light style of the Stencil Theme",
      "demo_url": "https://stencil-light.mybigcommerce.com",
      "optimized_for": ["fashion", "image_heavy", "etc"],
      "industries": []
    },
  },
  {
  "name": "Bold",
  "id": "bold"
  }
  // ...
]

Try inserting a new custom variation of your own, below the “Light” block shown above. Your variation’s definition might look something like this:

"variations": [
// ...
  {
    "name": "MyCustomVariation",
    "id": "my_custom_variation",
    "meta": {
      "desktop_screenshot": "my_custom_desktop_screenshot.jpg",
      "mobile_screenshot": "my_custom_mobile_screenshot.png",
      "description": "This is a really cool custom style of the Stencil Theme",
      "demo_url": "https://stencil-custom.mybigcommerce.com",
      "optimized_for": ["fashion", "image_heavy", "etc"],
      "industries": []
    },
  },
  {
    "name": "Bold",
    "id": "bold"
  }
  // ...

Changing a Theme Variation’s Font Family (config.json)

To learn more about defining variations, see Defining Global Styles for details about each key/value pair. In particular, note the option to configure settings and variables that are scoped to each variation.

For example, you could insert the "settings":...”body-font-family” block shown below to set body text for one theme variation to a specific typeface/family:

{
  "name": "MyCustomVariation",
  "id": "my_custom_variation",
  "settings": {
    // ...
    "body-font-family": "MyCoolFont, AnotherFont, sans-serif",
    // ...
  }
}

Preparing a Variation’s Thumbnails

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.

Using Stencil CLI to Change Variations

To locally test/debug a specific variation of your theme, launch it by invoking the Stencil CLI’s (command-line interface’s) stencil start -v switch. Depending on how you’ve named your variation in config.json, you would type something like this on the command line:

stencil start -v MyCustomVariation

Resources

Related Articles