Browse by Topic

Stencil Themes

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

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.

 
 

Using the Stencil 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.

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.

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.

 

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 edit your 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.

Click the color thumbnail and a color picker will display.

Color Picker

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.

Typography and Icons

 

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 Related Products
  • Number of products per page on Categories
  • Image sizes
  • Colors 

The labels may vary from theme to theme. 

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

Preview Panel

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.

Landscape buttons

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.

Save Buttons

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

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:

 
 

Downloading and Uploading Custom Themes

These instructions are for downloading and uploading custom themes for stores that have one of our Stencil themes. For help customizing legacy Blueprint themes, see Accessing and Customizing Template Files (Blueprint).

The BigCommerce Marketplace allows you to download the source files to customize themes available in the My Themes section.

 

Before you download! Customizing Stencil themes requires in-depth knowledge of web development and use of the Stencil CLI framework.  Per our Design Policy, our technical support team is unable to provide assistance with custom themes. See our developer articles for support resources.

Downloading your Stencil theme allows you to have a version of your theme downloaded onto your computer. This is required if you want to develop a custom theme using the Stencil CLI framework. Making changes to your theme in CLI gives you full access to the JavaScript files that are not available in the theme editor. It also acts as a backup of your current theme set up. 

Downloading a Theme

After you purchase a Stencil theme (or acquire a free theme), it's available in Storefront  My Themes. From there, you can download the theme and customize it:

1. Under My Themes, click on the Advanced drop-down of the current theme or the Action Icon on an inactive theme.

Download Menu

2. Click on Theme Options to display the Download Options. 

Download current theme* — downloads any edits you have made in Theme Editor and currently have live on your store
Download Saved Theme — downloads the most recent edits you have made in Theme Editor but is not live on your store 
Download Original Theme — downloads the default theme without any edits made in Theme Editor

This option will only appear in the dropdown menu if you are downloading a theme that is currently live on your storefront.

3. Save the .zip file to your computer. You need Stencil CLI framework to unzip the file. 

Customizing the Downloaded Files

Making customizations to Stencil themes requires the use of the Stencil CLI framework. This requires in-depth knowledge of web development. For installation details, please see the Stencil CLI developer documentation. For specifics on unzipping downloaded themes and working with them, see the Download a Theme section.

 

Important! While you are free to customize and change the code for your own store, the original creators of the theme retain the rights to the theme. You must not upload the customized theme to another theme marketplace or sell it privately.

Custom Theme Upload Requirements

  • A maximum of 20 custom themes may be uploaded to the My Themes section. This includes any themes created via Make a Copy
  • Custom themes can be deleted to make room for more uploads if you reach your max.
  • Custom themes must be archived and uploaded in ZIP file format using Stencil CLI framework.
  • Custom theme ZIP files must be equal to or less than 50MB in file size.
  • For a complete list of upload requirements, error codes and warnings, check our developer support article on Uploading a Custom Theme.

Uploading a Custom Theme

1. Go to Storefront › My Themes.

2. Click the Upload Theme button by the My Themes heading below the Current Theme.

Upload Button

3. Drag the ZIP file into the Upload Theme pop-up window, or you can Select theme from your computer.

Drag Theme Here

4. Once the ZIP file has uploaded, a theme card will appear under My Themes showing theme processing progress. Click Cancel if you want to halt processing and start over.

Processing Module

5. After processing, a new custom theme card will appear under My Themes. If your theme was unable to be successfully processed, you will be presented with a screen detailing any errors encountered. Ensure your theme meets all the custom theme upload requirements.

New Theme Card

 
 

Custom Theme Actions

1. Go to Storefront › My Themes.

2. Under the My Themes heading, click the theme you want to rename. Only non-active themes (themes not currently applied to your store) that you have uploaded or copied can be renamed.

3. Click the Action Icon to see the drop-down, then click Rename.

Rename Option

4. In the Rename your theme pop-up window, enter the new name for your theme, then click Rename Theme.

5. You will be returned to the Store Design main screen with a message that the theme was successfully renamed.

Deleting a Custom Theme

1. Go to Storefront › My Themes.

2. Under the My Themes heading, click the theme you want to delete. Only non-active themes (themes not currently applied to your store) can be deleted.

3. Click the Action Icon drop-down, then click Delete.

Delete Option

4. In the You are about to delete your theme pop-up window, confirm you want to the delete the theme by clicking Delete Theme.

5. You will be returned to the Store Design main screen with a message that the theme was successfully deleted.

 
 

