Browse by Topic

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". 

These instructions cover the basic steps for using the Theme Editor on the Stencil theme platform. For information about customizing our legacy Blueprint themes, see Blueprint Style Editor.

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.

Image pointing out the Style Customization panel and Preview panel in the Stencil Theme Editor.

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.

Style Selection Menu

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.


Theme Editor will vary based on the theme. It is up to theme developers what to include as features in Theme Editor and how to name it. 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.

Customizing Colors

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.

Example of the Stencil Theme Editor's color picker.

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.

User-added image


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
  • Colors 
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.

Preview Panel

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.

Preview buttons

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.

Save and Publish buttons

  • 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. 

Common Customizations

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:

Was this article helpful?