Using the Stencil Theme Editor
The Stencil Theme Editor is a point-and-click interface that allows you to change the storefront's look without manually entering code. It offers a selection of options for easily changing colors, fonts, image sizes, and more. After making changes in Stencil Theme Editor, you can save all your changes without publishing them live on your storefront. The changes will only appear on your storefront when you click "Publish".
Accessing the Theme Editor
To get started, go to Storefront › My Themes, then click Customize.
Your storefront will load in a new tab on your browser with the Style Customization panel on the left and the Preview panel on the right.
The Style Customization panel contains all of the controls that allow you to modify the look and feel of your theme. For example, here you’ll be able to update your theme’s typography (fonts and font sizes) and colors. The controls that are available in this panel will vary from theme to theme.
The Preview panel allows you to immediately preview your changes across mobile, tablet, and desktop to see how your store will look to your shoppers across these devices.
Choosing a Theme Style
Theme styles allow you to completely change your store’s look and feel at the click of a button. All styles let you change the color scheme to match your brand.
1. Click the Styles menu to reveal your current theme’s available styles.
2. Click a style to load it in the preview panel.
3. To apply the style to your live storefront, click Publish.
Customizing a Theme Style
In addition to the styles menu, each Stencil-based theme includes controls which allow you to further customize your storefront to best suit your brand.
Colors can be customized anywhere you see a hex color value and color thumbnail by a menu item.
Click the color thumbnail and a color picker will display.
Select a color from the color picker or enter in a hex color value and your theme will update automatically to reflect your selection. The hex color value requires a #.
If you know you're going to reuse colors in your theme, click the "+" button under the color picker to create a palette.
Typography and Icons
The Typography and Icons menu allows you to customize your theme’s fonts, font sizes, text, and icon colors. Select from the drop-down menus to adjust font families and sizes, or use the color picker to customize text and icon colors.
Can I change the listed fonts? The fonts listed for the theme are pre-selected by the theme developer. If you want to add your own fonts, post in the Ask a Design Partner Community Group for assistance.
The Products menu adjusts how the product listings or product cards are displayed. Product cards refer to how products are displayed on category pages or the home page. In Theme Editor you can change:
- Number of Related Products
- Number of products per page on Categories
- Image sizes
The labels may vary from theme to theme.
For more information about what is included with your theme editor, check the theme's manual available on Storefront › My Themes.
As you make changes to the options in the Style Customization Panel, the Preview Panel will automatically update to reflect your customizations. In addition, you can use the three device icons displayed at the top of the Preview Panel to review how your store looks on mobile, tablet, and desktop devices.
Saving and Publishing Your Changes
Once you are finished with your changes, you can apply it to your store right away or save it for later.
- Publish — publishes your changes to your live storefront.
- Save — saves your current changes. The changes will load when you click Customize on the My Themes page again.
- Clear — reset your theme customizations to the most recent saved version.
- Reset Theme Variant — a button in the Style Customization Panel that will revert the chosen Style Variation to its default stylization.
There are many other things that you can control in Theme Editor, such as adding credit card logos or removing the 'Powered by BigCommerce' from the footer. See the list below for common customization requests:
- Adding Payment Logos to Stencil Themes — display credit card logos in your footer
- Removing 'Powered by BigCommerce' from Stencil Themes — remove the BigCommerce branding from your store's theme
- Resizing Your Logo — using Theme Editor to resize your logo image
- Adjusting Store Image Sizes — changing the size of product thumbnail images and more
Downloading and Uploading Custom Themes
- Downloading a theme
- Customizing the Downloaded Files
- Custom theme upload requirements
- Uploading a custom theme
- Renaming a custom theme
- Deleting a custom theme
These instructions are for downloading and uploading custom themes for stores that have one of our Stencil themes. For help customizing legacy Blueprint themes, see Accessing and Customizing Template Files (Blueprint).
The BigCommerce Marketplace allows you to download the source files to customize themes available in the My Themes section.
Downloading a Theme
After you purchase a Stencil theme (or acquire a free theme), it's available in Storefront › My Themes. From there, you can download the theme and customize it:
1. Under My Themes, click on the Advanced drop-down of the current theme or the Action Icon on an inactive theme.
2. Click on Theme Options to display the Download Options.
Download current theme* — downloads any edits you have made in Theme Editor and currently have live on your store
Download Saved Theme — downloads the most recent edits you have made in Theme Editor but is not live on your store
Download Original Theme — downloads the default theme without any edits made in Theme Editor
* This option will only appear in the dropdown menu if you are downloading a theme that is currently live on your storefront.
3. Save the .zip file to your computer. You need Stencil CLI framework to unzip the file.
Customizing the Downloaded Files
Making customizations to Stencil themes requires the use of the Stencil CLI framework. This requires in-depth knowledge of web development. For installation details, please see the Stencil CLI developer documentation. For specifics on unzipping downloaded themes and working with them, see the Download a Theme section.
Important! While you are free to customize and change the code for your own store, the original creators of the theme retain the rights to the theme. You must not upload the customized theme to another theme marketplace or sell it privately.
Custom Theme Upload Requirements
- A maximum of 20 custom themes may be uploaded to the My Themes section. This includes any themes created via Make a Copy.
- Custom themes can be deleted to make room for more uploads if you reach your max.
- Custom themes must be archived and uploaded in ZIP file format using Stencil CLI framework.
- Custom theme ZIP files must be equal to or less than 50MB in file size.
- For a complete list of upload requirements, error codes and warnings, check our developer support article on Uploading a Custom Theme.
Uploading a Custom Theme
1. Go to Storefront › My Themes.
2. Click the Upload Theme button by the My Themes heading below the Current Theme.
3. Drag the ZIP file into the Upload Theme pop-up window, or you can Select theme from your computer.
4. Once the ZIP file has uploaded, a theme card will appear under My Themes showing theme processing progress. Click Cancel if you want to halt processing and start over.
5. After processing, a new custom theme card will appear under My Themes. If your theme was unable to be successfully processed, you will be presented with a screen detailing any errors encountered. Ensure your theme meets all the custom theme upload requirements.
Custom Theme Actions
1. Go to Storefront › My Themes.
2. Under the My Themes heading, click the theme you want to rename. Only non-active themes (themes not currently applied to your store) that you have uploaded or copied can be renamed.
3. Click the Action Icon to see the drop-down, then click Rename.
4. In the Rename your theme pop-up window, enter the new name for your theme, then click Rename Theme.
5. You will be returned to the Store Design main screen with a message that the theme was successfully renamed.
Deleting a Custom Theme
1. Go to Storefront › My Themes.
2. Under the My Themes heading, click the theme you want to delete. Only non-active themes (themes not currently applied to your store) can be deleted.
3. Click the Action Icon drop-down, then click Delete.
4. In the You are about to delete your theme pop-up window, confirm you want to the delete the theme by clicking Delete Theme.
5. You will be returned to the Store Design main screen with a message that the theme was successfully deleted.
Creating Custom Template Files
Custom Templates allow you to change the layout of brand, category, product, and web pages from the default layout to best suit your store and brand.
For instructions on creating Blueprint templates refer to Creating Custom Template Files.
Creating the custom template involves advanced Web development. If you are not comfortable writing and editing code, we recommend getting in touch with one of our BigCommerce Partners.
Creating a Custom Template
Creating custom templates requires authoring the HTML files, then using Stencil developer tools to package and upload them to the appropriate location.
For more detailed instructions, please see our Stencil developer documentation on Custom Themes.
Applying a Custom Template
A custom template can be applied to brand, category, product and web pages (e.g., home, about us, etc) from your store’s control panel.
Currently, it is not possible to assign a template layout via bulk import.
1. Go to Products › Brands then select the brand or create a new brand to apply the custom template.
2. In the Template Layout File section, select the name of the custom template file.
3. Save your changes.
Why don't I see this option on the brands page? The ability to customize template files for brands is exclusive to Stencil Themes. If you are using a Blueprint Theme, it is not available. To learn more about the differences see The Stencil Theme Platform.
1. Go to Products › Categories then select the category or create a new category.
2. In the Template Layout File section, select the name of the custom template to apply.
3. Save your changes.
1. Go to Products › View, then select a product or create a new product.
2. Click the Other Details tab.
3. Scroll to the Template Layout File drop-down, and select your custom template.
4. Save your changes.
1. Go to Storefront › Web Pages, then select a web page or create a new one.
2. Scroll to the Template Layout File drop-down, and select your custom layout file.
3. Save your changes.
Editing Stencil Theme Files
The Stencil Theme Editor offers the option of direct browser access to the code that makes up the theme, without having to install Stencil CLI (command-line interface). This is ideal for making minor adjustments to the 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)
- 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 theme from the marketplace. Copied themes are considered a custom theme and will not receive Marketplace Theme Updates.
1. Go to Storefront › My Themes and click on the Advanced 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.
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 pop-up 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 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.
Once saved, you can preview the theme by clicking the Preview button.
Applying New Theme to Storefront
When you are happy with your changes, click Save to repackage the edited theme.
1. Navigate to Storefront › My Themes, then scroll down to the list of your themes.
2. Click on the Theme you copied and edited.
3. 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 live on the storefront.
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 Technical Support is unable to edit code or make design changes.
Adding Custom Scripts to Stencil Themes
Many third-party applications and services rely on the ability to inject custom scripts into a website’s footer in order to function. Most apps will automatically inject these scripts in the correct location. On some occasions, it may require copying and pasting the script.
Using the Script Manager
The Script Manager records injected code or scripts from apps. This makes organizing your installed scripts convenient to view and edit individually. To access the Script Manager, go to Storefront › Script Manager. If you need to copy a script, click the Create a Script button, give it a name, select a location and select the Script Type Script to paste the script a box. See Using Script Manager for more details.
Can I add custom HTML code outside of my site’s footer? It is possible to paste code in other template files using Edit Theme Files. Keep in mind that the script may not be compatible with the Stencil framework. For further assistance check out our BigCommerce Partner Directory or ask your question in the BigCommerce Community Ask a Design Partner Group.
Handlebars in Stencil Footer
Handlebars is a templating language used to develop and customize Stencil themes. For example, you can use Handlebars to reference theme-wide variables like your store’s name or logo. Third-party apps could use Handlebars to reference customer information, in order to display loyalty offers specific to the person logged in.
To learn more about using Handlebars in Stencil themes, see our developer documentation on Developing with Handlebars.
Analytics and Conversion Tracking Scripts
Analytics and conversion tracking scripts are usually added to the header or checkout. The following articles detail how to add these scripts to your store.
Don't see the customize button?
- If you see the buttons Customize Update and Update, it means there is an update available for your theme. See Marketplace Theme Updates for more information.
Will making changes in the Editor change my store?
Where do I apply a custom page layout for product pages?
- The Template File section is found on individual products under the Other Details tab.
- Any changes made in Theme Editor will only be visible in the preview panel, even if you click the Save button. The changes will go live on the storefront when you click Publish.
Why can't I find a menu listed in this article in my Theme Editor?
- Articles are written with the theme Cornerstone as a base. Most themes have the basic framework of Cornerstone. However, what is included and how it is named in the Stylization Menu is up to the developer. If you are unable to find what you want to change, you may need to use Edit Stencil Theme Files or Ask a Design Partner.
Why do I have to make a copy of the theme?
- 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..
How do I edit a theme 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.