Browse by Topic

Accessing and Customizing Template Files (Blueprint)


This requires editing the code of your store. See Getting Help for avenues of assistance.

These instructions cover the basic steps to locate template files for our legacy Blueprint themes and edit the HTML/CSS using the in-browser editor. For information about customizing Stencil themes, see Stencil Themes.

With Blueprint Themes, you can access to the theme template files directly in your browser. This allows you to make changes to the HTML/CSS which can change the theme design, omit content or paste in a required script for a third-party app.

Before you edit templates. Always create a backup of your current template files before attempting to make any changes to them.


Accessing Your Theme's Template Files

Go to Storefront › My Themes, if your current theme is a Blueprint theme, then click Edit HTML/CSS


The theme must be live on the storefront. You can only access the template files if the Blueprint theme is the theme active on your storefront.


The template file editor will display with your theme's homepage template file, Default.html, in the editor screen.



The left sidebar panel contains two lists of files, Files used by this template and Other Template Files.

Left sidebar list of files.

  • Files used by this template — contains a list of Panels and Snippets which are referenced in the template file you are currently editing
  • Other Template Files — contains a list of all of the HTML and CSS files which make up your theme, organized by file type; Style Sheets, Layouts, Panels and Snippets.

File Contents

The File contents for [current file] section displays the HTML or CSS code for the file you have selected. Make your code changes in this section and click Save to apply them to your live store.

The Default.html file contents.


The top row of the template file editor contains buttons which perform the following actions.

The template file editor buttons.

  • Save — saves and applies your template changes to your live store
  • Close — closes the template file editor and takes you back to your control panel
  • Close & Refresh — closes the template file editor and refreshes your control panel
  • Toggle Editor — enables syntax highlighting and row numbers in the File contents section of the screen
  • Recent Files — displays a list of recently viewed files when clicked
  • Revert to Original — restores the contents of the current file to its original state, prior to any customizations being applied. Note that this does not revert the file to its most recently-saved version.

Editing Template Files in Your Browser

The BigCommerce template file editor allows you to make changes to your theme’s HTML and CSS files directly in your browser. This makes it easy to add HTML or scripts from third party apps. We recommend using the template file editor for quick, simple changes. Anything you save on the editor goes live to your store immediately.


Need to edit the JavaScript files? The JavaScript files listed in the template files are read-only. These files cannot be saved in the template file editor. To make changes to the JavaScript files must be uploaded to your store's server via WebDAV in order to have them applied to your store.


Uploading Template Files via WebDAV

To upload files with webDAV, you will need to download them and edit them on your local computer. 


Can I change the folder names? The folder names are referenced throughout the theme, so changing the folder names could have unintended consequences. It is possible to add folders to the template folder, as described in Replacing Images in Your Theme.

1. Connect to your store through WebDAV.

2. You should see the Template folder in the list of folders.
Template folder

3. Find the folder you saved to your computer with the changes you want to apply. Drag the folder from your computer to the template folder into your WebDAV client. When the upload finishes, the changes will be applied to your storefront.


Don't feel comfortable adjusting your design or want to work with an expert? Check out our BigCommerce Partner Directory, or consider using the Community Jobs Board to post design and customization job requests and connect with third-party developers. Due to our Design Policy, our Techincal Support is unable to edit code or make design changes.

Was this article helpful?