How to Edit BigCommerce CSS Styles

One of the biggest needs for BigCommerce stores is to customize the visual look and feel of the store. There are actually several ways to do this, so here we provide an overview of the different ways to edit the design of a BigCommerce theme.

Stencil Framework

BigCommerce has an underlying theme framework they call Stencil.  This framework allows developers to create themes that have editable settings in the BigCommerce dashboard.  These editable settings allow non-developers to make changes to some of the style elements on the page, but not all of them.  You can think of Stencil as a platform on which different themes are built.

Choosing a Theme

There are essentially 3 options when it comes to BigCommerce themes.

BigCommerce Themes

The internal BigCommerce development team has built a handful of free official themes on the Stencil framework.  (e.g. https://www.bigcommerce.com/theme/cornerstone-light/).  The features list of this theme mentions “free customer support”, which I assume means basic assistance with bugs that pop up as well as simple instructions on how to use it. You can find these in the BigCommerce Theme Store.

  • Pros: built by BigCommerce, so presumably has cleaner code and a more responsive customer support
  • Cons: design can be limiting

3rd Party Themes

The Stencil framework is presented as a base onto which developers can create their own themes.  Many of the themes in the theme store seem to now be using this Stencil frame (having upgraded from the previous Blueprint framework).  These 3rd-party themes say they are “developed and supported by” the 3rd party developer.  The features list for https://www.bigcommerce.com/theme/athletic-original/ also mentions “free customer support”, but I assume this is also restricted to bugs and basic instructions. You can find these in the BigCommerce Theme Store.

  • Pros: better designs
  • Cons: built by 3rd-party, so unsure of code cleanliness and customer support times

Build-Your-Own Theme

We also have the option of creating a custom theme off the Stencil framework.

  • Pros: Would allow for more advanced customization
  • Cons: Would require more time and budget, because we’d be starting with a more basic theme and would be building a lot of things that other developers have already made available in the themes they’ve made available for sale

Editing a Theme

Once we have selected and installed a theme, there are a few ways to edit it:

Store Design Tool (Page Builder)

Each theme’s developer can expose certain settings (menu behavior, colors, font selection) in the Store Design Tool.  This visual editor allows non-developers to change settings that affect some of the site’s design.

  • Pros:  Easy to use.  No development knowledge required.
  • Cons:  Limited.  You can’t control everything.

Edit Theme Files

For more advanced editing, we can edit the theme files themselves.  This involves copying an existing theme (by BigCommerce or a 3rd Party) to have our own version that we can edit as needed.  Out of the box, this appears to only be useful for quickly adding code snippets, but we can use the Stencil CLI Developer Tools (discussed below) to extend what is available in the “Edit Theme Files” editor.

  • Pros: A little more flexibility than Store Design Tool, but only with snippets.
  • Con: Once you make a copy and start editing a theme’s files, BigCommerce says they will not offer support for it.  I assume this applies to 3rd Party developers, too.  
  • Con: It seems there is no way to preview a file change without having it immediately show on the live site.

Stencil CLI Developer Tools

BigCommerce also has a developer toolkit (Stencil CLI) for website developers that allows us to really get in there and make substantial changes.  This is the tool they provide for theme developers who want to build their own theme from scratch, but it works with editing existing themes as well, because all Stencil themes should be built around this tool.

  • Pros: Provides the most flexibility.  You can also preview changes on the local computer without affecting the live site.
  • Cons: Very technical tool that is only for developer use.

Analysis & Recommendations

Editing Theme

Unless we can find a pre-existing theme that looks and acts exactly like we want it, we will need to edit the theme files, voiding the BigCommerce “free support” offer.  I think the best approach will be to do the following:

  1. Perform the initial customization in Stencil CLI developer tools so we can benefit from the built-in optimization that tool offers.  
  2. Because using the Stencil CLI can be a more involved / lengthy process, I recommend building a custom.css file into the theme (using Stencil CLI) that will be available within the “Edit Theme Files” section, so we can quickly post updates in a pinch without needing to spin up a full development environment just to add an occasional CSS style.
  3. Make quick patch updates in Edit Theme Files, but more substantial updates via Stencil CLI. (Be sure to copy the custom.css style updates to your local development environment before pushing updates so they don’t get overwritten on the live site).

Choosing the Theme

Since we will likely need to edit the theme anyway, the next consideration is what theme gets us as close as possible to avoid unnecessary development work.  I recommend doing an audit of several themes, using the “Preview With Your Store” functionality. This lets you preview the store with real categories and products, and allows you to test some of the available settings the theme developer has made available in the Store Design Tool.

As always, if you need any assistance with your website development or customization, please reach out to our team at info@milodigital.com.