Using the Style Editor (Blueprint)
What We'll Cover
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 some of our legacy Blueprint Themes. Not all Blueprint themes utilize 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.
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.
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.
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.
Changing FontsSome 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.
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.
The following themes currently support product column updates via the style editor:
- Classic Next
- 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.
3. Click Publish to apply your changes to your live storefront.