Cornerstone Theme Manual

Basic Theme Setup

Select a Theme Variation

Cornerstone comes packaged with four theme variations that curate the fonts, colors, and general style of your store. Check out our store demos to see the Light, Bold, and Warm variations.

Select your desired preset under the Styles section of your Theme Editor. Please note that switching to a new variation will overwrite your previous settings. You can, however, click Reset Theme Variant at the bottom of your Theme Editor.

Please note that the carousel’s text color is handled separately under MarketingHome Page Carousel, and will need to be manually changed to fit the theme variation.

Add Your First Product

To create your first product, navigate to ProductsAdd from your dashboard.

At minimum, you’ll want to add a product Name, Price, and Category, and then upload a product Image.

We recommend using PNG format for your product images and, if possible, to have 30 – 50px of white space between the product item and the edge of the photo.

See BigCommerce’s support article on Adding a Product for a full overview of product settings, including brands, product options, and tips on how to take better product photos.

Your store’s logo provides branding for your site and a clickable link to return to the homepage. The logo will appear in the header and footer of your site.

If you want to replace your store title with a logo image, go to Storefront DesignDesign Options and then click the Logo tab.

 

Select Upload a logo image from my computer. Then, under the Logo Upload section, choose the image file you want to upload. We recommend an image of at least 250 x 100px (with a similar 2.5:1 aspect ratio). Once your image is selected, click Upload Logo Image.

Leave the Resize Logo check box unchecked. This will enable you will to freely resize your logo in Theme Editor.

Image Position and Dimensions

In Theme Editor, you can adjust the Logo position to align left, center, or right.

Theme Editor also allows you to control the size of your Logo and Product Images.

To change the logo size, go to the Logo section in Theme Editor. You can adjust the size of the Logo to be the Original (as uploaded), Optimized for the theme, or Specify Dimensions. If Specify Dimensions is select, two boxes for max height and width will appear allowing you to enter dimensions. 

The input boxes for logo and image dimensions set a maximum width  and maximum height. If you change one maximum dimension, Theme Editor adjusts the opposite dimension to maintain the image’s original aspect ratio.

In addition to the logo, you can change product images’ default dimension on product pages and thumbnails. To change product images’ sizes, go to Theme Editor and then click the Product section.

 By default, the image sizes are normally set to Optimized for Theme in the drop-down menu. To change the maximum dimensions, select Specify Dimensions. In the new fields that appear, enter your desired maximum dimensions for image width and height.

You will see an updated view in your Theme Preview window.

The homepage carousel displays up to five images with a heading, subtitle, and a call-to-action button that can link to any page within your store or an external site. To add images to your Carousel, go to Store Design > Design Options and click the Carousel & Social Media tab. Then click on the slide that you’d like to add an image to, and either drag and drop a file to the outlined area or click the Select from your computer link to upload an image. You can re-order the slides by clicking and dragging them to your preferred order. All of the slide's information (the text and links) will be moved along with the slide.
  • Supported file types and image sizes
    We support JPEG, GIF, and PNG file types, but recommend using JPEG files to ensure a balance between image quality and fast loading-time. We also recommend using images approximately 1400 x 600px or 1400 x 800px. But most importantly, you’ll want to use slide images that are consistent in dimension.
  • Add carousel text content
    Once you’ve uploaded an image, you can add a Heading, Subtitle, and Button Text by typing in the corresponding fields. 

    You can set the URL for the call-to-action button links by either typing the link directly into the Link field or clicking Browse to choose a Product, Category, Brand, Page, or Blog from the Store Linker. Click Insert Link and Save.
  • Set carousel autoplay time
    Along with the Carousel’s content, you can customize the duration that each slide appears on the screen before automatically switching to the next slide. Type the number of seconds between slide changes under the Settings heading on the right-hand side of the same Home Page Carousel Page. Then click Save.

Add a Contact Page

Our themes have a built-in Contact Page that provides customers an easy way to send a message or question to store merchants without leaving the storefront.

From your sidebar control panel, go to ContentWeb Pages and then click Create a Web Page at the top of your Pages list.

Under Web Site Link, enable the Allow people to send questions/comments via a contact form option. Then, under Web Page Details, enter a name for the Contact page. The Page URL will auto-fill based on the page name.

