Creating Custom Template Files (Blueprint)
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 that 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.
Creating the Custom Layout Template File
1. Go to Storefront Design › My Themes, then click Edit HTML/CSS.
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.
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.
Uploading the File
To make the new template file available to use, it must be uploaded 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.
Assigning the Layout File
Assigning a custom layout file to a category
1. Go to Products › Product Categories, then click Action › Edit to the right of the category you want to assign the custom layout file to.
2. Scroll to the Template Layout File drop-down and select your custom layout file.
3. Save your changes.
Assigning a custom layout file to a product page
1. Go to Products › View, then click Action › Edit to the right of the product you want to assign the custom layout file to.
2. Click the Other Details tab.
3. Scroll to the Template Layout File drop-down and select your custom layout file.
4. Save your changes.
Assigning a custom layout file to a web page
1. Go to Storefront Content › Web Pages, then click Action › Edit to the right of the web page you want to assign the custom layout file to.
2. Scroll to the Advanced Options section to find the Template Layout File drop-down and select your custom layout file.
3. Save your changes.
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 Ask a Design Partner Group for assistance. Due to our Design Policy, our Techincal Support is unable to edit code or make design changes.