Cornerstone is a free theme designed by BigCommerce and is available to all stores. It is fully responsive, meaning it automatically adapts to the device it is being viewed on (desktop, tablet, or mobile), and has built-in features to help you sell, like a homepage carousel (slideshow), social media icons, featured, top-selling, and new product panels, and support for product filtering (faceted search).

The theme has a simple and clean design that can be easily customized to match your business or brand using the Page Builder.

Sample Cornerstone theme as it appears on desktop and mobile screens

 
 

Cornerstone 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 for product images to ensure a balance between image quality and fast loading time. We also recommend using slide images approximately 1400 x 600 pixels or 1400 x 800 pixels. All slide images should have consistent dimensions.

You can resize your store product images by adjusting the product card dimensions in Page Builder. When you are resizing your images, it is best to keep them all the same aspect ratio. For more information, see our guides on Troubleshooting Your Store Images and Adjusting Your Store Image Settings.

Updates and customer support for the Cornerstone theme are provided for free. However, BigCommerce technical support is unable to directly assist with editing code like HTML or CSS. See the BigCommerce Design Policy for more information.

 

Localized Store Experiences: This feature is available for all of our supported languages. For more information on the default language store setting, see Store Profile Settings.

 
 

Release Notes

As the default theme on new stores, Cornerstone is typically the first theme to support new theme-related features and improvements.

See the Dev Center Updates for the latest Cornerstone release notes.

 
 

Page Builder

Themes can be customized on the Theme Styles tab in Page Builder. You can customize attributes like color, font, and text size as well as design elements like the header, logo, navigation, and product panels.

The various areas that can be customized or enabled and disabled are listed below.

 
 

Global

Background and lines
Banner backgroundbackground color that appears behind text on a banner
Page backgroundbackground color of the overall site. It does not change the color of the header or footer backgrounds
Common dark backgroundbackground color common of overlays such as the button blocks on the Add to Cart popup
Modal overlay backgroundbackground color when a modal window is active, such as when a shopper adds a product to the cart or uses Quick View
Alert popup box background colorbackground color of popup messages and alerts
Alert popup text colorcolor of the text in popup messages and alerts
Horizontal linecolor of lines that divide areas such as the header, footer, and product description
Body text and links
Body text font familyfont face to use for body text
Body text font sizefont size to use for body text
Body text colorcolor of body text
Body text hover colorcolor of text, such as Logo Text, when a cursor hovers over it
Secondary text colorcolor of text used as subtitles, such as links in the footer, product prices on the home page, and category breadcrumbs
Secondary text hover colorcolor of text such as the text in the footer when a cursor hovers over it
Link colorcolor of hyperlinks created on webpages
Link hover colorcolor displayed when a cursor hovers over a link
Link active colorcolor that displays when a user clicks a link. This may display quickly and may not appear at all on some browsers.
Headings
Heading font familyfont face to use for all headings
Heading 1size of large titles, such as the title of a Category or the Featured Product section on the home page
Heading 2size of h2 headings, such as the price on a product’s page
Heading 3size of h3 headings, such as heading text on blog pages
Heading 4size of h4 text, such as heading text within a web page or product description
Heading 5size of h5 text, such as product names on the home page, top navigation, Carousel button text, and product tabs
Heading 6size of h6 text, such as the titles of options, custom fields, and product card buttons
Heading text colorcolor of all headings
Loading Indicators
Page loading barcolor of the loading bar
Spinner light halfcolor of the empty portion of the spinner
Spinner dark halfcolor of the filled portion of the spinner
Modal loading backgroundcolor of the loading overlay
Product thumbnail loading backgroundbackground color of a thumbnail, also appears while a thumbnail image loads
Image Loading
Lazyloading Modehow images load before the user scrolls to them on the screen
Pages
Hide breadcrumbsremoves breadcrumbs on product and category pages
Hide page headingremoves the title on web pages
Hide category page headingremoves the category name heading from category pages
Hide blog page headingremoves the title of the blog page
Hide contact us page headingremoves the title of the contact us page
Products
Display styleselect to display in a grid or a list
Blog
Size of imagessize of images on blog pages
Pricing
Price Rangesshow the range of prices for products with variants. Your product display settings may prevent ranges from appearing on product detail pages.
Form input fields
Label text colorcolor of the form labels that appear above text boxes or product option selections
Field text colorcolor of text that appears inside a text box or drop-down menu
Field backgroundbackground color of a dropdown menu or text box
Field background disabledcolor of a choice when it’s not selectable
Field bordercolor of the border around dropdown menus, text boxes, and rectangle multiple-choice buttons
Field border activecolor of the border around dropdown menus, text boxes, and rectangle multiple-choice buttons when you click to enter text or make a choice
 
 

