Implementing Custom Templates in BigCommerce [Steps + Types]

Implementing custom templates in BigCommerce is like a plan for how your online store functions. It helps you to make your store look unique with aesthetic designs and gives a seamless user experience for customers.

Online businesses move faster according to the transforming industry. It is important to make your store stand out compared with your competitors. Developers and store owners can add their unique style to their online shops using custom layout templates with the stencil framework, which we are going to talk about next. 

If you’re starting fresh and also changing an existing design, BigCommerce can help you with the tools to create an ecommerce store that’s attractive and user-friendly. This guide will take you through the simple steps of creating and applying these templates to various types of storefronts.

4 Types of Storefront Pages

BigCommerce provides a custom template feature for the below storefront pages.

1. Brand pages: This page basically includes a page title, meta description, meta title, and search keywords. You can also add a custom URL and upload a logo if required. 

2. Category pages: On this page, you can allocate categories to storefronts, whereas multiple storefronts can have the same category name and URL path. 

3. Product pages: With the help of this page, you can assign custom layout templates to product pages. 

4. Page pages: You can create user-defined plain-text pages, contact forms pages, and HTML markup pages.

3 Primary Steps to Create a Custom Template

The below steps are here to guide you in creating custom templates for different types of storefronts. Step 1: Make a new folder as a “custom” under the “templates/pages” directory for your custom template.

Step 2: Inside the “templates/pages/custom” folder, create subfolders for brand, category, product, and page. 

Step 3:  Make an “HTML template” file under the respective subfolder. 

Example: custom-product.html

Check the Custom Template from Local Environments

Testing a custom template from your local environment is a crucial step to ensure that your online store looks and functions as expected before making it live for customers to see.

Map the URL with the Template

Follow the following steps to link your template to a URL is essential for local testing:

• Each URL should point to an existing brand, category, product, or web page in your store.
• The trailing slash in each URL is optional.
• Your HTML files must be in the brand, category, product, or page subdirectories.
• Convert special characters to their URL-encoded equivalents.
• To test your custom templates locally, edit the .stencil or config.stencil.json file to create mappings. 
• Put a URL ( to these pages: product, brand, category, webpage) to set up the mapping.
• After editing your .stencil or config.stencil.json files, restart Stencil to see the changes locally.

config.stencil.json

"customLayouts": {
 "product": {
 "custom-product.html": "/custom-product-url/"
 },
 "brand": {},
 "category": {},
 "page": {}
}

Map and Check Multiple URLs from the Local Environment

Map multiple URLs to test various product URLs with multiple templates while working in a local development environment. Here’s how to do it:

"customLayouts": {
 "product": {
 "custom-product.html": ["/custom-product-url", "/custom-product-second-url"],
 "coming-soon-product.html": "/coming-soon-product"
 },
 "brand": {},
 "category": {},
 "page": {}
}

Configure a Custom Template on the Store’s Control Panel

Give your store a unique touch by customizing its brand, categories, products, and web pages with custom templates. You can customize each item separately while bulk import does not provide template layout assignments. Following are the steps to apply custom templates for each storefront type.

1. Brands

1. Navigate to “Products > Brands“.
2. Choose an existing brand or make a new one.
3. In the “Template Layout File” section, choose the custom template from created it.
4. Save your changes, and take a look at your brand with the new template.

2. Categories

1. Navigate to “Products > Product Categories”.
2. Choose an existing category or make a new one.
3. In the “Template Layout File” section, pick the custom template from created it.
4. Click Save to update the category page right away with the new template.

3. Products

1. Navigate to “Products > View“.
2. Choose an existing product or make a new one.
3. Select “Storefront Details” in the left menu.
4. Pick a custom template from the drop-down menu.
5. Save your changes to see the product page look different with the new template.

4. Web Pages

1. Navigate to “Storefront > Web Pages” or “Channel Manager > Edit Storefront Settings > Web Pages”.
2. Choose an existing web page or make a new one.
3. Scroll down to the “Template Layout File” and pick the custom template from created it.
4. Save your changes to update the web page right away with the new template.

Create Custom Templates in BigCommerce with Klizer

Creating a custom template in BigCommerce lets you design your online store just the way you want it, matching your brand and business perfectly. You can be creative and make a store look unique on your storefront pages by following the above steps.

At Klizer, we’re dedicated to helping businesses to provide enterprise ecommerce solutions. For expert assistance in creating custom templates for your Bigcommerce store, BigCommerce Development Services or our ecommerce experts are here to help you create the perfect solution.