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.
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/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 background | changes the background color that appears behind text on a banner |
| Page background | changes the background color of the overall site. It does not change the color of the header or footer backgrounds |
| Common dark background | changes the color common overlays such as the overlay of buttons in the Add to Cart popup |
| Modal overlay background | changes 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 color | changes the color of popup messages and alerts |
| Alert popup text color | changes the color of the text in popup messages and alerts |
| Horizontal line | color of lines that divide header, footer, and product description |
| Text & 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 | changes color of the body text |
| 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 | |
| Heading font family | font face to use for all headings |
| Heading 1 | changes the size of large titles, such as the title of a Category or the Featured Product section on the home page |
| Heading 2 | changes the size of h2 headings, such as the price on a product’s page |
| Heading 3 | changes the size of h3 headings, such as heading text within a web page or product description |
| Heading 4 | changes the size of h4 text, such as heading text within a web page or product description |
| Heading 5 | changes the size of h5 text, such as product names, top navigation, Carousel button text, and Related Products tab |
| Heading 6 | changes the size of h6 text, such as the titles of options |
| Heading text color | changes text color of all headings |
| 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 of the thumbnail background, also appears while a thumbnail image loads |
| Image Loading | |
| Lazyloading Mode | controls 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 breadcrumbs | removes breadcrumbs on product and category pages |
| Hide page heading | removes the title on web pages |
| Hide category page heading | removes the category name heading from category pages |
| Hide blog page heading | removes the title of the blog page |
| Hide contact us page heading | removes the title of the contact us page |
| Products | |
| Display style | select to display in a grid or a list |
| 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 |
| 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 dropdown menu or text box |
| Field background disabled | color of a choice when it’s not selectable |
| Field border | color of the border around dropdown menus, text boxes, and rectangle multiple-choice buttons |
| Field border active | color 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 carousel | toggles the carousel on or off |
| Show carousel arrows | toggles the left and right arrows on or off |
| Show carousel Play/Pause button | toggles the Play/Pause button on or off |
| Allow image to stretch on large screens | prevents cropping of large carousel images if the viewing screen is wider than 1261 pixels |
| Content background | color of the box overlay on the Carousel |
| Header text | color of the large text on the Carousel |
| Description text | color of the smaller text on the Carousel |
| Indicator | color of the empty dot below the Carousel if there is more than one slide |
| Indicator active | color of the full dot below the Carousel if there is more than one slide |
| Indicator background | color of the box behind the dots below the carousel if there is more than one slide |
| Arrow | color of the left and right arrows if there is more than one slide |
| Arrow background | color of the box behind the arrows if there is more than one slide |
| Arrow border | color of the border of the box behind the arrows if there is more than one slide |
| Play/Pause button text | color of the Play/Pause button text if there is more than one slide |
| Play/Pause button background | color of the box behind the Play/Pause button if there is more than one slide |
| Play/Pause button border | color of the border of the box behind the Play/Pause button if there is more than one slide |
| Products | |
| Number of Featured Products | how many featured products to display on the home page, or disable this feature |
| Number of Most Popular Products | how many most popular products to display on the home page, or disable this feature |
| Number of New Products | how many new products to display on the home page, or disable this feature |
Products
| Product sale badges | |
| Show product sale badges | changes 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 label | changes 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 label | changes the text of the price label when there is no sale price (like the “As low as” text) |
| Badge text color | color of the text on the sale badge |
| Badge color | background color of the sale badge |
| Badge hover color | color of the sale badge when a cursor hovers over it |
| Show product sold-out badges | changes 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 label | changes the text in the sold-out badge |
| Badge text color | color of the text on the sold-out badge |
| Badge color | background color of the sold-out badge |
| Badge hover color | color of the sold-out badge when a cursor hovers over it |
| Display settings | |
| Show quickview button on product cards | toggles the quickview feature |
| Show quantity selection on product pages | toggles the quantity selector |
| Show product description tabs | displays product descriptions under a tabbed area or directly on the page |
| Product custom fields in tabs | displays 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 label | changes the text of the custom fields tab |
| Show product weight | displays the product's entered shipping weight |
| Show product dimensions | displays the shipping dimensions for the product |
| Show product swatch names | displays the swatch name when selected |
| Show “Shop by price” in filters | displays the shop by price feature |
| Show product reviews | displays reviews on product pages |
| Show quick payment buttons |
displays payment buttons for digital wallets enabled with your payment gateways. The following digital wallets are supported:
|
| Number of reviews on product page | number of reviews displayed below the product description |
| Wishlist dropdown background | color of the dropdown menu background when Add to Wish List is clicked |
| Number of products displayed | |
| Category page | number of products that appear on one page in a category |
| Brand page | number of products that appear on one page on a brand page |
| Search result page | number 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 color | color of the product’s title when viewed on the home page, category page, or search result |
| Product header text hover color | color of the product's title when you hover a cursor over it |
| Button text color | text color of the buttons, such as Add to Cart or Quick View, that appear when you hover over the product image |
| Button background | background 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 color | color behind the text with the product’s title and price |
| Border color | color of the border around the product |
| Text hover color | color of the text when the cursor hovers over the product card |
| Image sizes | |
| Main product images | size 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 page | size of the thumbnails under the main product image for products with more than one image |
| Thumbnail image in cart and other pages | size of the thumbnail images that appear in the cart |
| Zoomed image | size of the zoomed product image when a cursor hovers over it |
| Image in gallery view | size of product images when they appear on the category page, brand page, or search results |
| Brand image in gallery view | size of the brand image when viewed on the brands page |
| Product swatch images | size for swatch options images |
Buttons & Icons
| Primary action button | |
| Button text color | color of the text inside the button |
| Button text hover color | color of the text in the button when you hover a cursor over it |
| Button text active color | color of the text in the button when you click on it |
| Button background | color of the button behind the text |
| Button background hover | color of the button behind the text when you hover a cursor over it |
| Button background active | color of the button behind the text when you click on it |
| Secondary action button | |
| Button text color | color of the text inside the button |
| Button text hover color | color of the text in the button when you hover a cursor over it |
| Button text active color | color of the text in the button when you click on it |
| Button border | color of the line around the button |
| Button border hover | color of the line around the button when you hover a cursor over it |
| Button border active | color of the line around the button when you click on it |
| Tertiary action button | |
| Button background | color of the “sort by” filter selector/drop-down |
| Button arrow icon | color of the arrow in the “sort by” filter selector/drop-down |
| Disabled button | |
| Button text color | color of the text inside the disabled button |
| Button background | color of the button behind the text |
| Button border | color of the border around the button |
| Icons | |
| Social media icon | color of social media icons in the footer |
| Social media icon hover | color 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 | color of the quantity change buttons |
| Checkboxes and radio buttons | |
| Checkbox and radio icon | color of the checkmark on checkboxes, or the dot on radio buttons |
| Button background | color of the box behind the check mark or radio dot |
| Button border | color 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 image | check this box to upload an image to display behind the logo. Recommended dimensions are 1000 x 400 pixels |
| Header image size | size of the background image behind the logo |
| Background color | color that appears behind the logo |
| Header text color | color of header text if using a text logo |
| Header border | color of the border around the header |
| Logo | |
| Logo type | adds 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 position | moves the logo to the left, center or right side of the header. |
| Discount banner | |
| Banner background | color of Automatic Promotion notifications (set up in Marketing) |
| Banner text color | color of the text in Automatic Promotion notifications |
| Banner icon | color of the icon that appears in Automatic Promotion notifications |
| Order summary box | |
| Box background | color of the order summary box background |
| Box border | color of the border around the order summary box |
| Checkout steps | |
| Icon background | color of the circle behind the icon/number |
| Icon border | color of the border of the circle around the icon/number |
| Icon text color | color of the icon/number in the step |
| Headings | |
| Heading 1 font family | font face for h1 text |
| Heading 1 text color | color of h1 text |
| Heading 2 font family | font face for h2 text |
| Heading 2 text color | color of h2 text |
| Body | |
| Page background | color of the page background |
| Focus color | color of the focused/selected field on the checkout form |
| Body text and links | |
| Body text font family | font face for the text that appears on the checkout page |
| Body text color | color of the text that appears on the checkout page |
| Secondary text font family | font face of text that is not a title, label or informational text |
| Secondary text color | color of text that is not a title, label or informational text |
| Link font family | font face for text links that appear on the checkout page |
| Link color | color for text links that appear on the checkout page |
| Link hover color | color of text links when you hover a cursor over it |
| Primary action button | |
| Button text font family | font face for buttons |
| Button text color | color of the text inside these buttons |
| Button text hover color | color of the text in the button when you hover a cursor over it |
| Button text active color | color of the text when the button is clicked. This usually displays very quickly, and may not appear in all browsers |
| Button text disabled color | color of the text when the button |
| Button background | color of the button behind the text |
| Button background hover | color of the button behind the text when you hover a cursor over it |
| Button background active | color of the button behind the text when you click on it |
| Button background disabled | color of the button behind the text when disabled |
| Button border | color of the line around the button |
| Button border hover | color of the line around the button when you hover a cursor over it |
| Button border active | color of the line around the button when you click on it |
| Button border disabled | color of the line around the button when disabled |
| Secondary action button | |
| Button text font family | font face for buttons |
| Button text color | color of the text inside these buttons |
| Button text hover color | color of the text in the button when you hover a cursor over it |
| Button text active color | color of the text when the button is clicked. This usually displays very quickly, and may not appear in all browsers |
| Button background | color of the button behind the text |
| Button background hover | color of the button behind the text when you hover a cursor over it |
| Button background active | color of the button behind the text when you click on it |
| Button border | color of the line around the button |
| Button border hover | color of the line around the button when you hover a cursor over it |
| Button border active | color of the line around the button when you click on it |
| Form input fields | |
| Label text color | color of the form labels that appear above text boxes or product option selections |
| Field text color | color of text that appears inside a text box or drop-down menu |
| Field placeholder text color | color of example text that appears inside a text box or drop-down menu before the user starts typing |
| Field error text color | color of the error label text when a user attempt to submit the form without completing all required fields |
| Field background | color that appears behind the text in a drop-down menu or text box |
| Field inner shadow | color of the shadow next to the field border |
| Field border | color of the border around drop down menus, text boxes and rectangle multiple-choice buttons |
| Checkbox button background | color of checkboxes and payment method indicator |
| Form checklist | |
| Background color | color of the background for payment methods |
| Form background | color of the active/selected payment method |
| Form header text color | color of payment method name text (if not a logo) |
| Form border color | color of the borders around payment methods |
| Loading toaster | |
| Toaster background | color of behind the text on the loading notification |
| Toaster text color | color 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 color | color of the PayPal Checkout button on product pages (Gold, Blue, Silver, Black, White) |
| PayPal Pay Later button color | color of the PayPal Pay Later button on product pages (Gold, Blue, Silver, Black, White) |
| Venmo button color | color of the Venmo button on product pages (Blue or White) |
| Button content | text that appears inside the PayPal Checkout button on product pages (PayPal Checkout, Pay with PayPal, Buy Now, PayPal) |
| Cart page & Added to Cart modal window | |
| PayPal button color | color of the PayPal Checkout button on the cart page and in the Quick Cart modal (Gold, Blue, Silver, Black, White) |
| PayPal Pay Later button color | color of the PayPal Pay Later button on the cart page and in the Quick Cart modal (Gold, Blue, Silver, Black, White) |
| Venmo button color | color of the Venmo button on the cart page and in the Quick Cart modal (Blue or White) |
| Button content | text that appears inside the PayPal Checkout button on the cart page and in the Quick Cart modal (PayPal Checkout, Pay with PayPal, Buy Now, PayPal) |
| Top of Checkout | |
| PayPal button color | color of the PayPal Checkout button at the top of the checkout page (Gold, Blue, Silver, Black, White) |
| PayPal Pay Later button color | color of the PayPal Pay Later button at the top of the checkout page (Gold, Blue, Silver, Black, White) |
| Venmo button color | color of the Venmo button at the top of the checkout page (Blue or White) |
| Button content | text that appears inside the PayPal Checkout button at the top of the checkout page (PayPal Checkout, Pay with PayPal, Buy Now, PayPal) |
| Checkout Payment Step (Complete order button) | |
| PayPal button color | color of the PayPal Checkout button at the Payment step of checkout (Gold, Blue, Silver, Black, White) |
| PayPal Pay Later button color | color of the PayPal Pay Later button at the Payment step of checkout (Gold, Blue, Silver, Black, White) |
| Venmo button color | color of the Venmo button at the Payment step of checkout (Blue or White) |
| Button content | text that appears inside the PayPal Checkout button at the Payment step of checkout (PayPal Checkout, Pay with PayPal, Buy Now, PayPal) |
| Button size | size of payment buttons at the Payment step of checkout (Small, Medium, Large) |
| Buttons Container Size | |
| Button Container | size of PayPal Checkout and PayPal Pay Later buttons on product pages, the cart page, and in the Quick Cart modal (Small, Medium, Large) |
| Quick payment buttons on product page | |
| Number of buttons always visible | with Quick payment buttons enabled in Cornerstone's Products settings that 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 order | specify the display order by dragging and dropping the available buttons in the menu |
| Google Pay Button | |
| Button color | color of the Google Pay button (Black with white text or White with black text) |
| Apple Pay Button | |
| Button color | color of the Apple Pay button (Black with white text, White with black text, or White with black text and black border) |
| Amazon Button | |
| Button color | color of the Amazon Pay button (Gold, Light Gray, Dark Gray) |
| Bolt button | |
| Button shape | shape of Bolt button (Pill or Rectangle) |
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 PayPal powered by Braintree.
| Product page banner | |
| Banner style color | color of the banner background (Blue, Black, White, White no border [default], Gray, Monochrome, Grayscale) |
| Banner style ratio | changes the aspect ratio (8x1, 20x1) |
| Home page banner | |
| Banner style color | color of the banner background (Blue, Black, White, White no border [default], Gray, Monochrome, Grayscale) |
| Banner style ratio | changes the aspect ratio (8x1, 20x1) |
| Cart page banner | |
| Button text style color | color of the banner text (Black [default], White, Monochrome, Grayscale) |
| Banner style logo position | position of the PayPal logo in the banner (Left, Right, Top) |
| Banner style logo type | style of the PayPal logo in the banner (Inline, Primary, Alternative, None) |
Changes to banner appearance do not take effect immediately after publishing. You must go to the settings tab for your payment gateway (PayPal Powered by 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 show up in Page Builder, your store needs:
- Cornerstone 2.6.0 or higher (or other compatible theme)
- Optimized One-Page Checkout enabled
Why doesn't the Payment Banners section appear in Page Builder?
For Payment Banners to show up in Page Builder, your store needs:
- Cornerstone 5.5.0 or higher (or other compatible theme)
- Optimized One-Page Checkout enabled
- Pay Later Messaging enabled via PayPal or PayPal powered by Braintree
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.
© Copyright 2003 - 2023 BigCommerce Pty. Ltd. Shopping Cart Software