Capacity Theme Manual
Get your bearings
New to BigCommerce?
If you're setting up a BigCommerce store for the first time, we highly recommend heading over to their site and taking a look at their support resources. From their community forums to their documentation to their BigCommerce University video series, they have everything you need to start your ecommerce journey on the right foot.
Here are a few articles that cover the basics of setting up a store:
The BigCommerce dashboard
This is what your dashboard will look like when you first sign up for BigCommerce. You can go just about anywhere and do just about anything from here. It can be a little overwhelming at first, which is why we recommend taking a quick guided tour to get your bearings.
Our documentation deals primarily with customizing the content and design of your store. If you're looking at the dashboard, we'll be covering the items listed under Storefront Content, Storefront Design, and a little bit of Marketing in these docs. If you're looking for basic information on how to add products, configure categories, set shipping rates, or anything else that isn't directly related to your theme, please consult BigCommerce's documentation or contact their support centre.
Upload and customize your theme
How to upload your theme
If you've purchased your theme directly from BigCommerce, it will be automatically installed when you log into your BigCommerce dashboard. You'll find all of your themes by navigating to Storefront Design>My Themes. Your Current Theme will display at the top, and any previously installed themes will appear below it.
If you want to publish a theme that isn't currently installed, simply select it and click Apply on the next screen. If you have a theme from another source besides BigCommerce, you can click Upload Theme and either drag or upload it from your computer. Once you click Apply on the following screen, it will be installed on your store.
How to select a theme style
You can change the style of your theme from the Stencil Theme Editor. We'll dig deep into this below, but for now, all you need to know is how to navigate to it: Storefront Design>My Themes>Customize (it's that big blue button next to your current theme).
Once you're in, select Styles from the sidebar menu and you'll be presented with your four options. Select the one that closest matches your vision for your store, click Save Changes, and you're good to go!
Note: applying and saving a new style will overwrite your current style settings, however you will not lose any content from your store. It's always a good idea to make a backup copy of your theme before you start
The Stencil Theme Editor
Once you've uploaded your theme and selected a style, it's time to make it your own. While all of your products, collections, pages and marketing (including the carousel) will be configured from the BigCommerce dashboard, most of the changes you make to the look and feel of your store will happen in the Stencil theme editor. You'll access it by navigating to Storefront Design>My Themes, and then clicking the blue Customize button under Current Theme.
You'll notice that the theme editor sidebar menu is divided into a whole bunch of sections: History, Styles, Typography, Colors, Navigation, and more. We'll cover all of them — in more or less the order that you might encounter them — below.
Like the History tab on your web browser, the History section on your theme editor keeps a log of all the changes to your store since you first started building it.
All of the entries are time stamped and include the name and version of the theme you were using. This is handy if you ever want to revert the settings on your store back to a previous version. Just select the version you want to use and click the blue Apply Theme button in the bottom right corner.
Capacity comes with four unique theme styles that curate the fonts, colors, and general style of your store: Bright, Clean, Cool & Warm. You can preview how they will look in your store by clicking through the options in the sidebar and watching for the change.
Once you've settled on a look, click Save Changes in the bottom right corner, and you're good to go!
Note: applying and saving a new style will overwrite your current style settings, however you will not lose any content from your store. It's always a good idea to make a backup copy of your theme before you start making customizations.
Fonts and Colors
Capacity comes with a selection of hand-picked fonts and colors for your store. You'll find them under the first two tabs of the theme editor: Typography and Colors.
Under Typography, first select your Primary font family and Secondary font family from dropdown list of font. Then, you can assign either of these font families to the following text areas: Main navigation font, Footer navigation font, Price font, Button font, Capitalize navigation font.
To customize the Color for the store, look under the Colors menu and simply find the feature or area of your site you want to customize and click the swatch beside it. A dropdown color selector will appear, which allows you to adjust and experiment with custom colors. You can also add a hex code as a text input if you wish. This can be helpful for matching colors across your site.
The Global Settings section contains a few theme options that are applied (you guessed it!) globally across your store.
The Use full-width setting, will adjust the overall layout of your store, removing the background you see on every page. Instead, your store's content will fill the entire screen with no background. You ca see below and example of how the different layouts look on the same page:
When Restrict purchase to login setting is enabled, pricing and purchasing functionality will be hidden on your storefront. Customers will have to login into a customer account order to see prices and proceed with any purchases. Below, you can see an example on the left of regular purchasing on a product page and the same page on the right when Restrict purchase to login is enabled, where the price is replaced with the text "Login for pricing" and the Add to Cart button is hidden.
The Header is the rectangular area that runs across the top of your store above containing your logo, search, main navigation currency converter, account login and cart. It appears on every page and is intended to be used to promote your company's brand and to make your site easy to navigate.
Capacity's header settings contain a number of ways to customize the look and functionality contained within your shop's header:
Show logo above navigation - moves your logo or store name to appear above the main navigation
Logo dimensions :
- Original (as loaded) - your logo will appear in the same dimensions as the original file that you have uploaded
- Optimized for theme - this will resize your logo from it's original uploaded size to dimensions that work best with the Capacity theme
- Specify dimensions - use this option to resize your logo to specific dimensions. Just enter the maximum width and height in the Max Width and Max Height fields, up to 480x386px. Note: On smaller browsers and mobile devices, the theme will resize the logo accordingly.
Reduce header height - reduces header height for a more compact look
Show "Home" link in header - chooses wether or not to add a "home" link to your main navigation that will link to your homepage (note: your logo will always link to your homepage)
Show categories & Show pages - chooses whether or not your main navigation will show your stores categories and/or pages, respectively
Categories display - if you've chosen to display your store's categories in your navigation, use the options in this dropdown to chose whether to display them In the main navigation or In a dropdown. If you chose to display them In a dropdown, they will appear under a "Shop" link in the navigation.
Dropdown display - if, the previous setting, you've chosen to display your categories In a dropdown, you have a further three options of how to display the category's dropdown:
- Standard dropdown: simple, vertical dropdown list (most suitable for small catalogues)
- Expanded dropdown: displays menu items horizontally instead of in a basic navigation style (suitable for medium size catalogues)
- Meganav dropdown: larger panel formatting, making it easier for customers to navigate large catalogues (most suitable for 20+ categories)
Show "All" links in parent links with dropdown menus - If you've used sub-categories to refine your product catalogue, enabling this setting will insert an "All" link below top level navigation link so that customers, if wanted, can easily navigation to top level category pages.
You can see this in the example below. If you look at the first category, Arts & Crafts, the theme has used the main parent category as the title for the category's menu, which has been further broken down into subcategories. Enabling the "All" link, inserts the "All Arts & Crafts" link so the customer can also easily access the category as a whole.
Show category images in dropdowns - if you've uploaded an image for your category, enabling this setting will display that image in the navigation. (to add images to your categories, in your BigCommerce dashboard go to Products>Product Categories>Choose the category>Category details>Category image)
The Footer is a long rectangular area that appears on every page but runs along the bottom of the site. Footers are used to display important store information, like addresses and contact information, as well as, menus featuring links to specific categories, brands and pages.
Also like your header, Capacity comes with settings that allow you to customize the information and functionality found in your footer:
Show sitemap link in footer - the sitemap is basically an XML file the contains a list of all the URLs in your store. To customers, it looks like a page with links to all the other pages in your store.
The Sitemap also helps search engines find all the pages on your site and is important for your SEO. Got more questions about the importance of your sitemap or about SEO in general? Checkout BigCommerce's list of SEO Success Essentials.
Show brands in footer - enabling will turn on the display of a Brands menu in your footer. You can add a Brand to your store in you dashboard under Products > Brands.
Number of categories/brands to show in footer - Since the number of categories and brands that merchants have in their stores can be quite extensive, you have two dropdown menus that allow you to cap the number of items that each menu will display: Cap at 5, Cap at 10 or Show all. If you chose to cap at 5 or 10 and there are more items to display, they will be collapsed under a "All Categories (or brands)" dropdown that, when selected, expands to reveal all items.
Show store address in footer - The store information that appears in your footer is set up in your dashboard under Store Setup > Store Profile.
Show copyright in footer - the copyright consists of the "© 2018 'Store name', as seen in the bottom right of the footer
Show social icons as first column in footer - whenenabled, the social icons for those that you have setup in the dashboard (Store setup>Social media links) will appear in the first column of the footer. If this setting is not enabled, these icons will in the last column and your branding and store information (if enabled to show) will appear in the first column instead.
Lastly, the Payment Icons settings allows you to control which icons show in your footer, just above the credit messaging:
Just check or uncheck the box next to the payment method to show or hide that particular icon:
Your homepages settings are comprised of two parts: Carousel and Homepage Sections
In web design parlance, the Carousel refers to the rotating cycle of images that generally occupies the "above the fold" area of our store (in Capacity, it's just below your header). Firstly, you'll set up the "slides" for your Carousel in the BigCommerce admin under Storefront Design>Design Options>Carousel & Social Media (more on that below—or here)
Your Carousel comes with two styles to choose from: Traditional or Mosaic. The Traditional style is likely the one you'll recognize and is what's described above- a large display of rotating images, often with some marketing text and call to action buttons.
If chose the Traditional style, the following settings apply to your carousel: Carousel aspect ratio & Autoplay
Carousel aspect ratio will help you to control how your images look in the carousel:
- Default: Images in your slideshow will be displayed in Peak's default aspect ratio. This may result in your images being cropped but fear not! This ratio was specifically chosen by our word class designers and works great on Peak16:9: Sets your carousel images to a 16:9 ratio regardless of what the original image size is and can result in cropping
- 3:1: Sets your carousel images to a 3:1 ratio regardless of what the original image size is and can result in cropping
Wrapping your head around aspect ratios can be tricky. If you need a little help on the basics, check out this great guide on understanding and working with aspect ratios.
The Autoplay setting allows you to turn on/off the automatic rotating of your images. If enabled, your images will automatically rotate at intervals which you can set in the BigCommerce admin under Storefront Design>Design Options>Carousel. If you chose to disabled autoplay, customers can click and manually navigation through your images.
The Mosaic style, on the other hand, uses the same images and text that you upload in the BigCommerce admin (BigCommerce admin under Storefront Design>Design Options>Carousel) but they'll be organized into a tiles in a mosaic, rather then as rotating slides:
When using the Mosaic style, to ensure your images retain their approximate proportions, we recommend following these guidelines for image aspect ratios:
5 slides: All 1:1
4 slides: 1-3 are 1:1, 4 is 2:1
3 slides: 1 is 1:1, 2-3 is 2:1
2 slides: Any ratio, but consistent (1:1 recommended).
1 slide: Any ratio
Next up, you get to setup your homepage sections, fun! Capacity has 4 homepage sections that are completely customizable. For each section, you get to choose the content, number of items that show and how they're laid out on mobile:
Section item type - choose what content you would like to display in the section:
- Featured products - the products that you have set at "featured" in the BC admin. (You can find out more info on Featured Products here)
- New Products
- Top selling products
- Latest blog posts
Number of items - dropdown to chose how many items you'd like to display in this section. Here you can also chose to Disable the section altogether if you don't want to use the section at all.
Enable horizontal scrolling - by default the items in the homepages sections will stack vertically on mobile devices. Enabling this setting mobile setting arranges the items horizontally on mobile instead. Customers will be able to flick through the sections with their thumb. This really decreases the amount of vertically scrolling customers have to do to view your homepage on mobile.
These settings will control the display of content on your Product pages.
Automatically send the client to the cart page after adding a product - does just what it says! When enabled, instead of displaying a success message when a customer adds a product to their cart, when they add a product they will taken directly to the cart page to proceed with checkout.
Show extra product details (heigh, width etc.) - want to share your nitty gritty product details with your customers? Well, this is the setting for you! Turn it on to display the following details:
- Min purchase quantity
- Max purchase quantity
- Stock level
- Gift wrapping
- Custom fields
(Note: the details will only show if you've entered information for these details into their corresponding fields in your dashboard)
Number of related products setting relates to the carousel of products that appears at bottom of your product page and allows you to chose how many products to show.
Related products are setup in your dashboard per product. Check out this BC guide for more information on setting up Related Products.
The Product listings settings are applied to the pages on your site that have a product grid: Homepage sections, Category, Brand and Search Result pages.
Image aspect ratio - adjust the aspect ratio off your product images. This may results in cropping
Number of products per page - control the number of products that will display in the grid
Hide product filtering sidebar - toggle on/off the product filtering side bar on Category, Brand and Search results pages
Show quickshop - toggle quickshop on/off
Display product sales badge - toggle on/off display of theme styled "sales badge" for on sale items
Add 'As low as' text - enable the display of 'as low as' pricing text on products. This text will display next to product with options.
Show cart actions - enabled/disables in-line add to cart functionality. When enabled, an Add to Cart button will appear when a customer hover over a product, allowing them to add an item to their cart directly from the product grid.
These settings control the display of brands at /brands, where all the Brands you've created in the control panel will be displayed. To manage your brands, have a look in your control panel under Products > Brands
Show brand images on brands page lets you control whether you show images for the brands or not
Post updates on products, upcoming events, and other news in your shop’s built-in blog. To setup a blog, navigate to the Blog settings by clicking on Content > Blog.
The Blog settings in your Theme Editor, let you toggle on/off whether you're blog's name as set in the BigCommerce admin displays as the Blog Title on your store front