Creating Custom Template Files (Blueprint)

 

Blueprint Only

These instructions only apply to our free, legacy Blueprint themes that have not been customized. If you are using a Stencil theme, see Stencil Custom Templates. As always, we recommend backing up your current theme customizations before making any changes.

Creating a custom layout template file is one way to give your categories, product pages, and/or web pages a unique look and feel. This can be useful if you have a group of products need a different layout than the default. In this article we'll guide you through the steps of creating a custom layout file based off of your theme's default layout files.

 

 This is an advanced feature, and requires knowledge of HTML/CSS. See Getting Help for avenues of assistance.

Creating the Custom Layout Template File

1. Go to Storefront Design › My Themes, then click Edit HTML/CSS.

Edit HTML/CSS button

2. In the list of Other Template Files on the left, select category.html for a custom category layout, product.html for a custom product page layout or page.html for a custom webpage layout.

Other template files

Use Ctrl F or Command F to quickly locate template files in the list.

3. Copy the entire contents of the file, and paste it in to a plain text editor installed on your computer such as Notepad or TextEdit.

 

Be careful! Be sure to only use a plain text editor for this process. Word processors such as Microsoft Word will add unnecessary information to the code and break it.

5. Make your desired changes in the plain text editor. Then Save the file with a new name beginning with an underscore (_), and ending in .html. For example, _CustomCategory.html.

 

What changes can I make? There are many things you can accomplish editing the template files. If you are trying to achieve a certain look or not sure what to change, see BigCommerce Template Files (Blueprint) or ask in Community Answers.

Uploading the File

To make the new template file available to use, it must be uploaded via WebDAV.

1. Connect to the store via WebDAV.

2. Upload your custom layout file to the template folder. This will make it appear in the drop-down menus in the steps below.
Template Folder in WebDAV

Assigning the Layout File

Assigning a custom layout file to a category

1. Go to Products › Product Categories, then click ActionEdit to the right of the category you want to assign the custom layout file to.

Edit category

2. Scroll to the Template Layout File drop-down and select your custom layout file.

Category template

3. Save your changes.

Assigning a custom layout file to a product page

1. Go to Products › View, then click ActionEdit to the right of the product you want to assign the custom layout file to.

Edit product

2. Click the Other Details tab.

Other details tab

3. Scroll to the Template Layout File drop-down and select your custom layout file.

Product template

4. Save your changes.

Assigning a custom layout file to a web page

1. Go to Storefront Content › Web Pages, then click ActionEdit to the right of the web page you want to assign the custom layout file to.

Edit web page

2. Scroll to the Advanced Options section to find the Template Layout File drop-down and select your custom layout file.

page template

3. Save your changes.

Related Articles

Getting Help

Don't feel comfortable adjusting your design or want to work with an expert? Check out our BigCommerce Partner Directory or ask your question in the BigCommerce Community for assistance. Due to our Design Policy, our Techincal Support is unable to edit code or make design changes.

Was this article helpful?