Browse by Topic

Using the Style Editor (Blueprint)

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

 

The Style editor is only available on select Blueprint themes. These instructions cover the basic steps to use the style editor a few of our legacy Blueprint Themes. The Customize button will appear on themes that have the Style Editor. 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 › My Themes. On the Current Theme section click the Customize 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.

Style Editor

 

Saved changes will overwrite custom.css! 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.

Changing Colors

The 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 the 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.

Use the Style Editor to customize aspects of your themes design

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

3.  To finalize your selection, click Choose. Your storefront preview will update to reflect the color you’ve chosen.

4. Click Publish to apply your changes.

Changing Fonts

In some themes, you can change the fonts of your text within the Style Editor. You are limited to the fonts available in the Style Editor. The following themes support font changes.

  • Classic
  • Classic Hip
  • Fun N Games
  • Grease Monkey
  • Health and Beauty
  • Hipster
  • Home IQ
  • Munchen
  • Musik
  • Outdoor
  • Runway
  • Wine Store
  • Ascend
  • Athletic
  • Bright & Bold
  • Cookies & Cream
  • Dusk & Dawn
  • Rise
  • Sugar & Mint
 

Don't see a font section or want to use a font not listed? Some themes do not include a Fonts section in the Style Editor or have a limted selection. For these themes, you can add Google Fonts by editing the HTML/CSS.

Scroll down to the Backgrounds & Fonts section. Click the arrow to the right of the type of text you wish to change, and choose a font from the drop-down.

Font selector

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

Scroll down to the Product Columns setting.  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.

Was this article helpful?