Browse by Topic

Cornerstone Theme Manual

Cornerstone is BigCommerce’s base Stencil theme, available for free on all storefronts. It comes with three style variations and a robust Theme Editor to create a theme to fit your brand.
 

Did you know? Any new features that are going to be added to Stencil Themes and added to Theme Editors appear on Cornerstone first. If you want to see the latest features, check out Cornerstone's Release notes.

Theme Features

The Cornerstone theme comes with three style variations that are each fully responsive and ideal for a large catalog. The theme utilizes a top navigation and buttons with rounded corners.

For Carousel slide images, we support JPEG, GIF, and PNG file types, but recommend using JPEG files to ensure a balance between image quality and fast loading time. We also recommend using images approximately 1400 x 600px or 1400 x 800px. The most important thing to remember is to use slide images that are consistent in dimension.

The top menu navigation supports up to three levels of sub-categories or children categories. 

Updates and customer support for the theme are provided for free. 

Technical Support is unable to directly assist with code editing. Please refer to the BigCommerce Design Policy for more details.

Basic Theme Setup

Select a Style Variation

Cornerstone comes packaged with three style variations that curate the fonts, colors, and general style of your store. Check out our store demos to see the LightBold, and Warm variations. You can use Theme Editor to select and customize all the included variations.

styles.png

Select your desired style variation under your Theme Editor’s Styles section.

History

In the History section, you can find earlier versions of your theme. A new version is automatically created every time you save or apply an update. This makes it possible to restore an earlier version. For example, you might make a version of your store with different colors based on the season. Click on a version to display it in the Preview Panel. Click Apply to Store to have it live on your storefront.

history.png

To restore a theme to its original version (before any customizations) click View Original Theme Settings at the bottom of the Stylization Panel.

Customize Your Store

Storewide

These change the background color and color schemes of the theme. You can change colors of any element by typing in the hex number directly or clicking the color swatch and selecting from the color picker. The color picker also allows you to save colors you have picked by clicking the “+” icon. This makes creating a color palette easy.

Banner Background — changes the background color that appears behind text on a banner

Page Background Color — this will change the background color of the overall site. It does not change the color of the header or footer backgrounds

Primary Line — changes the color of lines that divide header, footer and product description

Modal Overlay Background Color — the color of the overlay when using quick view

Common Dark Background — changes the color of dark backgrounds such as the block that appears when a shopper adds a product to the cart

Alert Popup box Background — changes the color of popup messages and alerts

Text & Links

This changes the font face, link colors, and text colors.

Body text font family — changes the color of plain text on the body of page . It will change the color of the price on a product’s page, the product description, and any text in the body of a web page

Body text font size — color of the empty portion of the spinner

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 — any links made 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

This affects text blocks that are considered Headings. These are commonly used for product names, titles and carousel labels. 

Font family — select the font face to use for all headings

Heading level 1 —  changes the size of large titles, such as the title of a Category or the Featured Product section on the home page

Heading level 2 — changes the size of h2 headings, such as the price on a product’s page

Heading level 3 — changes the size of h3 headings, such as heading text within a webpage or product description

Heading level 4 — changes the size of h4 text, such as heading text within a webpage or product description

Heading level 5 — changes the size of h5 text, such as product names, top navigation, Carousel button text, and Related Products tab

Heading level 6 —  changes the size of h6 text, such as the titles of options

Heading text color — This affects the size and style of text found on the body of pages, including product descriptions, product prices on the storefront page and the account links in the upper right corner of the page.
cornerston-header-highlight.png

Loading Indicators

For pages with lots of information or large images, a loading indicator will appear to shoppers either as a spinner or as a loading bar.

Pace Bar Color — 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 — the color of the loading overlay

Product thumbnail loading background — a color that appears while a thumbnail image loads

Displaying Products

Change the way products are displayed on category pages.

Display mode — select to display in a grid or a list

Blog

Adjust the image sizes for blogs.

