> 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 - Theme Editor Text Fields

Plan: Stencil Developer

Lesson 12 of 18 · 30 min

**In this lab, you will:**

* Create a new component for customer group messaging
* Add the new component to the store's header
* Create a new custom.scss file
* Import the new custom.scss file into the theme.scss file
* Create key value pairs in config.json for the customization defaults on the new component
* Create data types in schema.json to allow the new component to be customized through Theme Editor

**Prerequisites**

* Previous labs have been completed

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

## Step 1: Create a Customer Group and Assign a Customer

1. **Log in** to your store's control panel
2. **Navigate** to *Customers > Customer Groups*
3. **Enter** a name for your Customer Group and **Save** and **Exit**
4. **Navigate** to *Customers > Add*
5. **Enter** the required details to create a customer
6. **Assign** the new customer to the newly created Customer Group
7. **Save** and **Exit**

## Step 2: Create a New Component for Customer Group-Specific Messaging

1. **Navigate** to the *templates/components/common* directory
2. **Add** a new HTML file named *customer-group-special.html* to the directory
3. **Inside** the new file, add the following code:

```jsx showLineNumbers={false}
<div class="cg-banners" >
    <div class="cg-banner">
        <p>{{theme_settings.cg_banner_message}}</p>
    </div>
</div>
```

![Creating the customer group special component](/_fern-img/81fae5142f78c12d4264c3f9dc60304d593dc3fd68d4d3c06a9ce6f766b95223.webp)

> **Info**
>
> This creates a new component with a text field that will be editable in the Theme Editor.

## Step 3: Add the New Component to the Header

1. **Navigate** to the *templates/components/common/header.html* file
2. **Add** the following to the header.html file just before the `</header>` tag:

```text showLineNumbers={false}
{{#if customer.customer_group_id "==" theme_settings.cg_banner_id_num}}
    {{> components/common/customer-group-special}}
{{/if}}
```

![Adding the customer group component to the header](/_fern-img/e0f1cfe949eadd987865f0e7f8e9b8ab4e290f5c1e80043141255895936109af.webp)

> **Info**
>
> This makes the new component render in the header, if a customer in a specific group is logged in. The target group will be specified within the theme editor.

## Step 4: Create a New custom.scss File

1. **Navigate** to the *assets/scss* directory
2. **Create** a new file in the assets/scss directory named *custom.scss*
3. **Paste** the following scss into the new file:

```scss showLineNumbers={false}
.cg-banners {
    background-color: stencilColor("cg-background-primary");
    color: stencilColor("cg-banner-text");
    text-align: center;
    padding: 3px;

    p:last-child {
        margin-bottom: 0;
    }

    a {
        color: color("whites", "bright");
    }
 }
```

## Step 5: Import the new *custom.scss* File in the theme.scss File

1. **Navigate** to the *templates/assets/scss/theme.scss* file
2. **Add** the following at the bottom of the file:

```scss showLineNumbers={false}
@import "custom";
```

## Step 6: Create Key Value Pairs in config.json for the Customization Defaults on the New Component

1. **Navigate** to the *config.json* file in the main theme directory
2. **Add** the following to the top of the "settings" section of the config.json file:

```text showLineNumbers={false}
"cg_banner_message": "special customer group text",
"cg_banner_id_num": "1",
"cg-background-primary": "#bbbbbb",
"cg-banner-text": "#ffffff",
```

> **Info**
>
> "cg\_banner\_id\_num": "1", needs to match the customer group id for the group being tested against. In order to do this, you must have a customer group, have a customer in that group, and be logged in as that customer on the localhost.

## Step 7: Add to schema.json to Allow the New Component to be Customized Through Theme Editor

1. **Navigate** to the *schema.json* file in the main theme directory
2. **Add** the following to the top of the Header section's settings in the schema.json file:

```json showLineNumbers={false}
{
  "type":"heading",
  "content":"Customer Group Banner"
},
{
  "type":"text",
  "label":"Customer Group Banner Message",
  "id":"cg_banner_message",
  "force_reload":true
},
{
  "type":"text",
  "label":"Customer Group ID",
  "id":"cg_banner_id_num",
  "force_reload":true
},
{
  "type":"color",
  "label":"Customer Group Banner Text color",
  "id":"cg-banner-text"
},
{
  "type":"color",
  "label":"Customer Group Banner Background Color",
  "id":"cg-background-primary"
},
```

> **Info**
>
> You will be able to preview your changes through Page Builder once the theme has been deployed.