How to Add Template File on BigCommerce

BigCommerce knows that your website design can make all the difference in the world. The average user’s life is hectic.

Abandoned shopping carts aren’t unheard of in eCommerce. Yet, if your website maintains your customer’s attention better, they may finish their purchase before switching tabs or going out to run errands.

So, it all comes down to design and the templates you use in your store.

Discover how you can take control of your eCommerce store design using BigCommerce.

How to Add Template Files to BigCommerce

You can add templates to BigCommerce in the following ways:

BigCommerce Store

BigCommerce hosts a store with a variety of themes ready to install. They range in price from free up to $300. The themes can be sorted by collection, industry, free, and premium content.

When you find one that you like, click on the Install or Buy button. Each theme preview comes with a list of features as well as what it’s optimized for. You can also get a preview of each theme before you click the Install button.

Customization via Stencil

The stencil is the framework that BigCommerce themes are built upon. However, you don’t necessarily need to use one of their themes for your business. You can also assign custom layout templates for different parts of your store including:

• Product
• Brand
• Category
• Page

If customization is what you’re looking for, you need to start by creating and bundling custom templates with BigCommerce’s Stencil CLI tool. When you’re ready, there are a couple of options to get your file ready for uploading via Stencil CLI:

1. Bundle Only

Use the “stencil bundle” command to create a zip file that you can upload to your BigCommerce store. If you want to check on your file’s progress and completion, use the “bundle” command. This command also lets you know about any errors that may prevent the file from bundling.

Keep in mind, too, that BigCommerce has a hard limit of 50MB for file sizes.

2. Bundle and Push

Only use the “stencil push” command if you initialized with a Stencil CLI token. Using this command will bundle and upload in one process. However, if you are unsure whether your file qualifies for a “bundle and push,” check these requirements first:

• Initialized theme using Stencil CLI token with “Themes: modify scope”
• Installed a version of Stencil CLI 1.12.0 or higher

You can check your version of Stencil using the “stencil -V” or “stencil –version” prompt on the command line.

Not everybody can upload a theme in one single process. If you’re bundling and uploading in a separate process, this is how to push the theme to BigCommerce:

• After successfully uploading, choose Y/N to upload the theme to your storefront
• If Yes, use the arrow keys to choose the variation

Once you choose “Y,” you’ll have to pick your variations immediately afterward. If you’d like to apply the new upload to your store later, select “N” instead.

How Do I Customize a BigCommerce Template

To customize a legacy Blueprint theme, check out these steps:

• Go to Storefront
  
• Click on My Themes
  
• Select Edit HTML/CSS
  
• Make color changes in the Default.html editor screen
• Save changes

It’s important to note that if you want to use this method, you can only access the Blueprint template files if they’re live on the storefront.

If you’re using a Stencil theme, follow these instructions for customization:

• Go to Storefront
  
• Click on My Themes
  
• Select Customize
  
• Make changes
• Select Publish to make changes appear in your storefront

When using Page Builder to customize your Stencil themes, you can change a variety of aspects like text size and colors. You can also add different visual elements, such as banners, carousels, and images using a user-friendly drag and drop method. Alternatively, you can use the blocks of custom HTML to make your necessary changes.

Just remember that you can save without publishing the changes to appear in your storefront.

Where to Find BigCommerce Templates

One of the simplest places to find new BigCommerce templates is in their store. They have different theme styles available to fit most needs, and many of their most popular styles won’t cost you a dime!

Some third-party websites also sell templates compatible with BigCommerce. These templates can range in price, though, so be ready to spend some money if you go this route.

Of course, you can always have a template custom-designed for your store. This is by far the priciest option, so you may want to check out all other avenues first before looking into this one.

How to Edit HTML Templates for BigCommerce

There are a couple of ways to edit an HTML template if you’re using a Blueprint theme. To edit a live theme in your browser:

• Go to your Storefront
  
• Click on My Themes
  
• Select Edit HTML/CSS
  

Editing in your browser is a great way to make quick and simple changes. Anything you save in the editor goes live immediately.

How to Use Stencil to Add a Single Custom Template Layout File on BigCommerce

If you need a custom template inside of the Stencil framework, BigCommerce lets you do that too. First, you need to set-up your local copy:

• Create the custom subdirectory in the “templates/pages” directory
• Create the HTML template files and place them in the custom subdirectories
• Edit and map URLs to your “.stencil” file

When you are finished creating your theme locally, you can bundle and push the file to BigCommerce.

Additional FAQ

How Can I Create New Templates for BigCommerce?

You can install Stencil CLI to customize templates locally and bundle them for upload to stores.

How Do I Update My BigCommerce Homepage?

Your homepage contains a combination of widgets and banners. You can choose to enable or disable them. Or, you can go to Marketing and then Banners to create a banner for the Homepage.

Additionally, you can just create a new webpage and check the box verifying that you want to display it as your store’s homepage.

What Is Stencil in BigCommerce?

The stencil is the theme framework that BigCommerce uses to allow users to choose between using eCommerce templates or completely customizing a site.

How Do I Edit a BigCommerce Theme?

It depends on what type of theme you’re using. If you’re using a legacy Blueprint theme, these are the steps to edit it:

• From your Storefront, click on My Themes

• Click on Edit HTML/CSS button

• Make color changes in the Default.html editor screen

• Click on the Save button when you’re done with the changes

If you’re using a Stencil theme, follow these steps instead:

• Go to Storefront

• Select My Themes and then Customize

• Make changes

• Click on Publish to make changes appear in your storefront

How Do I Customize My BigCommerce Template?

Your customization options depend on which type of template you’re using. In general, you can go to your Storefront and then My Themes. From there, you may either select “Edit HTML/CSS” or “Customize” to make your changes.

Don’t Settle for a Generic Store

Sure, you can use a template to get your store up and running. However, you will also run the risk of it looking like other storefronts. Or even worse, it could look like your competitor’s online store!

However, with a few simple tweaks, you can customize your storefront to make it as unique as your business. Play around with colors, fonts, and images until you get a store that you’re proud to call your own.

Have you customized your BigCommerce templates? Tell us about it in the comments section below.