Once you’ve created your Contact Page, you can go back to the View Web Pages page from the Content tab on your sidebar. From the Page Name list, you can drag and drop your Contact Page to reorder how it appears in your Menu, or drag it under other pages and categories to create drop-down menus in your Navigation. Remember to click Save.

You can also insert content (such as text and images) in the Page Content area that will appear above the Contact Form.

See the Creating a Contact Form section of our Web Pages article for more information and options for configuring your contact form.

Your navigation menu will be automatically generated from your create pages, categories, and brands. This menu will appear both in your header and footer.

Keep any navigation titles (Brands, Categories, etc.) short and concise, ideally one word long, to avoid overlap in your menu.

To control which pages are displayed in your menu, go to ContentWeb pages. Here, you can deselect the check mark under Visible to hide any pages. Click Save and Exit.

You’ll find the same option to hide or show links under your Brands and Category listings, accessed from your control panel.

Product Management

Product Page

In Theme Editor, select how many Product reviews, Related Products, and Customers Also Viewed Products to display, by using the drop-downs provided.

Product images and layout
When uploading your product images, please keep in mind that they are not cropped in any way. They can be any size, but try to keep all products in your shop the same size, or at least the same aspect ratio. This will make for a more attractive product grid.

Minimum Product Image dimensions:
We recommend using PNG format for your product images and, if possible, to have 30 – 50px of white space between the product item and the edge of the photo.

If you have multiple images for your product, you can enable the Slideshow layout under the Products section of your theme editor, which will display your images as a carousel with slider navigation.
  • Products: 500 x 659px
  • Products with a zoomable view: 1280 x 1280px

Categories, Brands, and Home Page

Featured image
For your category or brand featured image, we recommend using an image both wide and short.

  • A featured image can only be added to a secondary (child) category. Go to Products > Product categories, select a child category and then upload an image to Category image.
  • For a brand featured image, go to Products > Brands, then select a brand and upload an image to Brand image.

Quick shop
Quick shop provides a pop-up modal for your customers to easily view details and purchase your products without navigating away from the category, brand, or home page. To disable quick shop, use the drop-down in the Other Product Options section of your theme editor.

Product comparison On category and brand pages, a customer can select two or more products to compare them. To get the most out of this feature, we recommend adding as much detail as possible to your individual products.

Product Grid Text Alignment Under Theme Editor's Product Grid section, you can set the Text alignment to Left, Center, or Right.

Customize Your Store

Typography and Colors

In Theme Editor, you can customize your storefront's fonts and colors. For the typography of your site, you'll find the font options under Theme Editor's corresponding sections.

Under the General Colors section, you’ll find color options for virtually every element of your store, including colors for User Alerts. There are also specific color options under each Theme Editor section. You can see the changes in real-time within Theme Editor’s preview.

Favicon

A favicon is the small graphic that appears to the left of the page title at the top of your browser window.

To upload a custom favicon for your store, first create an image 16 x 16px or 32 x 32px in dimension. The image must be saved in ICO, JPG, GIF, or PNG format.

Go to Storefront DesignDesign Options, then click MoreFavicon. Click Choose File to select the favicon from your computer. Click Upload Favicon.

Banners

Banners allow you to add promotional links and images throughout your store to advertise special deals and discounts to your shoppers.

Go to MarketingBanners to begin. Banners can be added to the Homepage, to a specific category or brand, and to the results page. Use the rich text editor to add text and links. You can enable your banner or choose to display it between specific dates.

See our article on Creating & Editing Banners for more information.

The featured, new, and popular products sections are automatically displayed on your home page. In your theme editor, under the Home page Settings section, you can use the drop-downs to control how many products are displayed (up to 12) or disable them from being shown.

Recent Blog Posts

By default, three of your most recent blog posts are displayed on your home page. Under Theme Editor's Home page section, you can control how many posts are displayed (3, 6, 9) or disable posts from being shown.

Home Page Columns

Under Theme Editor's Home Page Settings section, set the Number of Columns on the home page to 2 or 3. To further control the appearance of your home page, set the Width of first Product on the Home Page to the width of one or two columns.