Blog image size — set it to optimize for theme or specify dimensions

Pricing

Controls how prices are displayed on products.

Price Ranges — show the range of price options for products with variants. 

Purchase Options

Restrict Purchase to Login — hide prices and add to cart buttons unless shoppers are logged in

Header & Footer

Header Background Color — change the color that appears behind the logo

Logo Size — adjust the size of the Logo to be the Original (as uploaded), Optimized for the theme, or Specify Dimensions. If Specify Dimensions is select, two boxes for max height and width will appear, allowing you to enter dimensions. When you enter either dimension, Theme Editor will automatically adjust the opposite dimension to maintain the image’s original aspect ratio. The Optimized option’s size is 200 x 100 pixels.

image_dimensions.png
Logo Position — aligns the logo left, center or right along the header. Affects both image and text logos.

 

Can I change which fonts I use? The Theme Editor limits you to a few fonts predesigned to work with the theme. To add your own fonts, you will have to customize the theme using the Stencil CLI.

Text Logo

This will affect the logo if you are using a Text logo and not an Image logo. You select the font for the logo from the fonts in the drop-down menu.

Font Size — size of the font used for text logo

Text Color — If you are using a text logo, this will change the color
 
Font Family — If you are using a text logo, this will change typeface style

User Navigation


Text Color — Changes the color of the top-right links including Search, Login and Cart

Text Hover Color — Changes the color of the top right links when a cursor hovers over them

Dropdown Background Color — changes the color of the drop-down when Cart is clicked

Dropdown Border Color — changes the color of border around the drop-down when Cart is clicked

Cart Counter Background Color — Color of the icon that appears next to the Cart link when an item is added

Main Navigation

fly-out-menu.png

Hide Web Pages in Main Menu — toggles the visibility of web page links from the category navigation menu

Text Color — Changes the color of the top navigation text

Text Hover Color — Changes the color of the top navigation text when a cursor is put over them

Dropdown Background Color — changes the color of the drop-down when a category has subcategories

Dropdown Border Color — changes the color of border around the drop-down when a category has subcategories

Navigation Design — sets the display Simple (display depth of 3) or Alternate (display depth of 8)

Social Media Icons

These settings will change the color of social media icons and rating stars on product reviews.

Footer Icons
Top Right (Toggle On/Off) — display social media icons in the header

Footer placement  — set the icons to display on the left or right of the footer or remove them all together
 

Payment Icons

Click the checkbox beside the payment brands you want to include in the footer.

Apple Pay button color  — set the color style for the Apple Pay button

Payment Icons

Footer

Click the checkbox beside the payment brands you want to include in the footer.

Background Color — changes the color of the background in the footer

Show "Powered by BigCommerce" — toggle the link back to Bigcommerce.com 

Show brands in footer — show links to brands in the footer

Show "©", current year and store name — toggle the © in the footer.

GeoTrust SSL

To use these settings, you have to have a GeoTrust SSL Certificate installed on your store.
Example Seal
SSL Common Name — Enter your SSL Common Name for a GeoTrust SSL seal appears in the footer. The common name is the domain name you entered when purchasing the SSL certificate. If you purchased through BigCommerce see Managing Billing and Account Details, for instructions on how to access your BigCommerce Account Dashboard. 

Seal Size — change the size of the seal displayed in the footer, either Medium or Small

Home Page

Carousel

Show Carousel — toggle the Carousel on or off

Allows image to stretch on large screens — prevents cropping of large carousel images if the viewing screen is wider than 1261 pixels

Background Color — changes the color of the box overlay on the Carousel

Title Color — changes the color of the large text on the Carousel

Description Color — changes the color of the smaller text on the Carousel

Indicator Color — changes the color of the empty dot below the Carousel if there is more than one slide

Indicator Active Color — changes the color of the full dot below the Carousel if there is more than one slide

Indicator Background Color — changes the color of the box behind the dots below the carousel if there is more than one slide

