In this tutorial we’re continuing the series on customizing a stencil Theme using the stencil command-line interface this time we’ll focus on the Lang and assets directories as always you can find full documentation on the files we’re about to see at stencil.bigcommerce.com/docs.

Once again I’ve got my locally installed theme open in my IDE and the storefront open on localhost 3000 first we’ll look at the laying directly this directory stores language files which can be used to provide translation for the themes content the directory itself and the en.json file inside it must both be present for a stencil theme to work upon opening the en.json file.

You’ll see key value pairs similar to those in the config json file at the top of the file we can see a section for the Footer there are arbitrary key names for column titles that appear in the footer each key has a text string specifying the wording that will appear on the storefront.

We can see how these are invoked by looking at the footer file found in templates components common the first column appearing the footer is using the laying handlebar helper with the key footer navigate to pull in the associated text string value navigate I can update the text string for this key in the en.json file from navigate to site nav and see the text change on the storefront.

After it’s refreshed you can create new key value pairs as well for example at the bottom of the footer there’s the powered by bigcommerce message in plain text if I want to offer a translation of the powered by I’ll need to turn this plain text into a translation key I’ll swap back to the en.json file and under the footer section add another key powered underscore by and a corresponding texturing value powered by back in the footer file.

I’ll now update the plain text powered by 2 Lang footer dot powered underscore by the text on the storefront won’t change in this exam but now we can create translations for it should we add other language files.

Now I’ll create a new language file to offer translation in Spanish when creating new language files you should name them based on the bcp 47 specifications of language and region codes in this case only my file is MX json for Spanish Mexico.

Now I’ll copy over the footer section from the en json file to get a small chunk of key values to work with and next update the values to Spanish translations that I want to see my translations on the local storefront I’ll need to force my browser to send the right accept language header the stencil framework automatically detects this to determine which language to show to a shopper.

I’m using Chrome so I’ll go to settings and then advanced settings click languages and add Spanish Mexico and drag it to the top of the languages list so it’s the first priority swapping back to the tab with the local storefront I can now see my translations after refreshing.

Next let’s stay with the footer to look at the assets directory this directory is split into five sub directories SCSS image fonts icons and j/s the s CSS sub directory contains the theme CSS resources and is further divided into more sub directories I’ll open the layouts footer directory and open the footer a CSS file within this file we can see static CSS styling as well as keys to pull in values that you can define in config.json.

For example here’s a section for the copyright information the text alignment is static but the text color is using the color – text secondary key from config.json now I may want this to be styled independently of other elements that are using this key.

So I can create a new key in config json and assign the key here in my SCSS file swapping to config.json I’ll add the new key color – powered by and assign the hex value for hot pink then I’ll swap back to the footer dot s CSS and update the assigned key to the newly created color – powered by after refreshing the local store the new pink color now appears since I’ve created a new key value pair for this element I can later add this as a configurable option within the theme editor looking back at the footer SCSS file.

Next to the key you’ll see stencil color this is one of several Custom Sass Functions available within stencil this function is what pulls in the key name that we’ve defined in config.json and returns the hex color value the other custom sass functions currently available are stencil font family stencil font weight stencil number and stencil string make sure to check the documentation at stencil.bigcommerce.com/docs for details on all of the custom sass functions.

Next let’s look at the image subdirectory this contains images related to the themes display like sprites and background images that don’t involve store content for example I may want to have a seasonal background image on my store footer I can drop that image into this directory when I reference the image on the footer CSS file I want to use a short relative path to avoid 404s once the theme is on a production store after refreshing I see my new footer background image on the local store.

Next is the fonts folder this folder is for installing custom fonts into your theme that may not be available as web fonts we’ll look at adding fonts to a theme in the next post the last two folders are icons which stage SVG’s for use within the theme and j/s which holds the themes JavaScript files we’ll cover these more in depth in later posts to recap we’ve covered adding and editing language files and explore the various sub directories within the assets directory in the next post we’ll look at adding custom page files fonts and icons or contact us now if you need help with customizing a theme – lang and assets directories.

The post Customizing a Theme (Part 2) – Lang and Assets Directories – Bigcommerce Tutorial :) appeared first on BigCommerce.How.