Editing Stencil Theme Files

The Stencil Theme Editor offers you the option of direct browser access to the code that makes up your theme, without having to install Stencil CLI (command-line interface). This is ideal for making minor adjustments to your theme that cannot be done directly within Theme Editor, or for adding scripts to integrate apps.

These instructions cover the basic steps to access Stencil-based themes’ template files and edit their code using the in-browser editor. For information about customizing legacy, Blueprint themes, see Accessing and Customizing Template Files (Blueprint).

 

This is an advanced feature, and requires knowledge of HTML/CSS and Handlebars. For major design adjustments, or new theme development, we recommend that you or your developer use Stencil CLI, which provides access to all theme files. See Getting Help for avenues of assistance.

Limitations

The following features are not available with Edit Theme Files:

  • Editing assets like font files, .SVG files, or other image files
  • Editing a theme’s config.json or schema.json configuration files (although you can view their contents)
  • Have up to 10 files open, simultaneously, in the File Editor.
  • Editing any JavaScript files
  • Concurrent editing is not supported. For a given store, only one instance of the editor should be opened at any time.

Accessing Edit Theme Files

To access Edit Theme files, you need to be working on a copied version of the theme. It is not accessible from the default version of the theme. Copied themes are considered a custom theme and will not receive Marketplace Theme Updates

 

Why do I have to make a copy? Creating a copy of your theme allows you to make changes to your storefront design but retain a clean version of the theme. You can edit a Copied Theme even if it is live on your storefront by selecting Edit Theme Files from the Advanced drop-down menu.

1. Go to Storefront Design › My Themes and click on the Advance drop-down menu of the current theme.

Make a Copy Option

2. From the Advanced drop down menu, select Make a Copy.

3. You will be prompted to name the copied theme. Type in a name, then click Save a Copy.

Copy Theme Prompts

It may take a few seconds for the theme to be copied.

Processing Theme

4. Click on the action icon of your copied theme, then click on the Customize option to open it from the Theme Editor or Edit Theme Files to open the in-browser editor directly.

Customize Menu

 

Want to Edit a Variation? When you copy a theme it will bring up its default variation when you click customize. To make edits to a variation, select it from the Style menu before proceeding.

5. In Theme Editor, click the Edit Theme Files tab to open the code panel.

Edit Theme File Tab

 

Using Google Chrome? If you are trying to open Edit Theme Files in Google Chrome, check your popup blocker and set it to allow pop-ups on this page.

Editing Theme Files

When you click the Edit Theme Files tab in the Theme Editor, it replaces the preview panel with the theme’s underlying code. The tab’s left-hand side shows you the theme’s files, in a tree of nested folders. Files and directories that should only be edited by the original theme developer are hidden from this view. To edit those files, you will need to use Stencil CLI.

File Editor

  1. Theme Files — these are the folders and files that make up your theme. Click on a blue folder to open it. Click on a blue .html or .scss file to edit it. Greyed-out files are Read-Only. They can be altered only using Stencil CLI.
  2. Code Panel — this is where you edit the code of the selected file
  3. Preview — will display a preview of your store, based on your last save
  4. Save File — will save the file currently open and recompile the theme
  5. Save All Files — will save all open files and recompile the theme

The file editor color-codes elements within your source HTML, for easy identification and will auto-suggest HTML as you type. It also includes the ability to Undo and Redo edits. The file editor allows for a mix of HTML, Handlebars statements, SCSS, and JavaScript tags in your theme’s template files. See our Developer Documentation on Handlebars Syntax and Helpers

You can search for elements within a file by pressing Ctrl+F or Cmd+F.Search Box

 

Can I add JavaScript files? You can add JavaScript < script > tags to the html, but you cannot add or edit JavaScript files with the File Editor. To add or edit JavaScript files, you must use the Stencil CLI.

Saving Theme Files

When you click the Save File or Save All Files button, it will recompile and repackage the theme files with your changes. You can then preview the revised theme and (if you choose) apply it to your store. Saving and compiling might take a few minutes to complete, depending on the complexity and number of the changes.

Save Buttons

Once saved, you can preview the theme by clicking the Preview button.

Preview Sample

Applying New Theme to Storefront

1. When you are happy with your changes, click Save to repackage the edited theme.

2. Navigate to Storefront Design › My Themes, then scroll down to the list of your themes.

3. Click on the Theme you copied and edited.

4. Next to the Design Options drop-down, click Apply and go through the prompts.

Apply Prompt

Check your storefront to see your changes in action.

Reverting Theme

After applying the new theme, if things are not working, you can go back to the original theme or revert to an earlier edit.

1. Click the Customize button on an active theme or select customize under the action icon on an inactive theme.

Customize Button

2. Click the History tab to see a list of saved versions. Click the version to revert to or click Download Version to revert to the original downloaded file version.

Theme History tab

3. Click Apply Theme to make the previous version the live active version..

Getting Help

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 Ask a Design Partner Group for assistance. Due to our Design Policy, our Techincal Support is unable to edit code or make design changes.

Additional Resources

Go to My Themes in my store

Was this article helpful?