Arrow Color — changes the color of the left and right arrows if there is more than one slide

Arrow Background Color — changes the color of the box behind the arrows if there is more than one slide

Allow image to stretch on large screens — change behavior of larger carousel images

Products

Number of Featured Products — Set how many featured products to display on the home page, or disable this feature

Number of Most Popular Products — Set how many most popular products to display on the home page, or disable this feature

Number of New Products — Set how many new products to display on the home page, or disable this feature

Products

Show Quickview — toggle the feature Quick View

Product Swatch Image Sizes — specify the image size for Product Options: Swatch

review_related-highlight.png

Product description tabs — show product descriptions under a tabbed area or directly on the page

Show product weight — display the product's entered shipping weight

Show product dimensions — display the shipping dimensions for the product

Number of Product Reviews — The number of reviews displayed below the product description

Number of Related Products — The number of related products displayed below the product description

Number of Customers Also Viewed Products — The number of Customers Also Viewed products displayed below the product description

Number of Products per page

Category Pages — control the number of products that appear on one page in a category.

Show "Shop by Price" — show the shop by price feature

Brand Pages — control the number of products that appear on one page in a category.

Search result Pages — control the number of products that appear on one page in a category.

Product Cards

product-title-quick-view-and-add-to-cart.png

Product Title Color — Changes the color of the product’s title when viewed on the home page, category page, or search result

Product Title Hover Color — Changes the color of the product's title when you hover a cursor over it

Button Text Color — Changes the text color of the buttons, such as Add to Cart or Quick View, that appear when you hover over the product image

Button Background Color — Changes the background color of the buttons, such as Add to Cart or Quick View, that appear when you hover over the product image

Quick Search

Quick Search Product Cards refer to products that appear when you type in a search term in the search box and do not press enter to go to the results page.

quick_search_result.png

Background Color — color behind the text with the product’s title and price

Border Color — border around the product

Text hover Color — the color of the text when the cursor hovers over the product card

Product Sale Badges

Sale Badge
Display Product Sale Badges — changes the display style of the sale badge

Text Color — change the color of the text on the sale badge

Badge Color — change the background color of the sale badge

Hover Badge Color (Excludes 'Burst') — change the background color of the sale badge when a cursor hovers over it

Image Sizes

Please specify a maximum image size for desktop display. We'll automatically scale down the image for smaller devices.

main-and-thumbnail-images.png

Main Product Images — specify the image size of the main product image on a product’s page

Thumbnail Image — specify the sizes of the thumbnail images that appear under the main product image

Zoomed Image — specify the size of the image when zoomed in for a closer view

Image in Gallery View — specify the size of product images when they appear on the category page, brand page, or search results

Brand image in Gallery view — specify the size of the brand image when viewed on the brands page

 

Setting image size will not change image dimensions. When you specify the size of images, the theme will not stretch or squish an image to fit the size. For example, if you specify that images should be 100 x 100 pixels, then upload an image that is 200 x 100 pixels, it will be sized at 100 x 50 pixels.

Buttons & Icon

Primary Action button

Text Color — color of the text inside these buttons

Text Hover Color — the color of the text in the button when you hover a cursor over it

Text Active Color — the color of the text when the button is clicked. This usually displays very quickly, and may not appear in all browsers

Background Color — the color of the button behind the text

Background Hover Color — the color of the button behind the text when you hover a cursor over it

Background Active Color — the color of the button behind the text when you click on it

Border Color — the color of the line around the button

Border Hover Color — the color of the line around the button when you hover a cursor over it

Border Active Color — the color of the line around the button when you click on it

Font family — change the font face for buttons

Secondary action button

Text Color — color of the text inside these buttons

Background Color — the color of the button behind the text

Border Color — the color of the line around the button

Font family — change the font face for buttons

Disabled button

This refers to how buttons appear when a combination of options is unavailable.

disabled_buttons.png

Text Color — the color of the text inside the disabled button

Background Color — the color of the button behind the text