Creating Custom Template Files

Custom Templates allow you to change the layout of brand, category, product, and web pages from the default layout to best suit your store and brand.

For instructions on creating Blueprint templates see Accessing and Customizing Template Files (Blueprint).

 

Creating the custom template involves advanced Web development. If you are not comfortable writing and editing code, we recommend getting in touch with one of our BigCommerce Partners

Creating a Custom Template

Creating custom templates requires authoring the HTML files, then using Stencil developer tools to package and upload them to the appropriate location.

For more detailed instructions, please see our Stencil developer documentation on Custom Themes.

Applying a Custom Template

A custom template can be applied to brand, category, product and web pages (e.g., home, about us, etc) from your store’s control panel.

Currently, it is not possible to assign a template layout via bulk import.

Brands

1. Go to Products › Brands then select the brand or create a new brand to apply the custom template. 

2. In the Template Layout File section, select the name of the custom template file.

Brand Template Layout File

3. Save your changes.

 

Why don't I see this option on the brands page? The ability to customize template files for brands is exclusive to Stencil Themes. If you are using a Blueprint Theme, it is not available. To learn more about the differences see The Stencil Theme Platform.

Categories

1. Go to Products › Categories then select the category or create a new category.
2. In the Template Layout File section, select the name of the custom template to apply.

Custom Category

3. Save your changes.

Product

1. Go to Products › View, then select a product or create a new product.
2. Click the Other Details tab.
3. Scroll to the Template Layout File drop-down, and select your custom template.

Custom Product

4. Save your changes.

Web Page

1. Go to Storefront › Web Pages, then select a web page or create a new one.

2. Scroll to the Template Layout File drop-down, and select your custom layout file.

Custom Web Page

3. Save your changes.

 
 

Editing Stencil Theme Files

The Stencil Theme Editor offers the option of direct browser access to the code that makes up the theme, without having to install Stencil CLI (command-line interface). This is ideal for making minor adjustments to the theme that cannot be done directly within Theme Editor, or for adding scripts to integrate apps.

These instructions cover the basic steps to access Stencil-based themes’ template files and edit their code using the in-browser editor. For information about customizing legacy, Blueprint themes, see Accessing and Customizing Template Files (Blueprint).

 

This is an advanced feature, and requires knowledge of HTML/CSS and Handlebars. For major design adjustments, or new theme development, we recommend that you or your developer use Stencil CLI, which provides access to all theme files. See Getting Help for avenues of assistance.

Limitations

The following features are not available with Edit Theme Files:

  • Editing assets like font files, .SVG files, or other image files
  • Editing a theme’s config.json or schema.json configuration files (although you can view their contents)
  • Editing any JavaScript files
  • Concurrent editing is not supported. For a given store, only one instance of the editor should be opened at any time.

Accessing Edit Theme Files

To access Edit Theme files, you need to be working on a copied version of the theme. It is not accessible from the default theme from the marketplace. Copied themes are considered a custom theme and will not receive Marketplace Theme Updates

1. Go to Storefront › My Themes and click on the Advanced drop-down menu of the current theme.

Make a Copy

2. From the Advanced drop down menu, select Make a Copy.

3. You will be prompted to name the copied theme. Type in a name, then click Save a Copy.

Enter New Theme Name

It may take a few seconds for the theme to be copied.

4. Click on the action icon of your copied theme, then click on the Customize option to open it from the Theme Editor or Edit Theme Files to open the in-browser editor directly.

Customize Card Menu

5. In Theme Editor, click the Edit Theme Files tab to open the code panel.

Theme Editor Section

 

Using Google Chrome? If you are trying to open Edit Theme Files in Google Chrome, check your pop-up blocker and set it to allow pop-ups on this page.

Editing Theme Files

When you click the Edit Theme Files tab in the Theme Editor, it replaces the preview panel with the theme’s underlying code. The tab’s left-hand side shows you the theme’s files, in a tree of nested folders. Files and directories that should only be edited by the original theme developer are hidden from this view. To edit those files, you will need to use Stencil CLI.

Edit Theme File Screen

  1. Theme Files — these are the folders and files that make up your theme. Click on a blue folder to open it. Click on a blue .html or .scss file to edit it. Greyed-out files are Read-Only. They can be altered only using Stencil CLI.
  2. Code Panel — this is where you edit the code of the selected file
  3. Preview — will display a preview of your store, based on your last save
  4. Save File — will save the file currently open and recompile the theme
  5. Save All Files — will save all open files and recompile the theme

