Using the Stencil Theme Editor

The BigCommerce Theme Editor allows you to change your site’s look with no coding required. 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 Stencil-based themes. For information about customizing Blueprint themes, see Blueprint Style Editor

Accessing the Theme Editor

1. To get started, go to Storefront DesignMy Themes, then click Customize.

Example of a Stencil Theme's Customize button.

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.

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

Products

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.

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.

Animated image showing the Apply Theme > OK actions.

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.

Additional Resources

 There are other things that you can control in Theme Editor, such as adding credit card logos or removing the 'Powered by BigCommerce' from the footer.  

Check out our Community Answers for specific questions.

Was this article helpful?