In this tutorial we’ll look at some examples that tie together directories we’ve already looked at we’ll add a Custom page template custom fonts and icons. First we’ll create a custom page stencil supports custom templates for brands, categories, products and web content pages before creating custom pages you must create the appropriate subdirectories in the templates pages directory.

First I’ll create custom then the four sub directories inside of it you in this example I’m going to create a custom product page template because I want to make a size Chart available for the t-shirts on my store inside the new custom product subdirectory.

I’ll create a new file product size chart HTML I want to be able to preview my work as I go so now I need to map this custom page to an existing URL on the Live Store to do this I must add –it the dot stencil file for my theme opening up the dot stencil file it already provides sections in which to add your custom page mappings under the products section I’ll add my new file named product – sighs – chart and map it to the URL for my product Larry – Bowie – tee if I swap to my local storefront.

I now get a blank page when I navigate to that product as the custom product file is currently empty I’ll copy paste the contents of the default product HTML page in so I have a base to work with refreshing the local store.

I can now see the normal product page layout right here behind the description tab is where I want to create a new tab that will hold my size chart from here I’m going to drop the size chart into the assets image directory now the area with the product description tab can be found in templates components products this file here product view HTML at the bottom of this file we can see here where the tab is created for the product description and the warranty.

If the product has that information filled out below that is where components and snippets are pulled in to display information for those tabs I don’t want to edit this particular file because I have products on my store that aren’t t-shirts so I wouldn’t want the size chart showing on those instead I’ll copy the contents of this file and paste them into a brand new file under the templates components products directory I’m going to make a new file product – view size chart dot HTML then I’ll paste the contents of the original product view file inside.

Now I want to edit the custom page template to make sure it pulls in this new product view size chart component I’ll update the component name now let’s swap back to the product view size chart component and make my edits I want my size chart to show up behind the product description.

So we’ll create a new list item after the description I want to retain the existing styling for the tab and tab title so I’ll be reusing those classes here on the new list item and anchor I’ll point the link destination to the arbitrarily named tab – sighs – chart element which I’ll be creating shortly for the text on our tab title there are two options I could put in plain text size chart or I could create a language key in the en json file and use the Lang helper to pull in the text specified by the key.

In this case I’ve created a language key which you can see here in my en json file I’ll invoke the key using the Lange helper then the key name product size chart now if I swap back to the local storefront I can see my new tab but when I click on it nothing happens.

So now I need to add my tab content swapping back to my product view size chart file I now want to create a new div within this existing tab contents div again I want to retain the existing styling so I’ll use the tab – content class on my new div but I’ll give it the ID tab – sighs – chart so that my href link farther up the page works inside this div.

I’ll use the handlebars helper that’s custom dis tensile CDN to call in my size chart picture from the assets image directory the CDN helper assumes the assets directory by default so it’s not necessary to include that in the file path if I view the local store again I can now see the size chart in the appropriate tab once you’ve bundled the theme and applied it to the live store store administrators can assign the new custom page template by editing a product clicking the other details tab and selecting the appropriate template from the template layout file drop-down menu.

Next let’s look at adding custom fonts stencil supports google fonts so using these is quite simple I’ll open up the config dot JSON file and here we can see fonts assigned for body headings and logo keys you’ll notice the values assigned to these have Google designated at the front when using a Google font you’ll always want to have this Google designation then the name of the Google font you want to use I’ll update all three of these defaults to Google days one for the body google chewie for the headings and google cookie for the logo after refreshing the local store.

We can now see the new fonts in use now let’s look at using a non Google font I’ve got a font file downloaded fancy font TTFN first I want to drag and drop this into the assets fonts directory within my theme now I’ll add the following to the head section of the templates layout based HTML file.

If you’ve made custom templates in the layout directory make sure to add this to each template where you want to use the font now that the font is called into the layout I can set one of my font defaults in config.json to use the custom font I’ll update the logo font key to use the value fancy font upon refreshing my storefront we can see the logo font change.

We’ll look at adding new fonts as theme editor options in a later post last let’s look at adding new icons there are a number of icons present in the base theme already like the social media and accepted payment type icons in the store footer these icons are staged in the assets icons directory I want to replace the Pinterest icon  that appears in my stores footer here on the local store you can see the current icon and here’s the icon I’ll be replacing it with I’m going to drop my new SVG into the icons directory and overwrite the existing one upon refreshing a storefront.

You’ll notice the icon hasn’t updated in the base theme grunt was used to combine our available SVG icons into a sprite the sprite is then loaded in through the base HTML layout file now that we’ve replaced one of the icons will need to use grunt to update the sprite I don’t have grunt installed yet so.

I’ll open up a new instance of bash and install it globally with the following command I’ll navigate into my theme directory and run the  command grunt SVG store this updates the icon FS HTML file which is in templates components common icons upon refreshing the local store I can see the Pinterest icon has updated to recap we covered creating custom page templates and adding custom fonts and icons in the next post we’ll look at customizing the theme editor which will allow users to make theme changes without touching code you or contact us now if you need help with customizing a theme – custom pages, fonts, and icons.

The post Customizing a Theme (Part 3) – Custom Pages, Fonts, and Icons – Bigcommerce Tutorial :) appeared first on BigCommerce.How.