Browse by Topic

Cornerstone Theme Manual

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 and mobile), and has built-in features to help you sell, like a homepage carousel (slideshow), social media icons, featured/top-selling/new product panels, and support for faceted search (product filtering).

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 articles on Fixing Distorted Images and Adjusting Store Image Sizes.

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/trial stores, Cornerstone is typically the first theme to support new theme-related features and improvements.

See the BigCommerce Developer Changelog for the latest Cornerstone news and release notes.

 
 

Global

Background and lines
Banner backgroundchanges the background color that appears behind text on a banner
Page backgroundchanges the background color of the overall site. It does not change the color of the header or footer backgrounds
Common dark backgroundchanges the color common overlays such as the overlay of buttons in the Add to Cart popup
Modal overlay backgroundchanges the color of dark backgrounds such as the block that appears when a shopper adds a product to the cart or uses quick view
Alert popup box background colorchanges the color of popup messages and alerts
Alert popup text colorchanges the color of the text in popup messages and alerts
Horizontal linecolor of lines that divide header, footer, and product description
Text & links
Body text font familyfont face to use for body text
Body text font sizefont size to use for body text
Body text colorchanges color of the body text
Body text hover coloraffects the color of text, such as Logo Text, when you hover a cursor over it
Secondary text colorchanges 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 coloraffects the color of text such as the text in the footer when a cursor hovers over it
Link colorhyperlinks created on webpages will have this color
Link hover colorthe color displayed when a cursor hovers over a link
Link active colorthe color 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 1changes the size of large titles, such as the title of a Category or the Featured Product section on the home page
Heading 2changes the size of h2 headings, such as the price on a product’s page
Heading 3changes the size of h3 headings, such as heading text within a web page or product description
Heading 4changes the size of h4 text, such as heading text within a web page or product description
Heading 5changes the size of h5 text, such as product names, top navigation, Carousel button text, and Related Products tab
Heading 6changes the size of h6 text, such as the titles of options
Heading text colorchanges text color 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 backgroundcolor of the thumbnail background, also appears while a thumbnail image loads
Image Loading
Lazyloading Modecontrols how images load before the user scrolls ot them on the screen. Enable "Lazyloading with LQIP" below if you prefer to show a preview image and replace it with a better quality version as the user scrolls. Select "Disabled" below to fully turn off this feature
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 imagesset it to optimize for theme or specify dimensions
Pricing
Price Rangesshow the range of prices (lowest and highest) for products with variants
Purchase optionshide prices and add to cart buttons unless shoppers are logged in
Form input fields
Label text colorchanges the color of the form labels that appear above text boxes or product option selections
Field text colorthe color of text that appears inside a text box or drop-down menu
Field backgroundcolor that appears behind the text in 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 backgroundcolor 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 backgroundcolor of the box behind the dots 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 backgroundcolor 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 textcolor 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 Productshow many featured products to display on the home page, or disable this feature
Number of Most Popular Productshow many most popular products to display on the home page, or disable this feature
Number of New Productshow many new products to display on the home page, or disable this feature
 
 

Products

