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. 

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

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

Customize Button

 

See update 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 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.

 

Will this change my store? 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 Apply Theme.

3. To apply the style to your live storefront, click Apply Theme

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.

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

Products

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 Featured products
  • number of New Products
  • Number of products per page on Categories
  • Image sizes
  • Colors 
The labels may vary from theme to theme. 

User-added image

For more information about what is included with your theme editor, check the theme's manual available on Storefront Design › My Themes.

Previewing Your Changes

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.

User-added image

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. 

  • Apply Theme — publishes your changes to your live storefront.
  • Save Changes — saves your current changes. The changes will load when you click Customize on the My Themes page again.
  • Clear Changes — 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?