Lab - Theme Editor Text Fields

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

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:

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

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:

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

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:

.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:

@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:

"cg_banner_message": "special customer group text",
"cg_banner_id_num": "1",
"cg-background-primary": "#bbbbbb",
"cg-banner-text": "#ffffff",

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:

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