Using the Stencil Theme Editor
What We'll Cover
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.
Accessing the Theme Editor
1. To get started, go to Storefront Design › My Themes, then click Customize.
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.
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 design at the click of a button.
1. Click the Styles menu to reveal your current theme’s available styles.
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 only 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.
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.
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.
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 Featured products
- number of New Products
- Number of products per page on Categories
- Image sizes
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.
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.
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
- Cornerstone Theme Manual — learn about the features available in the Cornerstone Theme Editor
- Adding Custom Scripts to Stencil Themes — inject custom scripts to your Stencil Theme
- BigCommerce Design Policy — where to find help with code or make design changes
- Marketplace Theme Updates — how to preview a theme update
- Editing Stencil Theme Files — accessing the in-browser code editor for Stencil themes