Editing Stencil Theme Files
What We'll Cover
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).
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.
- 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.
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.
It may take a few seconds for the theme to be copied.
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.
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.
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.
- 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.
- Code Panel — this is where you edit the code of the selected file
- Preview — will display a preview of your store, based on your last save
- Save File — will save the file currently open and recompile the theme
- Save All Files — will save all open files and recompile the theme
You can search for elements within a file by pressing Ctrl+F or Cmd+F.
Saving Theme FilesWhen 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.
Once saved, you can preview the theme by clicking the Preview button.
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.
Check your storefront to see your changes in action.
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.
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.
3. Click Apply Theme to make the previous version the live active version..
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.
- Stencil Developer Documentation
- Getting Started with Stencil Framework video tutorials
- BigCommerce Community
- BigCommerce Partners