The file editor color-codes elements within your source HTML, for easy identification and will auto-suggest HTML as you type. It also includes the ability to Undo and Redo edits. The file editor allows for a mix of HTML, Handlebar statements, SCSS, and JavaScript tags in your theme’s template files. See our Developer Documentation on Handlebars Syntax and Helpers

You can search for elements within a file by pressing Ctrl+F or Cmd+F.

Search Box

Saving Theme Files

When you click the Save File or Save All Files button, it will recompile and repackage the theme files with your changes. You can then preview the revised theme and (if you choose) apply it to your store. Saving and compiling might take a few minutes to complete, depending on the complexity and number of the changes.

Preview and Save Buttons

Once saved, you can preview the theme by clicking the Preview button.

Preview Sample

Applying New Theme to Storefront

When you are happy with your changes, click Save to repackage the edited theme.

1. Navigate to Storefront › My Themes, then scroll down to the list of your themes.

2. Click on the Theme you copied and edited.

3. Next to the Design Options drop-down, click Apply and go through the prompts.

Apply Theme to Store Prompt

Check your storefront to see your changes in action.

Reverting Theme

After applying the new theme, if things are not working, you can go back to the original theme or revert to an earlier edit.

1. Click the Customize button on an active theme or select customize under the action icon on an inactive theme.

Customize Button

2. Click the History tab to see a list of saved versions. Click the version to revert to or click Download Version to revert to the original downloaded file version.

Revert History Menu

3. Click Apply Theme to make the previous version live on the storefront.

Getting Help

Don't feel comfortable adjusting your design or want to work with an expert? Check out our BigCommerce Partner Directory or ask your question in the Ask a Design Partner Group for assistance. Due to our Design Policy, our Technical Support is unable to edit code or make design changes.

 
 

Adding Custom Scripts to Stencil Themes

Many third-party applications and services rely on the ability to inject custom scripts into a website’s footer in order to function. Most apps will automatically inject these scripts in the correct location. On some occasions, it may require copying and pasting the script. 

Using the Script Manager

The Script Manager records injected code or scripts from apps. This makes organizing your installed scripts convenient to view and edit individually. To access the Script Manager, go to Storefront › Script Manager. If you need to copy a script, click the Create a Script button, give it a name, select a location and select the Script Type Script to paste the script a box. See Using Script Manager for more details.

Script Manager

 

Can I add custom HTML code outside of my site’s footer? It is possible to paste code in other template files using Edit Theme Files. Keep in mind that the script may not be compatible with the Stencil framework. For further assistance check out our BigCommerce Partner Directory or ask your question in the BigCommerce Community Ask a Design Partner Group.

Handlebars in Stencil Footer

In addition to HTML and custom scripts, you can paste the templating language Handlebars into the footer of Stencil themes via Edit Theme Files. This allows for more robust customizations.

Handlebars is a templating language used to develop and customize Stencil themes. For example, you can use Handlebars to reference theme-wide variables like your store’s name or logo. Third-party apps could use Handlebars to reference customer information, in order to display loyalty offers specific to the person logged in.

To learn more about using Handlebars in Stencil themes, see our developer documentation on Developing with Handlebars.

 
 

Analytics and Conversion Tracking Scripts

Analytics and conversion tracking scripts are usually added to the header or checkout. The following articles detail how to add these scripts to your store.

 
 

FAQ

Don't see the customize button?

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

Where do I apply a custom page layout for product pages?

  • The Template File section is found on individual products under the Other Details tab.
  • 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 Publish.

Why can't I find a menu listed in this article in my Theme Editor?

  • Articles are written with the theme Cornerstone as a base. Most themes have the basic framework of Cornerstone. However, what is included and how it is named in the Stylization Menu is up to the developer.  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.

Why do I have to make a copy of the theme?

  • Creating a copy of your theme allows you to make changes to your storefront design but retain a clean version of the theme. You can edit a Copied Theme even if it is live on your storefront by selecting Edit Theme Files from the Advanced drop-down menu..

How do I edit a theme variation?

  • When you copy a theme it will bring up its default variation when you click customize. To make edits to a variation, select it from the Style menu before proceeding.

Can I add JavaScript files?

  • You can add JavaScript < script > tags to the html, but you cannot add or edit JavaScript files with the File Editor. To add or edit JavaScript files, you must use the Stencil CLI.

Was this article helpful?