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.
Accessing the Style Editor
To use the Style Editor go to Storefront Design › Design Options. 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.
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 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.