In your control panel, go to Storefront > My Themes OR Channel Manager > Edit Storefront Settings > Themes (depending on your plan with BigCommerce), and click the blue "Customize" button to launch Theme Editor.
In the left-hand column of the Theme Editor, click the panel labeled 'Global'.
Background and Lines
Banner bakground | Changes the background of the banner (behind the image) |
Page background | Changes the background color of the overall site pages. It does not change the color of the header or footer backgrounds |
Primary lineC | Changes the color of lines that divide header, footer and product description |
Common dark background | The color of the overlay when using quick view |
Modal overlay background | Changes the background color of modal windows or popups such as the quick view box background or add to cart background |
Alert popup box background color | Changes the color of popup messages and alerts |
Horizontal lines | Color of lines that divide header, footer and product description |
Body Text and links
Body text font family | font face to use for body text |
Body text font size | font size to use for body text |
Body text color | color of the filled portion of the spinner |
Body text hover color | affects the color of text, such as Logo Text, when you hover a cursor over it |
Secondary text color | changes the color of text used as subtitles, such as the links in the footer, the price of the product on the home page, and category breadcrumbs |
Secondary text hover color | affects the color of text such as the text in the footer when a cursor hovers over it |
Link color | hyperlinks created on webpages will have this color |
Link hover color | the color displayed when a cursor hovers over a link |
Link active color | the color that displays when a user clicks a link. This may display quickly and may not appear at all on some browsers. |
Headings
Page Heading font family | Select the font face to use for all headings |
Heading text color | Sets the heading text colour on categories and internal pages |
Heading background color | Sets the background behind the heading on categories and internal pages |
Loading indicators
Page loading bar | color of the loading bar |
Spinner light half | color of the empty portion of the spinner |
Spinner dark half | color of the filled portion of the spinner |
Modal loading background | color of the loading overlay |
Product thumbnail loading background | color that appears while a thumbnail image loads |
Image Loading
Lazyloading mode |
Sets how images should load into the page. Lazyload = Delay loading of images until they are in viewport (fastest) Lazyloading with LQIP (Low Quality Image Preview) = Delay loading of images until they are in viewport but display a low quality preview image until loaded (fast) Disabled = Turn off Lazyloading (slowest) |
Pages
Hide Breadcrumbs | Hide the breadcrumb links at top of pages eg "Home > Shop > Category > Product name" |
Hide page heading | Hide page headings on web pages |
Hide category page heading | Hide page headings on categories |
Hide blog page heading | Hide page headings on blog |
Hide contact us page heading | Hide page heading on contact us page |
Products
Display style |
On category pages, show products in a grid or a list style layout |
Blog
Size of images |
set it to optimize for theme or specify dimensions |
Pricing
Price Ranges | show the range of prices (lowest and highest) for products with variants |
Purchase options | hide prices and add to cart buttons unless shoppers are logged in |
Form Input fields
Label text color | changes the color of the form labels that appear above text boxes or product option selections |
Field text color | the color of text that appears inside a text box or drop-down menu |
Field background | color that appears behind the text in a drop-down menu or text box |
Field background disabled | color of a choice when it’s not selectable |
Field border | color of the border around drop down menus, text boxes and rectangle multiple-choice buttons |
Field border active | color of the border around drop down-menus, text boxes and rectangle multiple-choice buttons when you click to enter text or make a choice |
Discount Banner
Label text color |
Set the colour of the discount banner text label |
Discount banner background color |
Set the background color of the discount banner |