Home Page

Carousel
Show carouseltoggles the carousel on or off
Show carousel arrowstoggles the left and right arrows on or off
Show carousel Play/Pause buttontoggles the Play/Pause button on or off
Allow image to stretch on large screensprevents cropping of large carousel images if the viewing screen is wider than 1261 pixels
Content backgroundbackground color of the box overlay on the Carousel
Header textcolor of the large text on the Carousel
Description textcolor of the smaller text on the Carousel
Indicatorcolor of the empty dot below the Carousel if there is more than one slide
Indicator activecolor of the full dot below the Carousel if there is more than one slide
Indicator backgroundbackground color of the box below the carousel if there is more than one slide
Arrowcolor of the left and right arrows if there is more than one slide
Arrow backgroundbackground color of the box behind the arrows if there is more than one slide
Arrow bordercolor of the border of the box behind the arrows if there is more than one slide
Play/Pause button textbackground color of the Play/Pause button text if there is more than one slide
Play/Pause button backgroundcolor of the box behind the Play/Pause button if there is more than one slide
Play/Pause button bordercolor of the border of the box behind the Play/Pause button if there is more than one slide
Products
Number of Featured Productsnumber of featured products to display on the home page, or disable this feature
Number of Most Popular Productsnumber of most popular products to display on the home page, or disable this feature
Number of New Productsnumber of new products to display on the home page, or disable this feature
 
 

Products

Product sale badges
Show product sale badgesdisplay style of sale badges or select None to disable. Disabling product sale badges will hide the label and badge settings below in Page Builder
Product sale badge labeltext on the sale badge
Product price label (sale)Sale Price text
Product price label (before sale)Default Price text
Product price label (retail)MSRP price text
Product price labelprice label text when there is no sale price
Badge text colorcolor of the text on the sale badge
Badge colorbackground color of the sale badge
Badge hover colorcolor of the sale badge when a cursor hovers over it
Show product sold-out badgesdisplay style of the sold-out badge or select None to disable. Disabling product sold-out badges will hide the label and badge settings below in Page Builder
Product sold-out badge labeltext on the sold-out badge
Badge text colorcolor of the text on the sold-out badge
Badge colorbackground color of the sold-out badge
Badge hover colorcolor of the sold-out badge when a cursor hovers over it
Display settings
Show quickview button on product cardstoggles the feature
Show product description tabsdisplays product descriptions under a tabbed area or directly on the page
Product custom fields in tabsdisplays product custom fields under a tabbed area or directly on the page. This option must be checked in order to see the Product custom fields tab label setting in Page Builder
Product custom fields tab labelchanges the text of the custom fields tab
Show product weighttoggles the display of the product's entered shipping weight
Show product dimensionstoggles the display of the shipping dimensions for the product
Show product swatch namestoggles the display of selected swatch names
Show “Shop by price” in filterstoggles the shop by price filter
Show product reviewstoggles reviews on product pages. This option must be checked in order to see the Number of product reviews setting in Page Builder.
Number of product reviewsnumber of reviews to display per page
Wishlist dropdown backgroundbackground color of the drop-down menu when Add to Wish List is clicked
Show quick payment buttons

toggles payment buttons for digital wallets enabled with your payment gateways. The following digital wallets are supported:

Number of products displayed
Category pagenumber of products that appear on one page in a category
Brand pagenumber of products that appear on one page on a brand page
Search result pagenumber of products that appear on one page of search results
Product page (related products)number of related products displayed below the product description, or disable this feature
Product page (customers also viewed products)number of Customers Also Viewed products displayed below the product description, or disable this feature
Product cards
Product header text colorcolor of the product’s title when viewed on the home page, category page, or search result
Product header text hover colorcolor of the product's title when you hover a cursor over it
Button text colortext color of the buttons, such as Add to Cart or Quick View, that appear when you hover over the product image
Button backgroundbackground color of the buttons, such as Add to Cart or Quick View, that appear when you hover over the product image
Product cards (quick search)
Background colorbackground color of box behind product text on quick search drop-down
Border colorcolor of the border around the product
Text hover colorcolor of the text when the cursor hovers over the product card
Image sizes
Main product imagessize of the main product image on a product’s page. See our guide on Adjusting Your Store Image Settings for more information on adjusting product image sizes
Thumbnail image in product pagesize of the thumbnails under the main product image for products with more than one image
Thumbnail image in cart and other pagessize of the thumbnail images that appear in the cart
Zoomed imagesize of the zoomed product image when a cursor hovers over it
Image in gallery viewsize of product images when they appear on the category page, brand page, or search results
Brand image in gallery viewsize of the brand image when viewed on the brands page
Product swatch imagessize for swatch options images
 
 

