Style Editor helps you to change background of legacy Blueprint themes without even touching the code.
How to use Style Editor?
- Go to Storefront Design > Themes.
- Navigate Current theme section, and then click the Customise button.
You will find your store open in a new tab, with Style Editor panel in the left-hand side.
How to Change colors?
The following steps will guide you change color of almost everything within the theme using Style
Editor:
- Click on color swatch beside the name of the area you want to change.
- You can either choose a color enter the hex color value for your color.
- And then click Choose. Your storefront will be updated with a color you have chosen.
- Finally click Publish to apply the changes made.
How to change Fonts?
There are some themes which allow you change the font of the text within Style Editor.
- Go to the Background and Fonts section.
- Click the drop-down allow beside the type of text you want to change, and choose a font
from the list. - And then click Publish to apply the changes to the live store.
How to add Product Columns?
The following are some of the themes which support product column using the Style Editor:
- Classic Next
- Athletic
- Bright & Bold
- Cookies & Cream
- Dusk & Dawn
- Sugar & Mint
Steps to adjust the product column:
- Go to the Product Columns settings
- You will find a field in the right-hand side of the current number, where you can adjust the
number or columns or even enter the number yourself. - And then click Publish to apply the changes to your live store.
How to replace background image?
You will not find any image folder in the store’s template file. BigCommerce database stores all the images and not the store. So all the images must be stored in into the image folder, or else images stored in your store will have broken pixel.
How to add the image folder?
Steps to download the existing store image:
- From the BigCommerce control panel, navigate Storefront Design, Themes.
- Select Download Themes– -> All Files.
- A zip file will be downloaded, find the file from your computer, right click on it and then select. Extract to the specified folder.
Steps to re-upload images:
With the help of WebDAV, connect to your store
- Navigate template folder
- Then move the image folder from your computer to the template folder
How to upload Custom Image?
The type of image folder allowed by BigCommerce is given below:
- .gif
- .jpg or .jpeg
- .jpe
- .png
To upload the custom image, you will just need to move them from your computer to the image folder
How to Reference image to your store?
You can use the following format for referencing images in your store.
%%ASSET_images/filename.jpg%%
Note: Files in the WebDAve are case-sensitive.