Product sale badges
Show product sale badgeschanges display style of the sale badge to Top Left, Diagonal, or Burst, or choose None to disable sale badges. Disabling product sale badges will hide the label and badge settings below in Page Builder
Product sale badge labelchanges the text in the sale badge
Product price label (sale)changes the Sale Price text
Product price label (before sale)changes the Default Price text
Product price label (retail)changes the retail/MSRP price text
Product price labelchanges the text of the price label when there is no sale price (like the “As low as” text)
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 badgeschanges display style of the sold-out badge to Top Left, Diagonal, or Burst, or choose None to disable sold-out badges. Disabling product sold-out badges will hide the label and badge settings below in Page Builder
Product sold-out badge labelchanges the text in 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 quickview feature
Show quantity selection on product pagestoggles the quantity selector
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 in tabs setting in Page Builder
Product custom fields tab labelchanges the text of the custom fields tab
Show product weightdisplays the product's entered shipping weight
Show product dimensionsdisplays the shipping dimensions for the product
Show product swatch namesdisplays the swatch name when selected
Show “Shop by price” in filtersdisplays the shop by price feature
Show product reviewsdisplays reviews on product pages
Number of reviews on product pagenumber of reviews displayed below the product description
Wishlist dropdown backgroundcolor of the dropdown menu background when Add to Wish List is clicked
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
Product page (customers also viewed products)number of Customers Also Viewed products displayed below the product description
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 colorcolor behind the text with the product’s title and price
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 article on Adjusting Store Image Sizes 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 backgroundcolor of the button behind the text
Button background hovercolor of the button behind the text when you hover a cursor over it
Button background activecolor of the button behind the text 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 line around the button
Button border hovercolor of the line around the button when you hover a cursor over it
Button border activecolor of the line around the button when you click on it
Tertiary action button
Button backgroundcolor of the “sort by” filter selector/drop-down
Button arrow iconcolor of the arrow in the “sort by” filter selector/drop-down
Disabled button
Button text colorcolor of the text inside the disabled button
Button backgroundcolor of the button behind the text
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 buttoncolor 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 backgroundcolor of the box behind the check mark or radio dot
Button bordercolor of the border around the checkbox/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 imagecheck this box to upload an image to display behind the logo. Recommended dimensions are 1000 x 400 pixels
Header image sizesize of the background image behind the logo
Background colorcolor 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 the Logo tab. If a unique logo image is chosen, you can select the size to be Optimized for theme or Specify dimensions. The Optimized for theme option's size is 250 x 100 pixels
Logo positionmoves the logo to the left, center or right side of the header.
Discount banner
Banner backgroundcolor of Automatic Promotion notifications (set up in Marketing)
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 backgroundcolor of the order summary box background
Box bordercolor of the border around the order summary box
Checkout steps
Icon backgroundcolor of the circle behind the icon/number
Icon bordercolor of the border of the circle around the icon/number
Icon text colorcolor of the icon/number 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 backgroundcolor of the page background
Focus colorcolor of the focused/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
Button backgroundcolor of the button behind the text
Button background hovercolor of the button behind the text when you hover a cursor over it
Button background activecolor of the button behind the text when you click on it
Button background disabledcolor of the button behind the text when disabled
Button bordercolor of the line around the button
Button border hovercolor of the line around the button when you hover a cursor over it
Button border activecolor of the line around the button when you click on it
Button border disabledcolor of the line around the button when 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 backgroundcolor of the button behind the text
Button background hovercolor of the button behind the text when you hover a cursor over it
Button background activecolor of the button behind the text when you click on it
Button bordercolor of the line around the button
Button border hovercolor of the line around the button when you hover a cursor over it
Button border activecolor of the line 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 backgroundcolor that appears behind the text in 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 backgroundcolor of checkboxes and payment method indicator
Form checklist
Background colorcolor of the background for payment methods
Form backgroundcolor of the active/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 backgroundcolor of behind the text on the loading notification
Toaster text colorcolor of the text on the loading notification
 
 

Payment Buttons

The payment buttons listed below are for Venmo, as well as PayPal. Please note that Venmo will only show for shoppers viewing the store on a device with Venmo installed, to ensure shoppers see only the most appropriate payment options for them. You will need to enable Venmo from your Braintree dashboard, or in the BigCommerce control panel if you are using PayPal.

Show PayPal taglineshows short descriptive text under the payment buttons. For example, "The safer, easier way to pay" is shown when it's just the PayPal button and "Two easy ways to pay" is shown when both PayPal and PayPal Credit buttons are displayed
Show funding iconsshows additional funding/card logos like Visa, Mastercard, Amex, and Discover
Button colorcolor of the PayPal button. (Gold, Blue, Silver, Black, White)
Button shapeshape for payment buttons (Pill or Rectangle)
Button sizesize for payment buttons. (Small, Medium, Large, Responsive)
Button contenttext that appears inside the PayPal button. (PayPal Checkout, Pay with PayPal, Buy Now, PayPal)
Display styleshow buttons side by side (horizontally) or stacked (vertically)
 

Warning: The following styles are not compatible with Display Style: Show buttons vertically layout and can cause the button to fail to render.

  • Button size: Small
  • Show PayPal tagline
  • Show funding icons
Checkout PayPal button
Button colorcolor of the PayPal button. (Gold, Blue, Silver, Black, White)
Button shapeshape of PayPal button (Pill or Rectangle)
Button sizesize of PayPal button (Small, Medium, Large, Responsive)
Button contenttext that appears inside the PayPal button (PayPal Checkout, Pay with PayPal, Buy Now, PayPal)
 
 

FAQ

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

For Payment Buttons to show up 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.

Was this article helpful?