Using the Stencil Theme Editor
What We'll Cover
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.
Accessing the Theme Editor
1. To get started, go to Storefront Design › My Themes, then click Customize.
Your storefront will load in a new tab 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) 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.
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.
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. Simply select from the drop down menus to adjust font families and sizes, or use the color picker to customize text and icon colors.
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.
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.
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.
Additional ResourcesThere 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.
- Cornerstone Theme Manual - learn about the features available in the Cornerstone Theme Editor
- Adding Payment Logos to Stencil Themes - display credit card logos on your footer
- Removing 'Powered by BigCommerce' from Stencil Themes - remove the BigCommerce branding from your store's theme
- Adding Custom Scripts to Stencil Themes - inject custom scripts to your Stencil Theme
- BigCommerce Design Policy - where to find help edit code or make design changes.
Need more information? Ask in our Community Answers for your specific needs.