Naming Your Theme and Theme Variations

Plan: Stencil Developer

Lesson 18 of 28 · 15 min

Naming Your Theme

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.

Below is an example of the first key-value sets in Cornerstone’s config.json:

config.json

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

The next example shows you how to change Cornerstone’s configurations to reflect your own theme’s name, version number, price on the Marketplace, and documentation URL.

config.json

{
"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

Variations are defined in your theme’s config.json file. See the example below from Cornerstone light definition from Cornerstone’s config.json.

config.json

"variations": [
    {
      "name": "Light",
      "id": "light",
      "meta": {
        "desktop_screenshot": "desktop_light.png",
        "mobile_screenshot": "mobile_light.png",
        "description": "Ideal for a wide range of businesses and brands, this design is fully responsive, simple, and ready for you to add your branding, logo, and products. It comes ready to build a clean looking and beautiful store with features such as homepage carousel, social media icons, featured and top selling products, and faceted search (which is available on select BigCommerce plans). Fully express your brand by using our Theme Editor to quickly and easily style your site's fonts and colors, all without the need to write code.",
        "demo_url": "https://cornerstone-light-demo.mybigcommerce.com",
        "optimized_for": [
          "multi_purpose",
          "mobile_tablet_desktop",
          "sales_discounts",
          "large_catalog"
        ],
        //...
      },
      //..
    },

When you insert your custom variation into the variations object in Cornerstone’s config.json it might look something like you see below.

config.json

"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": []
    },
  },
  // ...

NOTE:

Using Stencil CLI to change variations

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

Plan: Stencil Developer

Lesson 18 of 28 · 15 min

Naming Your Theme

Below is an example of the first key-value sets in Cornerstone’s config.json:

config.json

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

The next example shows you how to change Cornerstone’s configurations to reflect your own theme’s name, version number, price on the Marketplace, and documentation URL.

config.json

{
"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

Variations are defined in your theme’s config.json file. See the example below from Cornerstone light definition from Cornerstone’s config.json.

config.json

"variations": [
    {
      "name": "Light",
      "id": "light",
      "meta": {
        "desktop_screenshot": "desktop_light.png",
        "mobile_screenshot": "mobile_light.png",
        "description": "Ideal for a wide range of businesses and brands, this design is fully responsive, simple, and ready for you to add your branding, logo, and products. It comes ready to build a clean looking and beautiful store with features such as homepage carousel, social media icons, featured and top selling products, and faceted search (which is available on select BigCommerce plans). Fully express your brand by using our Theme Editor to quickly and easily style your site's fonts and colors, all without the need to write code.",
        "demo_url": "https://cornerstone-light-demo.mybigcommerce.com",
        "optimized_for": [
          "multi_purpose",
          "mobile_tablet_desktop",
          "sales_discounts",
          "large_catalog"
        ],
        //...
      },
      //..
    },

When you insert your custom variation into the variations object in Cornerstone’s config.json it might look something like you see below.

config.json

"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": []
    },
  },
  // ...

NOTE:

Using Stencil CLI to change variations

stencil start -v variation-name