Buttons & Icons

Primary action button
Button text colorcolor of the text inside the button
Button text hover colorcolor of the text in the button when you hover a cursor over it
Button text active colorcolor of the text in the button when you click on it
Button backgroundbackground color of the button
Button background hoverbackground color of the button when you hover a cursor over it
Button background activebackground color of the button when you click on it
Secondary action button
Button text colorcolor of the text inside the button
Button text hover colorcolor of the text in the button when you hover a cursor over it
Button text active colorcolor of the text in the button when you click on it
Button bordercolor of the border around the button
Button border hovercolor of the border around the button when you hover a cursor over it
Button border activecolor of the border around the button when you click on it
Tertiary action button
Button backgroundbackground color of the “sort by” filter drop-down
Button arrow iconcolor of the arrow in the “sort by” filter drop-down
Disabled button
Button text colorcolor of the text inside a disabled button
Button backgroundbackground color of the button
Button bordercolor of the border around the button
Icons
Social media iconcolor of social media icons in the footer
Social media icon hovercolor displayed when the cursor hovers over a social media icon
Star review icon (full)color of the star icon rating that gets counted
Star review icon (empty)color of the star icons that are empty in a star rating display
Increase/decrease button iconcolor of the quantity change buttons
Checkboxes and radio buttons
Checkbox and radio iconcolor of the checkmark on checkboxes, or the dot on radio buttons
Button backgroundbackground color of the box behind a check mark or radio dot
Button bordercolor of the border around a checkbox or radio button
 
 

Checkout Page

In order to see Checkout settings in Page Builder, you will need to enable Optimized One-Page Checkout on your store.

Header
Use background imagetoggle to upload an image to display behind the logo. Recommended dimensions are 1000 x 400 pixels. This option must be checked and an image uploaded in order to see the Header image size setting in Page Builder.
Header image sizesize of the background image behind the logo
Background colorbackground color that appears behind the logo
Header text colorcolor of header text if using a text logo
Header bordercolor of the border around the header
Logo
Logo typeadds an image for your logo. By default, it will inherit the settings from Header & FooterLogo. If a unique logo image is chosen, you can select the size. Optimized for theme sets the log to 250 x 100 pixels.
Logo positionaligns the logo along the header. Affects both image and text logos.
Discount banner
Banner backgroundbackground color of Automatic Promotion notifications
Banner text colorcolor of the text in Automatic Promotion notifications
Banner iconcolor of the icon that appears in Automatic Promotion notifications
Order summary box
Box backgroundbackground color of the order summary box
Box bordercolor of the border around the order summary box
Checkout steps
Icon backgroundbackground color of the circle behind the icon
Icon bordercolor of the border of the circle around the icon
Icon text colorcolor of the icon in the step
Headings
Heading 1 font familyfont face for h1 text
Heading 1 text colorcolor of h1 text
Heading 2 font familyfont face for h2 text
Heading 2 text colorcolor of h2 text
Body
Page backgroundbackground color of the page
Focus colorcolor of the selected field on the checkout form
Body text and links
Body text font familyfont face for the text that appears on the checkout page
Body text colorcolor of the text that appears on the checkout page
Secondary text font familyfont face of text that is not a title, label or informational text
Secondary text colorcolor of text that is not a title, label or informational text
Link font familyfont face for text links that appear on the checkout page
Link colorcolor for text links that appear on the checkout page
Link hover colorcolor of text links when you hover a cursor over it
Primary action button
Button text font familyfont face for buttons
Button text colorcolor of the text inside these buttons
Button text hover colorcolor of the text in the button when you hover a cursor over it
Button text active colorcolor of the text when the button is clicked. This usually displays very quickly, and may not appear in all browsers
Button text disabled colorcolor of the text when the button is disabled
Button backgroundbackground color of the button
Button background hoverbackground color of the button when you hover a cursor over it
Button background activebackground color of the button when you click on it
Button background disabledbackground color of the button when it is disabled
Button bordercolor of the border around the button
Button border hovercolor of the border around the button when you hover a cursor over it
Button border activecolor of the border around the button when you click on it
Button border disabledcolor of the border around the button when it is disabled
Secondary action button
Button text font familyfont face for buttons
Button text colorcolor of the text inside these buttons
Button text hover colorcolor of the text in the button when you hover a cursor over it
Button text active colorcolor of the text when the button is clicked. This usually displays very quickly, and may not appear in all browsers
Button backgroundbackground color of the button
Button background hoverbackground color of the button when you hover a cursor over it
Button background activebackground color of the button when you click on it
Button bordercolor of the border around the button
Button border hovercolor of the border around the button when you hover a cursor over it
Button border activecolor of the border around the button when you click on it
Form input fields
Label text colorcolor of the form labels that appear above text boxes or product option selections
Field text colorcolor of text that appears inside a text box or drop-down menu
Field placeholder text colorcolor of example text that appears inside a text box or drop-down menu before the user starts typing
Field error text colorcolor of the error label text when a user attempt to submit the form without completing all required fields
Field backgroundbackground color of a drop-down menu or text box
Field inner shadowcolor of the shadow next to the field border
Field bordercolor of the border around drop down menus, text boxes and rectangle multiple-choice buttons
Checkbox button backgroundbackground color of checkboxes and payment method indicator
Form checklist
Background colorbackground color for payment methods
Form backgroundbackground color of the selected payment method
Form header text colorcolor of payment method name text (if not a logo)
Form border colorcolor of the borders around payment methods
Loading toaster
Toaster backgroundbackground color on the loading notification
Toaster text colorcolor of the text on the loading notification
 
 

