> This page is for Developer.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.bigcommerce.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.bigcommerce.com/_mcp/server.

# Lab - Edit config.json File

Plan: Stencil Developer

Lesson 5 of 18 · 30 min

**In this lab, you will:**

* Edit the config.json file
* Create a variation

**Prerequisites:**

* BigCommerce Store (sandbox or live)
* Stencil CLI installed
* Cornerstone base theme installed
* Preferred IDE is installed and the Cornerstone theme is open

> **Info**
>
> This course will use VSCode. For more information about VSCode, see the resource at the end of the lesson. You are able to use the development environment of choice.

## Introduction

You will be able to configure the /theme‑name/config.json file to properly manage each of your custom theme's frontend aspects. The config.json file functions:

* Provide global context for Stencil's CSS and Handlebars resources
* Provide values for the Store Design GUI to manage
* Provide metadata for your theme's listing in the Theme Marketplace
* Define variations included in your theme

### Configure config.json Keys

The first thing you must do when beginning theme developement is configure certain values in the `cornerstone/config.json` file. For example, here are the first few key/value sets in Cornerstone's config.json:

```json showLineNumbers={false}
{
"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. These values also appear in a client's store if the theme is not published in the marketplace. Naming and versioning themes is a good practice even if you have no intent to distribute the theme via the marketplace:

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

### config.json Interactions

To customize your theme's appearance at a global level, the values that you define in the *\<theme-name>/config.json* file interact with local resources. Your config.json definitions set global defaults for templates, front-matter attributes and Handlebars resources throughout your theme. You can also define custom variables in config.json, named according to your needs.

![config.json Interactions](/_fern-img/987d1dee5330653d0903ba467c2335b0b7018901cc93aca20f0cb4b8bb13f5cb.webp)

**Open config.json** From the locally installed Stencil Theme, open config.json file.

## Step 1: Change Settings in config.json

1. **Open** the locally installed Cornerstone theme in your IDE
2. **Ensure** the *CLI is initialized* an the *theme is launched* on local host 3000

> **Info**
>
> Please see [Stencil Docs](/developer/docs/storefront/stencil/getting-started) for reference files.

3. **Open** config.json in your IDE
4. **Locate** "footer-backgroundColor"
5. **Replace** the hex color value with #66ccff
6. **Observe** change on local host 3000

**Before**
![Before](/_fern-img/2fc1d23657258724206a0bbc727a08215cf06f57396698d90edaf1dab4f3c946.webp)

**After**
![After](/_fern-img/35259c35f417e66ff8058939b0b22b3aa4b4e696fbdd5e6303eaf529affa812b.webp)

## Step 2: Create a Variation

1. **Locate** the Variations section in config.json
2. **Copy** the entire section for the "Bold" variation, from the opening bracket by the variation name down to just before the opening bracket for the next variation.

![Bold variation location](/_fern-img/b0169e9927d8ceadf7d3a88779c283ced94bdac811afe3f9b85c21ab73dd1447.webp)

![Bold variation contents](/_fern-img/3546bcf25272f875f0d15e620a2f053b1f78a4583c0c3fb98988a1bf5a49e592.webp)

3. **Paste** the variation contents below the existing "Bold" variation.

![Pasted variation](/_fern-img/5a368e46ba45e5921a7d4a0a647fbb59793a74e26415c12ebda982e654d20f33.webp)

4. **Edit** the pasted variation head to designate a new variation for the theme.

![Renamed variation](/_fern-img/eb9a6e4999e58d983f8895af126e122758dbbef8f07913c5e9f8703c27838af8.webp)

5. **Change** the "carousel arrow color" to "#66ccff"
6. **Change** the "carousel arrow bgColor" to "#fcf9f4"

![Updated carousel arrow colors](/_fern-img/06f2bc7fb4c2b2c20a3a6302d38a1073bd1f751bff7b7e7912f897da468b7b54.webp)

7. **Launch** Stencil with the stencil start -v option. You'll want to include your variant name in the command prompt, like below:

```bash showLineNumbers={false}
stencil start -v MyCoolVariation
```

> **Info**
>
> If Stencil is already running, you will need to end the process and start again with the -v. Use the following command to stop Stencil:
>
> `CTRL+C`

8. **Observe** carousel arrows changed to blue.

![Carousel arrows changed to blue](/_fern-img/9324317e49aaa6a7d67678303eaa9fd465b9efe693632daa869f11eefbcda7b2.webp)

> **Info**
>
> Before proceeding to the next lab, either switch back to the original variation (**stencil start**), or ensure you are making changes in the **Settings** of the variation created above.

## Resources

* [Install VSCode](https://code.visualstudio.com/)