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

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 Light, Bold, and Warm variations. You can use Theme Editor to customize all the included variations.

styles.png

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

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 easy 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

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.

Primary Color — 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

Common Light Border — changes the color of lines that divide header, footer and product description

Common Dark Border — changes the border color on some form labels

Common Light Background — changes the color that appears if a product image is smaller than the set image dimensions or transparent backgrounds. We recommend choosing a color that matches the Page Background Color.

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

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

These are colors that appear when the site is loading something over your store, such as a product Quick View, or when the store is loading information.

overlay-quickview.png

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

Loading Overlay Background Color — the color of the overlay when a page is loading

Typography and Icons

This section handles the style and color of text used throughout your store.

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.

 

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.

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

This affects text blocks that are considered Headings. These are commonly used for product names, titles and Carousel labels. To learn more about HTML Headings, see w3schools.com.

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

Font Size <h1> — changes the size of large titles, such as the title of a Category or the Featured Product section on the home page

Font Size <h2> — changes the size of h2 headings, such as the price on a product’s page

Font Size <h3> — changes the size of h3 headings, such as heading text within a webpage or product description

Font Size <h4> — changes the size of h4 text, such as heading text within a webpage or product description

Font Size <h5> — changes the size of h5 text, such as product names, top navigation, Carousel button text, and Related Products tab

Font Size <h6> — changes the size of h6 text, such as the titles of options

Text Color — 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

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 is hovered over it

Headings Text Color — changes the color of h1 headings

Link Color — any links made on webpages will have this color.

Link Hover Color — the color displayed when a cursor is hovered 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.

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

 

Did you know? If you change the font color in the WYSIWYG editor, it will honor that color and not the color selected in the Theme Editor.

Buttons

Buttons are usually comprised of text on top of a colored shape. This section allows for controlling the colors of these elements.

Primary buttons refer to buttons in the Carousel, the newsletter subscription button, and Add to Cart.

add-to-cart-highlight.png

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

This refers to buttons like the Add to Wishlist button.

add-to-wishlist-highlight.png

Text Color — the 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

Border Color — the color of the button behind the text

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

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

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

Button Color — a selection of color styles for the Apple Pay button. The store must be Connected with Apple Pay and use Cornerstone 1.4.0 or above to appear. 

Apple Pay Button

Forms

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

Example Form

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

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

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

check-box-option.png

Icon Color — Color of the check mark on check boxes, 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 check box/radio button

This allows control for many aspects of the store's header area.

Store Name Text Color — If you are using a text logo, this will change the color

Background Color — Changes the color behind the text in the header

cornerston-header.png

Navigation Design — Changes the maximum depth of menu display. If you need the top navigation to go more than three menus deep, it can be toggled on here. To define the menu depth, go to Store Setup › Store Settings under the Display tab.


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

fly-out-menu.png

Hide Content Pages in Main Menu — toggles the visiblity 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

Background Color — Color around the text box when Search is clicked

Adds controls for Image logos and logo positioning.

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 ration. 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.

Makes adjustments to the store's carousel.

carousel-highlight.png

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

Payment Icons

Adjusts the payment icons included in the footer. The color is handled by Icon Colors in the Typography & Icons section.

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

Payment Icons

Social Media Icons

Adjust the placement of social media icons. The color is handled by Icon Colors in the Typography & Icons section.

Social Media Icons

Placement — toggle if the social media icons show up on the top right

Bottom Placement — change location of social media icons in the footer

Products

Adjusts how products are displayed throughout the store.

Show Quickview — toggle the feature Quick View

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

review_related-highlight.png

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

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

Number of products per page — control the number of products that appear on one page in a category.

category_grid.png

Number of products per page — control the number of products that appear on one page in a brand

Number of products per page — control the number of products that appear on one page on a search result page

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

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 products 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 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

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.

Blog

blog_preview-highlight.png

Blog Image Size — specify the dimensions for the image that appears as a preview image in the blog list

Optimized Checkout

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

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.

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.

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

Text Color — change the color of number of steps

Background Color — change the color of the persistent cart

Font family — change the font face for headings

Text Color — change the font face for the heading text

Font family — change the font face for headings

Text Color — change the font face for the heading text

Background Color — change the color of the page

Text Color — change the color of links

Font family — change the font face for links

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

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

Text Color — change the color of text above form field inputs

Background Color — change the background color of text boxes

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

Footer

Controls how prices are displayed on products.

Footer

Background Color — changes the color of the background behind the text in the footer area

Show brands in footer — toggle the brand list in the footer

Show Powered by — allows you to add or remove the “Powered by BigCommerce” link in the footer

Show "©", current year and store name — displays © with your store name and the current year

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

Purchase Options

Controls how prices are displayed on products.

Add 'As low as' text — add the text 'as low as' to products with options

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

Was this article helpful?