Border Color — the color of the border around the button

Icon Colors

These settings will change the color of social media icons and rating stars on product reviews.

Footer Icons

Icon Color — changes the color of social media and payment icons in the footer

Icon Hover Color — changes the color displayed when the cursor hovers over a social media icon

Rating Empty Icon Color — the color of the star icons that are empty in a star rating display

Rating Full Icon color — color of the star icon rating that gets counted

Forms

Forms are comprised of text boxes and buttons. This section allows for the control of these elements.

Example Form

Labels

This refers to the text above the input boxes.

Text Color — changes the color of the form labels that appear above text boxes or product option selections

Input Fields

Text Color — the color of text that appears inside a text box or drop-down menu

Background Color — color that appears behind the text in a drop-down menu or text box

Border Color — color of the border around drop down menus, text boxes and rectangle multiple-choice buttons

Active Border Color — 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

Disabled Background Color — color of a choice when it’s not selectable

Select Boxes

These refer to drop-down menus used in product options or forms.

size-option-dropdown.png

Background Color - change the fill color of background behind the text

Arrow Icon Color - change the color of the arrow icon on drop-down menus

Checkbox & Radio Button

check-box-option.png

Icon Color — Color of the check mark on checkboxes, or the dot on radio buttons

Background Color — color of the box behind the check mark or radio dot

Border Color — color of the border around the checkbox/radio button

Optimized Checkout

This tab only appears if Optimized One Page Checkout is enabled. To enable this feature see Optimized One Page Checkout.

Header

Background Color — change the color that appears behind the logo

Use Custom Background  — check this box to upload an image to display behind the logo. 1000 x 400px is the recommended specifications.

Logo

Use Custom Logo — Add an image for your logo. By default, it will inherit the settings from the Logo tab.

Position — moves the logo to the left, center or right side of the header.

Checkout Steps

Background Color — change the color of the circle behind the number of steps

Text Color — change the color of number of steps

Order Summary

Background Color — change the color of the persistent cart

Primary Headings

Font family — change the font face for headings

Text Color — change the font face for the heading text

Secondary Headings

Font family — change the font face for headings

Text Color — change the font face for the heading text

Body

Background Color — change the color of the page

Links

Text Color — change the color of links

Font family — change the font face for links

Primary Button

Text Color — color of the text inside these buttons

Text Hover Color — the color of the text in the button when you hover a cursor over it

Text Active Color — the color of the text when the button is clicked. This usually displays very quickly, and may not appear in all browsers

Background Color — the color of the button behind the text

Background Hover Color — the color of the button behind the text when you hover a cursor over it

Background Active Color — the color of the button behind the text when you click on it

Border Color — the color of the line around the button

Border Hover Color — the color of the line around the button when you hover a cursor over it

Border Active Color — the color of the line around the button when you click on it

Font family — change the font face for buttons

Secondary Button

Text Color — color of the text inside these buttons

Background Color — the color of the button behind the text

Border Color — the color of the line around the button

Font family — change the font face for buttons

Form Labels

Text Color — color of the text inside forms in checkout such as the payment method
 

Form Inputs

Text Color — color of the text typed into fields (Payment Method)

Background Color — the color of the field behind the input text

Shadow Color — the color of the slight shadowing on input fields

Placeholder Color — the color of the text example in an input field. 

Border Color — the color of the line around the input fields

Input Control Color — the color of the active selection indicator on forms

Error Color  — the color of the text that appears when incorrect or missing  information is put into an input field 
 

Form Checklist

Background Color — the color of the field behind the selection options. (Shipping Methods)

Selected Background  Color — the color of the text active selection option

Text Color — the color of the text in the selection options

Border Color — the color of the border of the selection list

There is currently a section for our Google Amp beta. This is a closed beta and not yet available to the public.
 

Loading Toaster

Background Color — the color of behind the text on the loading notification.

Text  Color — the color of the text on the loading notification.

Was this article helpful?