Payment Buttons

Payment buttons are a feature of digital wallets that enhance your storefront checkout experience by allowing shoppers to place an order from product detail pages or in the cart. Unless otherwise indicated, these settings apply to PayPal Checkout, PayPal Pay Later, and Venmo payment buttons.

Product Details Page
PayPal button colorcolor of the PayPal Checkout button on product pages
PayPal Pay Later button colorcolor of the PayPal Pay Later button on product pages
Venmo button colorcolor of the Venmo button on product pages
Button contenttext that appears inside the PayPal Checkout button on product pages
Cart page & Added to Cart modal window
PayPal button colorcolor of the PayPal Checkout button on the cart page and in the Quick Cart modal
PayPal Pay Later button colorcolor of the PayPal Pay Later button on the cart page and in the Quick Cart modal
Venmo button colorcolor of the Venmo button on the cart page and in the Quick Cart modal
Button contenttext that appears inside the PayPal Checkout button on the cart page and in the Quick Cart modal
Top of Checkout
PayPal button colorcolor of the PayPal Checkout button at the top of the checkout page
PayPal Pay Later button colorcolor of the PayPal Pay Later button at the top of the checkout page
Venmo button colorcolor of the Venmo button at the top of the checkout page
Button contenttext that appears inside the PayPal Checkout button at the top of the checkout page
Checkout Payment Step (Complete order button)
PayPal button colorcolor of the PayPal Checkout button at the Payment step of checkout
PayPal Pay Later button colorcolor of the PayPal Pay Later button at the Payment step of checkout
Venmo button colorcolor of the Venmo button at the Payment step of checkout
Button contenttext that appears inside the PayPal Checkout button at the Payment step of checkout
Button sizesize of payment buttons at the Payment step of checkout
Buttons Container Size
Button Containersize of PayPal Checkout and PayPal Pay Later buttons on product pages, the cart page, and in the Quick Cart modal
Quick payment buttons on product page
Number of buttons always visiblerequires Quick payment buttons enabled in Cornerstone's Products settings. Displays either one or two payment buttons below the "Add to cart" button on product pages. Any additional buttons will appear in the More payment options modal below the payment buttons.
Sort orderspecify the display order by dragging and dropping the available buttons in the menu
Google Pay Button
Button colorcolor of the Google Pay button
Apple Pay Button
Button colorcolor of the Apple Pay button
Amazon Button
Button colorcolor of the Amazon Pay button
Bolt button
Button shapeshape of Bolt button
 
 

Payment Banners

The settings listed below are for styling the promotional banners available with PayPal Pay Later. You will need to enable Pay Later Messaging in the BigCommerce control panel if you are using PayPal or Braintree.

Product page banner
Banner style colorbackground color of the banner
Banner style ratiobanner aspect ratio
Home page banner
Banner style colorbackground color of the banner
Banner style ratiobanner aspect ratio
Cart page banner
Button text style colorcolor of the banner text
Banner style logo positionposition of the PayPal logo in the banner
Banner style logo typestyle of the PayPal logo in the banner
 

Changes to banner appearance do not take effect immediately after publishing. You must go to the settings tab for your payment gateway (Braintree or PayPal) in the control panel, then disable and re-enable Pay Later Messaging in order to see the changes in your store.

 
 

FAQ

Why doesn't the Payment Buttons section appear in Page Builder?

For Payment Buttons to display in Page Builder, your store needs:

Why doesn't the Payment Banners section appear in Page Builder?

For Payment Banners to display in Page Builder, your store needs:

Why isn't my storefront displaying the language I chose?

You must be using the latest version of Cornerstone for your language to be displayed on the storefront.