How do I access and use the new Bigcommerce Style Editor?

  • 0
  • 1
  • Question
  • Updated 4 years ago
  • Doesn't Need an Answer
  • (Edited)
Archived and Closed

This conversation is no longer open for comments or replies and is no longer visible to community members. The community moderator provided the following reason for archiving: Archived

What is the Bigcommerce Style Editor? The Bigcommerce Style Editor is a feature that allows you to quickly customize the look and feel of your store. You can now edit colors, fonts, and page settings, without needing to know any HTML or CSS.

1. In the Bigcommerce Control Panel, go to Design › Themes.

2. If your current theme supports the Design Editor, you will see the Style Editor button to the right of the picture of your current theme.

1850-style-editor-buttonpng

3. Additional themes with the Style Editor will be marked with a yellow Style Editor logo.

1850-style-editor-labelpng

Using the Style Editor 1. Click on the Style Editor button. Your store will open in a new window, with the Style Editor to the left.

1850-style-editor-2png

2. Locate the area of the color you wish to change. The Design Editor is divided into six parts:

  • Store header
  • Store footer
  • Homepage
  • Product Page
  • Category Page
  • Backgrounds & Fonts
How to change colors 1. To change a color, click on the color swatch beside the name of the area you wish to change.

1850-click-swatch-2png

2. There are three ways to change the color:

  • Select one of the default colors (pictured left)
  • Choose a color range and pinpoint a particular shade (top right)
  • Type in your desired hex code in the box (lower right)
1850-color-palette-2png

3. Click Choose to finalize your selection. Click the Publish button at the bottom of the Style Editor to save your changes.

1850-publish-2png

How to change fonts 1. Open the Style Editor, and scroll down to the Backgrounds & Fonts section.

1850-backgrounds-section-2png

2. Click the arrow to the right of the font area you wish to change, and choose one of the fonts from the drop-down.

1850-choose-font-2png

3. Click Choose to finalize your selection. Click the Publish button at the bottom of the Style Editor to save your changes.

1850-publish-2png

Photo of Drew N

Drew N, Community Manager

  • 258,538 Points 100k badge 2x thumb

Posted 4 years ago

  • 0
  • 1

There are no replies.

This conversation is no longer open for comments or replies.