Accessing and Customizing Template Files (Blueprint)


These instructions cover the basic steps to locate template files for our legacy Blueprint-based themes  and edit the HTML/CSS using the in-browser editor. For information about customizing Stencil themes, see Uploading Custom 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.

We recommend that you only edit the template files if you are familiar with HTML/CSS. If you are not comfortable making changes to the code, we recommend working with one of our Design Experts or requesting help in our Community


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 Design › Design Options, then click Edit HTML/CSS.

Edit HTML/CSS button

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.


Did you know? JavaScript files can not be saved in the template file editor. Changes to 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.

Additional Resources

Was this article helpful?