Accessing and Customizing Template Files (Blueprint)
What We'll Cover
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 Custom Templates.
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
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.
- 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.
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 top row of the template file editor contains buttons which perform the following actions.
- 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.
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.
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.
- BigCommerce Template Files
- Replacing Images in Your Theme
- Referencing Assets in a Theme
- Backing Up Your Store
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 Design Group for assistance. Due to our Design Policy, our Techincal Support is unable to edit code or make design changes.