Section Title Alignment

Under Theme Editor's Section Titles section, you can set the Text alignment to Left, Center, or Right.

Your footer contains menus and contact information that you can toggle on or off. Menus for Pages, Categories, and Brands will be auto-generated, and you can also show your Shop address / phone number.

Please note that the brand menu list is limited to the first five brands and the category menu list will only show the top-level categories in your theme (child categories will be hidden).

The contact info in your footer can be edited from your control panel under SettingsStore Profile in the available fields.

For your logo image to work best in both the header and footer, upload one with a transparent background in PNG format.

Under the Footer section of your theme editor, you can toggle off the option Show theme credits.

Newsletter

The Newsletter will appear in different places depending on your theme, but its functionality will be the same. To set this up, go to your MarketingSettingsEmail Marketing.

Under General Settings, find the Email Integration Settings, and enable the email campaign monitor that you want to use for your Newsletter. Big Commerce supports Constant Contact, iContact, Interspire Email Marketer, and MailChimp. You can still enable Newsletter Subscriptions if your chosen Integration Provider is not on this list.

To do this, click the Export Only tab at the top, enter in the number of emails you’d like to export in the Subscriber Count field, and click the Download to CSV file link. This will export all of the subscribers’ emails to a CSV file, which you can then upload to your chosen email campaign platform.

You can also click the Delete all subscribers to remove everyone on your newsletter subscription list to start fresh.

Make sure that the Allow Newsletter Subscriptions? box is enabled, and click Save.

See Collecting Newsletter Subscriptions for more details.

Built-In Blog

Post updates on products, upcoming events, and other news in your shop’s built-in blog. Navigate to the Blog settings by clicking on ContentBlog.

Set Up a Blog

To name your blog, click on the gear icon under the Published tab. Name your blog in the Blog Title field, and set the URL in the Blog URL field. You can also enable or disable Disqus Comments on this page. Click Save Settings to save the Blog name and URL.

Create a Blog Post

To add a post, navigate back to the main Blog Settings page by going to ContentBlog and click the + icon under the Published tab. Give your post a title in the Title field, write the content and add images in the Body Text Editor, and enter the Author of the blog in the Author field. You can also add tags for each post in the Tags section. To add a tag, type a tag in the Tags field, and hit Enter on the keyboard to separate the tags.

To upload an image that will appear as the post’s Thumbnail, choose a file and clicking Upload in the Summary thumbnail image section.

You can also customize each post’s URL in the Post URL field, and add a Meta Description to help improve your blog’s SEO. Click Save Draft to save the post without publishing to work on it later, or click Publish to publish the post immediately. Make sure your Blog Visibility is set to On.

For your blog featured image, we recommend using an image both wide and short. The minimum width is 1020px and is ideally within the 1020 x 420px range.

See Using the Built-In Blog for more information about your blog settings.

Social Media Links

Link your social media profiles to icons on your homepage so customers can keep up to date with your other social platforms.

Go to Store DesignDesign Options and click the Carousel & Social Media tab. Scroll down to the Social Media section, and input the your social media profile links to the corresponding icon beside Available Networks. Make sure you include http:// before the link.

You can also re-order your social media links to display in a particular order by clicking on the dotted grid to the left of the icon and dragging it to rearrange the order. Click Save.

See Using the Built-In Social Media Icons for more information.

Pages

RSS

The RSS (Really Simple Syndication) page allows your visitor to subscribe to any new content, including new products and blog posts.

See Using Syndication Feeds for more details on using RSS.

Sitemap

The site map page is pre-published and provides a list of all pages of your store.

Shipping and Returns

Keep your customers up to date with your Shipping and Returns policy by including a Page dedicated to this information. BigCommerce automatically populates this page with a Shipping and Returns policy.

To change it, head to your ContentWeb Pages tab, and click on the Shipping and Returns page in the Pages list.

Edit the policy already written, or start new by deleting everything in the Page Content area and write your own. You can rename your Page, create a new URL, add or remove it from your Menu by toggling the Navigation Menu on or off, and optimize your Shipping and Returns SEO under the Advanced Options. Click Save.

Release Notes

Was this article helpful?