Using the Style Editor (Blueprint)

Style Editor allows you to quickly customize the look and feel of Blueprint themes without having to touch the code.  You can edit colors, fonts and product arrangement to match your business's brand.

These instructions cover the basic steps to use the style editor on Blueprint-based themes. For information about customizing Stencil themes, see Using the Stencil Theme Editor.

Accessing the Style Editor

To use the Style Editor go to Storefront Design › Design Option. On the Themes tab click the Style Editor button to the right of the picture of your current theme. Your store will open in a new window, with the Style Editor panel to the left.

The Style Editor button.

 

Be careful! Any changes made with the Style Editor are saved in the template file custom.css. It will overwrite any code you have already put in there when you Publish changes. It is recommended that you use Style Editor first, then make edits in custom.css.

Finding Themes with Style Editor

Style Editor is not supported on all themes. A yellow Style Editor badge appears on supported themes in the marketplace. See Changing Your Theme for more information on accessing and changing your theme.

Style Editor badge examples.

Changing Colors

Style Editor allows you to change the color of almost anything within the theme without touching code.

Some elements within the theme may not be supported by the color change feature. If you do not see the element listed in Style Editor, it must be changed via html/css code. Refer to Accessing and Customizing Template Files for more information.

1. To change a color, click on the color swatch beside the name of the area you wish to change.

User-added image

2. Either pick a color or enter the hex color value for your color in the field just above the “choose” button.

3. Click Choose to finalize your selection. Your storefront will update to reflect the color you’ve chosen.

4. Click Publish to apply your changes.
Publish Button

Changing Fonts

Some themes include the ability to change the fonts of your text within the Style Editor. These are limited to a list of fonts included with the theme.
 

Don't see a font section? Some themes do not include a Fonts section in the Style Editor. For these themes, you can add Google Fonts by editing the HTML/CSS.

1. Scroll down to the Backgrounds & Fonts section.

2. Click the arrow to the right of the type of text you wish to change, and choose a font from the drop-down.

Font list example.

3. Publish your changes to apply them to your live storefront.

Adding Product Columns

Product columns control the number of featured, new or sale products that appear in one row. This can be used in combination with Display settings to show a set number of products on the home page and keep the layout clean.

Supported Themes

The following themes currently support product column updates via the style editor:

  • Classic Next
  • Athletic
  • Bright & Bold
  • Cookies & Cream
  • Dusk & Dawn
  • Sugar & Mint

Adjusting the Product Columns

1. Scroll down to the Product Columns setting.

2. Click the arrow to the right of the current number (displays when you hover over the field), and adjust the number of columns. You can also type in the number you want to use.

The Product Columns setting in the BigCommerce Style Editor.

3. Click Publish to apply your changes to your live storefront.

Additional Resources

Was this article helpful?