The Complete BigCommerce Cornerstone Theme Guide

New BigCommerce users will find that Cornerstone is set as their theme by default.

While there are hundreds of available BigCommerce themes to choose from if you’d like to switch, many stores decide to stick with Cornerstone. Out of the box, this theme gives you everything you need to create an attractive, high-converting online store.

In the BigCommerce Cornerstone guide below, we’ll teach you everything there is to know about this theme.

Anatomy of the BigCommerce Cornerstone Theme Homepage

The homepage of the BigCommerce Cornerstone theme is made up of the following components:

‍

1. Utility Navigation

At the top of the page, there are links that the customer can use to search, sign in, register an account and access their cart.

Many of your visitors will want to perform at least one of these actions, so it’s helpful to have these links above all your other content where they’re easy to find.

To customize the utility navigation, go to “Storefront” > “My Themes” and select “Customize.”

‍

In the customization settings, you can edit the utility navigation text color, text hover color, cart dropdown background color, cart dropdown border color and cart counter background color.

2. Logo

You have two options for your logo: you can use text or you can upload an image.

To configure your logo, log in to your BigCommerce store and go to “Storefront” > “Logo.”

‍

If you choose to use text, you can change the font size and font color here. If you choose to upload an image, keep in mind that the recommended dimensions are 250×100 pixels.

This page also allows you to change your favicon, which is the small image displayed for your site in browser tabs.

In the customization settings, you can change the logo position (center, left, right) and logo image size (optimized for theme, original as uploaded, specify dimensions).

3. Main Navigation

Again, it helps to have navigation options featured at the top of the page. If visitors can’t find what they’re looking for quickly, there’s a good chance that they’ll back out and try to find another option.

Links to your categories are displayed by default, and you can choose whether or not links to other web pages (contact us, blog, etc.) are displayed as well.

In the customization settings, you can edit the main navigation text color, text hover color, dropdown menu background color, dropdown menu border color and quick search background color. You also have two choices for your dropdown menu display mode: simple (maximum display depth of three) or alternate (unlimited display depth).

4. Carousel

The above-the-fold space on your homepage is premium real estate — if there’s a particular product or offer that you want visitors to notice, this is the place to put that message.

With a homepage carousel, you’ll be able to feature multiple messages in this area of your website.

Cornerstone supports JPEG, GIF and PNG image file types for the carousel. They recommend that you use the JPEG file type, as it provides you with the best balance between file size and image quality. They also recommend that you use 1400×600 pixels or 1400×800 pixels as your dimensions and all images included in your carousel should have the same dimensions.

In the customization settings, you can edit the content background color, header text color, description text color, indicator color (these icons help visitors keep track of which image/message they’re currently viewing), indicator active color, indicator background color, arrow color, arrow background color and arrow border color.

You can also decide whether to allow images to stretch on large screens, whether to show carousel arrows and whether to show the carousel at all.

#cta-visual-fe#<cta-title>Fast and Flexible CMS For BigCommerce<cta-title>Gain full control over your site without sacrificing page speed with Shogun Frontend.Learn more

5. Most Popular Products

The products featured in your Most Popular Products section are chosen automatically by BigCommerce. You cannot add products to it manually.

Note that products are ranked by the number of units sold rather than the number of orders. Sales made through third-party channels (Amazon, eBay, etc.) will be included in these rankings, while sales that were cancelled, refunded or used for testing purposes will be excluded.

In the customization settings, you can determine how many products are featured in this section (the available range is one to 12) or disable it completely.

6. New Products

Just like the Most Popular Products section, the New Products section is populated automatically, and you can choose to feature between one to 12 products or disable it completely.

7. Footer

In the customization settings, you can change the footer background color, and you can decide whether the following messages are displayed:

• “Powered by BigCommerce”
• Links to available brands
• “©,” current year and store name

The “Powered by BigCommerce” message can be useful for new stores that are just starting to attract an audience, as it lends you some extra credibility. But as your store grows, you should consider removing this message — it can give visitors the false impression that your business is an affiliate of BigCommerce.

You can also add logos for the following payment options in your footer:

• American Express
• Discover
• Mastercard
• PayPal
• Visa
• Amazon Pay
• Google Pay

This is helpful information for your customers, and adding the logos of these well-established brands is another way to make your website appear more legitimate (which, in turn, will make visitors more comfortable with buying from your store).

BigCommerce Cornerstone Theme Styles

The version of your theme will initially be set as Cornerstone Light, but you also have two other style options: Cornerstone Bold and Cornerstone Warm (this can be changed in the customization settings).

‍

With these options, you’ll be able to match the look of your site to your overall brand.

Additional BigCommerce Cornerstone Theme Features

You may be surprised by just how much is included with Cornerstone. Without adding any third-party apps, you’ll benefit from the following features:

Fully Responsive

When the first Blackberry was released in 1999, it was a novelty. Now, just a couple decades later, mobile devices have become a more popular way to browse the internet than desktops.

Your site needs to be responsive, which means it automatically adjusts to fit the size of the visitor’s screen. Otherwise, you’re going to lose a lot of potential business from mobile users. The Cornerstone theme is fully responsive by default, so you won’t need to worry about that.

Free Updates and Support

Cornerstone users (as well as the users of all other BigCommerce Stencil themes) have access to free updates and support. Note that this support does not include assistance with editing the HTML or CSS code of the theme.

Also, as the flagship BigCommerce theme, new features and improvements are typically rolled out to Cornerstone before other themes.

One-Page Checkout

These days, people are more distracted than they used to be. On top of the usual demands of work and family, there’s social media, fantasy sports, online gaming and all the other addictive innovations of the 21st century.

The more steps that the customer needs to take before they can make a purchase, the more likely it is that they’ll abandon their cart before completing their order.

In fact, according to the Baymard Institute, carts are abandoned before purchase about 70% of the time.

Abandoned carts are often caused by comparison shopping. Visitors can only see the true price of an order after shipping and other fees have been applied, and they’re not going to follow through with a purchase on your store if they can find a more attractive offer somewhere else. So, one way to reduce your abandoned cart rate is to reduce your base prices and shipping fees, if possible.

You can also reduce your abandoned cart rate by streamlining your checkout process. Forcing customers to click through separate pages for contact information, shipping information, and billing information gives them a lot of opportunity to lose interest. The Cornerstone theme’s default checkout process has all the steps for contact, shipping and billing on the same page, so you’ll be able to hold each shopper’s attention and make more sales.

Persistent Cart

A customer might add some items to their cart on their desktop computer, leave their home and then completely forget about the order they were planning on making while they were out.

With the Cornerstone theme’s persistent cart feature, any changes that a customer makes to their cart on one device will be reflected on all their other devices. In the scenario above, they might have noticed the items in their cart on their mobile device when they were out and then completed their order.

Product Images and Video

The benefits of online shopping are obvious. Instead of having to deal with traffic and wander through the aisles of a store to get what you want (all with the possibility that the item is out of stock and your trip is wasted), you can easily browse store inventory from home and have your order delivered right to your doorstep.

It’s not all positive, though. The most significant downside to online shopping for customers is that they don’t get a chance to evaluate products in person before they make a purchase.

That’s what makes high-quality product images so important to online stores. They allow customers to get a good look at what you have to offer, even though they can’t see it in person. Cornerstone is capable of handling large image files without slowing down your store.

Videos are an even more immersive way to compensate for the fact that customers can’t see your products in person. It’s easy to embed videos from YouTube and Vimeo on your BigCommerce store with Cornerstone.

For more information about this theme, refer to the BigCommerce Cornerstone GitHub page.