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".
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.
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.
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.
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.
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.
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
For more information about what is included with your theme editor, check the theme's manual available on Storefront › My Themes.
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.
- 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.
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
- Adjusting Store Image Sizes — changing the size of product thumbnail images and more