Creating Custom Template Files (Blueprint)

What We'll Cover

• Creating the custom layout template file

• Uploading the file

• Assigning the Layout File

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 recommendbacking 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.

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.

In some versions of the control panel, this is located under Setup & Tools › Set up your store › Design.

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

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 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.

In some versions of the control panel, this is located under Store Setup › Design.

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.

In some versions of the control panel, this is located under Web Content › Web Pages.

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

3. Save your changes.