Learn how to create powerful, custom templates in BigCommerce to differentiate your storefront and grow your brand.
the author
Adam Ritchie
Ecommerce Contributor
share this post
While there are a wide variety of BigCommerce themes available, you still might not be able to find exactly what you’re looking for.
That’s no problem — you can always make your own BigCommerce custom templates from scratch and then add them to your theme. In this guide, we’ll show you how.
Build custom templates with ShogunShogun makes it easy to create new custom templates for your BigCommerce storeGet started now
Creating a New Template File for Your Store’s Theme
Those who have some web development experience can add custom template files to their BigCommerce theme by using Stencil CLI.
Of course, you’ll first need to write the code for your custom template file using HTML. Some best practices for doing so include:
Establish a visual hierarchy of information: What is the main purpose of your page template? Whether you’re trying to collect customer information, promote a product launch, or whatever else, this key goal should be featured at the very top of the page. Then, any other elements you need in the template (product recommendations, contact info, etc.) should be included in descending order of importance.
Simplify your color scheme: Too many colors would be overstimulating — you want to keep the customer focused on whatever action it is that you want them to take (purchase a product, fill out a survey, etc.). For the backgrounds and text of your template, use no more than five different colors.
Use the <body> tag: While this tag isn’t necessary for most users, omitting it can cause problems on older browsers.
Close all your tags: You should also make a habit of closing your tags — open tags won’t be an issue on some browsers, but for others your code won’t render properly.
Minify your code: Use as little code as necessary to build your BigCommerce custom template. The less code you add, the faster any page that uses the template will load. And the faster your site loads, the less likely visitors will be to back out before placing an order. There are many freeonlinetools available that can automate this task for you.
After using HTML to custom-code a BigCommerce page template, you can add it to your theme by following these steps:
Download a copy of your theme files.
In your theme files, create a new subdirectory named “custom” in the “templates/pages” directory.
In the new “templates/pages/custom” subdirectory, create new subdirectories titled “page”, “product”, “category”, and “brand”.
Add your HTML template file to the “page”, “product”, “category”, or “brand” subdirectory, depending on what type of page you’ve designed a custom template for.
To bundle your theme and upload it back to your store after making edits (more on this below), you must set the following permissions:
New subdirectories: 755 (drwxr-x-r-x)
New files: 644 (rw-r–r–)
And here are a few key points worth noting when it comes to mapping your custom page template to a URL on your BigCommerce store:
The mapped URL must point to a page that has already been configured on your store — a placeholder URL for a nonexistent page won’t work.
Special characters should be converted into their URL-encoded equivalents.
Remember to always save a copy of your current theme before making any edits. Having this backup ready will allow you to quickly undo any mistakes you might make — otherwise, such errors could cost you countless hours (and who knows how many lost sales) to clean up.
Also, it should be mentioned that the process we just described for creating a BigCommerce custom template only applies to Stencil, BigCommerce’s latest theme framework engine.
If you’re still using a Blueprint theme (this was BigCommerce’s theme platform up to November 2016), here are a couple points to keep in mind when creating a custom template for your store:
Brand pages are a new feature for Stencil themes, so you will not be able to create custom templates for brand pages on a Blueprint theme.
For Blueprint themes, the file names for custom templates must start with an underscore.
Build custom templates with ShogunShogun makes it easy to create new custom templates for your BigCommerce storeGet started now
Whenever you’re done making your edits, the final step to creating a BigCommerce custom template is uploading the updated theme files back into your account:
Stencil CLI allows you to bundle your theme into a zip file. This file should only be a few megabytes — there’s an upload limit of 50 MB, and anything even approaching that size could cause problems.
If your theme file is an appropriate size, you can go ahead and upload it through the BigCommerce control panel. Log into your BigCommerce account and select the “Storefront” option in the left sidebar of the main dashboard.
Select the “Themes” option.
Click on the “Upload Theme” button, then drag and drop the zip file from your personal computer files into the designated space.
Applying Templates in the BigCommerce Control Panel
Once you’ve added a custom template to your theme, you will also be able to assign the template to pages on your site using the BigCommerce control panel.
To do this for a product page:
Select the “Products” option in the left sidebar of the main dashboard.
Select “View” to open up a list of your product pages.
Select the product page you would like to apply your custom template to.
Scroll down to the “Storefront details” section, open the “Template Layout File” dropdown menu, and select your custom template.
For category pages:
As with applying a custom template to a product page, the first step here is to select the “Products” option in the left sidebar of the main dashboard.
Select “Product Categories” to open up a list of your category pages.
Select the category page you would like to apply your custom template to.
Use the “Template Layout File” dropdown menu to select your custom template.
For web pages:
Select the “Storefront” option in the left sidebar of the main dashboard.
Select the “Web Pages” option.
Select the web page you want to apply your custom template to.
Scroll down to the “Advanced Options” section, open the “Template Layout File” dropdown menu, and select your custom template.
And, finally, for brand pages:
Select the “Products” option in the left sidebar of the main dashboard.
Select the “Brands” option.
Select the brand page that you want to customize.
Scroll down to the very bottom of the settings page and use the “Template Layout File” dropdown menu to select your custom template.
Creating Custom Templates Using Shogun
You can also use Shogun to create custom templates for your BigCommerce store.
Shogun’s visual editor provides you with all the tools you need to create ecommerce content. There are many different pre-made elements to choose from when building pages — you can arrange these elements however you want on the page and customize the content and styling of each element as needed.
There are three ways to create reusable content for the visual editor in Shogun: saving portions of pages as snippets, saving entire pages as templates, and using Custom Elements to manually code reusable sections.
Snippets
Feature description: You can save any piece of content you make within the visual editor as a reusable snippet. That way, you’ll be able to save time by adding the snippet to another page with just a couple clicks. You also have the option to turn snippets into global snippets — whenever you make changes to a global snippet, those edits will automatically be applied on every page where the global snippet is included.
Use cases:
Design a custom featured products section that matches the established visual style of your website and brand, turn it into a snippet, and add it to all of your product pages.
Create a global snippet that details your hours of operation. Whenever you must make an update, you’ll then only need to make this change once — there’s no need to go in and manually edit every page that contains the same information.
Steps to execute:
Log into your BigCommerce account and select the “Apps” option in the left sidebar of the main dashboard.
Open Shogun.
Select the page you would like to customize — this will open the page in Shogun’s visual editor.
Use the element library and other editing tools to create the section that you would like to reuse later.
Select the section — the customization options in the right sidebar will include a “Create snippet” button.
In the “Create snippet” settings, you can determine whether your new snippet is global (changes are automatically applied to all snippets) or not.
Templates
Feature description: While snippets allow you to save a portion of a page, templates give you the ability to save an entire page design for future use.
Use cases:
It might take hours for you to design the perfect product page for your particular needs — once you’ve saved one page as a template, you’ll be able to skip this process for every other item in your catalog.
If your BigCommerce store has a blog, designing one reusable template for all of your blog posts will also save you a ton of time.
Steps to execute:
Open Shogun and select “Build or edit a page”.
Choose whether you want to start from scratch or use one of Shogun’s pre-built templates.
After adjusting the styling and functionality of the page as needed, open the dropdown menu located in the top-right corner of the visual editor and select “Save as template”.
Custom Elements
Feature description: This feature allows you to use HTML, CSS, and JavaScript to custom-code anything you need for your BigCommerce store. Once a custom element has been created, it can then be accessed through the visual editor’s element library.
Use cases:
Create interactive features for your store, such as cards that open when clicked or a virtual product configurator that allows customers to see what optional add-ons actually look like.
You could custom-code an entire page and then save that as a reusable template — while it’s faster and easier to use the visual editor to build templates, this method will give you full control over every aspect of the page.
Steps to execute:
Open Shogun and select “Developer tools”.
Click on the “Create new…” button.
Add your code.
Once you’re done coding, save and publish your changes — you’ll then be able to find your custom element listed as an option in the visual editor’s element library.
Overall, Shogun will allow you to save time while creating high-quality pages that convert more of your visitors into paying customers.
For example, the BigCommerce brand Lyre’s turned to Shogun as a solution for managing their online presence in the eight international markets they serve, which each have their own website.
The ability to save pages as templates and create reusable snippets was a gamechanger for Lyre’s. Tasks that once took weeks now only take a day or two. Across their eight websites, Lyre’s used Shogun to create nearly 700 pages, saving 100+ hours of development time compared to their previous process.
Badgley Mischka, another BigCommerce brand, was also able to make their web development efforts much more efficient by switching to Shogun. They have used Shogun to build and update over 100 pages, saving over 200 hours (145 hours on their homepage updates alone) as well as $30,000 in development costs.
You could very well see similar results for your store. From your homepage to landing pages to your Contact Us page, you’ll be able to quickly build just about anything your BigCommerce store needs with Shogun.
Build custom templates with ShogunShogun makes it easy to create new custom templates for your BigCommerce storeGet started now
