Browse by Topic

Cornerstone Theme Manual

Cornerstone is our free, basic theme available to all stores. It comes in three styles variations, each of which can be customized using the Store Design theme editor. New theme features and Store Design improvements appear first on Cornerstone. See the BigCommerce Developer Changelog for the latest theme news and updates.
 
 

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.

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. Please refer to the BigCommerce Design Policy for more information.

 
 

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
Primary linechanges the color of lines that divide header, footer and product description
Common dark backgroundthe color of the overlay when using quick view
Modal overlay backgroundchanges the color of dark backgrounds such as the block that appears when a shopper adds a product to the cart
Alert popup box background colorchanges the color of popup messages and alerts
Horizontal linescolor 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 colorcolor of the filled portion of the spinner
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 familyselect the font 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 coloraffects 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
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 that appears while a thumbnail image loads
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 drop-down menu or text box
Field background disabledcolor of a choice when it’s not selectable
Field bordercolor of the border around drop down menus, text boxes and rectangle multiple-choice buttons
Field border activecolor of the border around drop down-menus, text boxes and rectangle multiple-choice buttons when you click to enter text or make a choice
 
 

Home Page

Carousel
Show carouseltoggle the carousel 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
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 badgesdisplay style of the sale badge
Product price label (sale)color of the Sale Price text
Product price label (before sale)color of the Default Price text
Product price label (retail)color of the retail/MSRP price text
Product price labelcolor 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
Display settings
Show quickview button on product cardstoggle the quickview feature
Show product description tabsproduct descriptions under a tabbed area or directly on the page
Show product weightdisplay the product's entered shipping weight
Show product dimensionsdisplay the shipping dimensions for the product
Show “Shop by price” in filtersshow the shop by price feature
Wishlist dropdown backgroundcolor of the dropdown menu background when Add to Wish List is clicked
Number of reviews on product pagenumber of reviews displayed below the product description
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
Thumbnail image in cartsize of the thumbnail images that appear in the cart
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 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 button behind the text
Button text active colorcolor of the text in the button when you click on it
Button bordercolor of the line around the button
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 icons that are empty in a star rating display
Star review icon (empty)color of the star icon rating that gets counted
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

Header
Use background imagecheck this box to upload an image to display behind the logo. Recommended dimensions are 1000 x 400 pixels.
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 typeAdd an image for your logo. By default, it will inherit the settings from the Logo tab.
Logo positionmoves the logo to the left, center or right side of the header.
Discount banner
Banner backgroundcolor of cart-level discount notifications (set up in Marketing)
Banner text colorcolor of the text in cart-level discount notifications
Banner iconcolor of the icon that appears in cart-level discount 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 text disabled color 
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
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

Was this article helpful?