Creating Custom Template Files (Blueprint)

These instructions apply to free Blueprint themes that have not been customized. The BigCommerce Support Team is unable to assist with issues that occur after applying them to a previously customized theme. As always, we recommend backing up your current theme customizations before making any changes.

Don't feel comfortable adjusting your design or want to work with an expert? Check out our BigCommerce approved agencies or our Community Forum. Due to our Design Policy, our Techincal Support is unable to edit code or make design 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. In this article we'll guide you through the steps of creating a custom category layout file based off of your theme's default category layout file. These same steps can be applied to product and web page layout files.

Creating the Custom Layout Template File

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

1137-edit-html-css.png

2. In the list of Other Template Files on the left, select category.html.

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 such as Notepad or TextEdit.

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

5. Save the file. The file name must begin with an underscore (_), and end in .html. For example, _CustomCategory.html.

You may now use this file as a starting point for your custom category layout file, and edit its contents to suit your needs.

Uploading the File

1. Connect to your store's server with a WebDAV client.

2. Upload your custom layout file to the template folder.

Assigning the Layout File

Assigning a custom layout file to a category

1. Go to ProductsProduct 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 ProductsView, 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

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 ContentWeb Pages, then click ActionEdit to the right of the web page you want to assign the custom layout file to.

edit page

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

page template

3. Save your changes.

Was this article helpful?