In the next few posts we’ll go over customizing a stencil Theme using the stencil command-line interface we’ll start by focusing on the config.json file in the templates directory you should already have the stencil CLI and the cornerstone base theme installed here.

I’ve got the locally installed cornerstone theme up in my IDE which I’m using IntelliJ IDEA Community Edition I’ve already initialized the CLI and launched the theme on localhost 3000 so I’ve got the local store pulled up in another window remember you can find full documentation on the files we’re about to see at stencil Bigcommerce.com/docs.

The first piece we’ll look at is the config.json file this file sets the defaults for your theme structure and appearance and has many functions it lets you create theme variations and provides metadata about your theme like its features and purchase, price it also lets you set global settings and variables like font colors and image sizes that can be used across the store these variables can then be managed with the theme editor.

We’ll take a deeper dive into the theme editor in a later post when creating a new theme you can set information like the themes name purchase price listed features and documentation links at the top of the config JSON file.

I’ll update this metadata now below the themes metadata you’ll see settings this is where you can set display oriented key names and values that are global to the theme variables like the ones shown here bring dynamic values into the framework SAS uses these global variables to import the values in a later post.

We’ll cover using these variables to add user options to the theme editor but here we can see some default hex color values assigned to variables for different parts of the homepage carousel I can pull up one of the SCSS files for the carousel and see the variable here that pulls in that hex color in config.json.

I’ll update the default color for the carousel title to blue this propagates to the CSS file and now in my browser window I can see the change reflected on the local store you can create custom variables in config.json as well farther down in the config file you should see variations.

Here you can create style variations for your theme you can set things like each variations name demo store URL in which industries the variation is optimized for you can also create variation level settings to set your variation specific defaults for things like fonts and colors if you want to preview your variation on your local store, launch the CLI with the stencils start V command.

Next let’s look at the templates folder this directories contents provide structure for storefront pages it’s divided into three sub directories components Layout and pages components are code snippets and partials that can be reused throughout the theme this subdirectory is grouped by component type I’ll open up the common subdirectory and I can see components that are used across a storefront like the header and footer before I make any changes up the local storefront and have a look at the footer I’ve got page navigation, category navigation, brands, store location information, newsletter sign up, Social Media Icons and theme credits.

Here now I’ll open up the footer component file and make some edits I may for example want to remove two social media icons from the footer because I want to use them somewhere else in the theme.

There’s a handlebars partial here that pulls in the social media icon component I can cut this partial out and if I want to paste it into a different component like the header I may also want to add more theme credit information so I can add plain text in HTML here to give additional credit info I could also create my own component.

Here I’ll add a new HTML file in the common subdirectory name test I’ll just put some plain text in here and now I’ll call this new component into my footer in the column where I remove the social media icons now let’s look at the storefront again and view all of my changes.

Now let’s look at the next subdirectory in templates layout. Layout files let you define the storefronts overall structure if I open the default layout file based each html here are some of its contents handlebars expressions to pull in my style sheets header scripts from the control panel and here we’ve got a logic statement stating that if the cookie privacy notifications are set to on in the store control panel then to show that component on the store.

Now I may want to have a clean landing page with no header or footer before a customer enters the site to shop I’ll create a new layout page in the directory named landing simple I’ll paste the contents of the base layout file in and I’ll remove the header and footer components.

We’ll add this new layout to a page here in a minute to see how it looks the last section of the templates directory is pages. Pages call resources from components and layouts I’ll open up home HTML for our sites home page at the top of this file there are yellow frontmatter attributes which allow you to configure how much information is returned and displayed on the page.

This first section for example is for configuring product components new products featured products and top-selling products each of these can be limited to show two three eight or however many products we want instead of having a value set here though we’re using variables.

Now you may recognize these variables from the config.json file where their default values are set if I swap back to the config.json I can for example set the number of top-selling products to two then if I swap over to the local storefront I can see as it refreshes that this section is reduced to displaying two products now at the bottom of home.html.

You’ll notice it’s pulling in the layout file I want to swap out the base layout for the new one I created a minute ago if I update this expression to layout slash landing simple it should apply my new layout that excludes the header and footer.

Now I’ll refresh the storefront and we can see those areas now disappear from the home page you can also create custom page files but that requires a few additional steps and we’ll cover that in a later post you should now however understand how to make basic edits to the config.json file and two files within the template directory in the next post we’ll explore the assets and Lang file directories you or contact us now if you need help with customizing a theme – config.json and templates directory.

The post Customizing a Theme (Part 1) – Config.json and Templates Directory – Bigcommerce Tutorial :) appeared first on BigCommerce.How.