Using the Stencil Theme Editor

The BigCommerce Theme Editor allows you to change your site’s look without manually entering code. Its point-and-click interface lets you to choose from multiple pre-designed styles or pick your own colors, fonts and more. 

These instructions cover the basic steps to use Theme Editor on the Stencil theme platform. For information about customizing Blueprint themes, see Blueprint Style Editor

Accessing the Theme Editor

1. To get started, go to Storefront Design › My Themes, then click Customize.

Customize Button


See different buttons? 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.

Your storefront will load in a new tab 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) or colors. The controls that are available in this panel will vary from theme to theme.


Theme Editor may vary based on theme. It is up to theme developers to include features in Theme Editor. The Cornerstone theme editor usually includes all the most recent feature updates.

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 design at the click of a button.

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.


Will this change my store? Any changes made in Theme Editor will only be visible in the preview panel. The changes do not go live on the store until you click Apply Theme.

3. To apply the style to your live storefront, click Apply Theme. Otherwise, follow the instructions below to begin customizing the style.

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.

Customizing Colors

Colors can be customized anywhere you see a hex color value and color thumbnail below a menu item.

1. Click the color thumbnail and a color picker will display.

Example of the Stencil Theme Editor's color picker.

2. Select a color from the color picker and your theme will update automatically to reflect your selection.

If you know you're going to re-use colors in your theme, click the "+" button under the color picker to create a palette.

3. Click anywhere away from the color picker to close it.

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 allows you to select the maximum number of products that display in various areas and pages of your store, such as the number of featured or new products that display on the home page, or the number of products that display per page on category pages. From here you can also customize the colors used in product listings or product cards and control the default Image Sizes.

User-added image

Previewing Your Changes

As you make changes to the options in the Style Customization Panel, your storefront will automatically update to reflect your customizations. In addition, you can use the three device icons displayed at the bottom of the Preview Panel to review how your store looks on mobile, tablet, and desktop devices.

User-added image

Saving and Publishing Your Changes

Once you are finished with your changes, click Apply Theme, then OK in the confirmation popup. This will publish your changes to your live storefront.

If you want to make the changes live later, click Save Changes. This will save your current changes and load them when you’re ready to customize your store again.

Clicking Clear Changes will reset your theme customizations to the most recent saved version.

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: 

Additional Resources 

Go to My Themes in my store

Was this article helpful?