Peak 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

Peak comes with four unique theme styles that curate the fonts, colors, and general style of your store. Check out our store demos to see the  StandardBoldLight, and Warm styles in action.

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 options:

Select the one that closest matches your vision for your store, click Save Changes, and you're good to go!

Note that 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. 

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 slideshow) 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, and more. We'll cover all of them — in more or less the order that you might encounter them — below.

History

Much 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 button in the bottom right corner.

Styles

Peak comes with four unique theme styles that curate the fonts, colors, and general style of your store:  StandardBoldLight, and Warm. You can preview how they 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 that 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. 

Typography

Peak comes with a selection of hand-picked fonts for your store. You can select the Primary Font Family, Secondary Font Family, and Site Header Font from the corresponding dropdowns under Typography. Any changes you make will be automatically displayed in the preview.

Colors

Virtually every color in Peak is customizable, from the background color to the button colors to the product collection item overlay color. The colors are organized into six categories:  Global, Site Header, Buttons, Carousel, Products and Site Footer

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 (you can copy and paste the codes into multiple boxes).

Global Theme Settings

Global Theme Settings are settings that apply across your entire site, as opposed to a single page or content area. Peak comes with three of these global settings:

Crop and Force Product Images to Fill Container - By default, your product images will not be not cropped in any way. However, you can select this option to crop images or force them to fill the container to ensure your images are all the same size.

Hide Sidebar on Collections Pages -  If you don't want to display a faceted search sidebar on your category pages, make sure this box is checked. To learn more about faceted search, see BigCommerce's documentation.  <<<This should move to Product Listing section. Should be renamed "Hide Faceted Search Sidebar on Category Pages"

Product Listing View Mode - Peak comes with two ways to display your products: in a List or in a Grid. Select an option from the dropdown menu and watch for the change in your preview.

Border Size - This allows you to control the thickness of the border that displays around form elements on your store. Examples include the text inputs on your store's contact form and the "Sort by" dropdown at the top of category pages. <<<<<<This should be changed to "Border Side of Form Elements

Site Header Settings

The header is the rectangular area that runs across the top of your store containing your logo, navigation, search, currency converter, and cart. It appears on every page and is intended to be used to promote your company's brand and make it easy for customers to root themselves and navigate from any page of your site.

There are a number of settings in the theme editor that allow you to customize this space.

From the top, you can customize the alignment of your logo from the Header Logo Alignment dropdown. You can upload your store's logo by navigating to Storefront Design>Design Options>Logo in your BigCommerce Dashboard.

If you want to Show 'Home' Link in Navigation, ensure that box is checked.

If you want to Use Mega-nav Panel for Shop Menu (i.e. to display menu items in your Shop menu horizontally instead of in a basic navigation style vertical list) check that box.

If you have a large catalog (20+ categories) you might want to select that option from the Mega-nav Display Type dropdown. This will create a larger panel with different formatting to make it easier for customers to navigate your large catalog.

You may also want to check Wrap Mega-nav Columns if you have a large catalog. This will prevent users from needing to scroll horizontally through all of your categories, breaking them onto multiple lines instead.

Finally, you can customize the spacing of your navigation items using the Main Navigation Item Spacing dropdown. Note that this only applies to window widths over 1230px. 

Site Footer Settings

Like the site header, 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. The store information that appears in your footer is set up in your dashboard under Store Setup > Store Profile.

Peak contains a number of settings that allows you to control what information is displays in your footer:

First up, Peak allows you to turn on and off the display of some basic site information. Checking  Show Copyright in Site Footer will display your site's copyright information. Similarly, having Show Credits in Site Footer checked will display the Peak theme and BigCommerce credits found right at the bottom of the footer.  If you don't want this information to display on your site, simply make sure to have these settings unchecked.

The  Show Sitemap in Site Footer allows you to control whether a link to your store's sitemap shows in the footer, just below the credit message. 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.

Next up, Peak shows two menus in your footer by default:  Navigation and Brands.  

The Navigation menu is populated with the Web Pages you've created in your dashboard under Storefront Content > Web Pages. If you've got Gift Cards set up for your store, you'll also see a Shop Gift Cards at the bottom of the menu. This link takes customers to a page where they can Purchase, Redeem, or Check the Balance of Gift Cards.

Pro-tip: if you're not seeing one of your Web Pages listed in your Navigation menu, check that the page is set to Visible in the dashboard - it'll have the big green checkmark in the Visible column, like so:

The Brands menu shows an alphabetical list of the Brands available in your store. You can add a Brand to your store in you dashboard under Products > Brands.  If you have more than five Brands in your store, the menu will list the first five, followed by a View All link that takes you to the /Brands page, where a full list of your stores brands can be seen. 

Listing a max of five brands allows customers to see, at a glance, what the menu is all about and get where they need to go, while keeping your footer looking sleek. 

If you'd prefer to show Categories in your footer, instead of brands, the Show Categories Instead of Brands in Site Footer setting allows you to do that.  Just check that setting and the Brands menu will be replaced with a Categories menu.

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:

Homepage

Your homepage is made up of five basic sections: Carousel, New Arrivals, Featured Products, Top Selling Products and Blog Posts. The content for these sections is pulled from your dashboard.  BigCommerce already has some great support articles detailing how and where the content is pulled from, and while we'll try to make everything clear, we're going to focus on how Peak utilizes these sections and the theme settings that allow you to customize the appearance of your homepage. 

The Carousel is comprised of up to five large rotating images that appear at the top of your homepage. Each image is overlaid with a text box containing a heading, subheading and call to action button that can link to any page.  All the content for your slideshow (images and text) are setup in your dashboard under  Storefront Design > Designs Options > Carousel & Social Media. We'll talk about how to set up you carousel in further detail a bit later or you can checkout BigCommerce's guide to the Carousel Builder

Opening the Slideshow Aspect Ratio settings reveals fours options for controlling how your images look in your slideshow: Default, Natural, 16:9 and 3:1.

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 Peak

Natural: Preserves your image's natural dimensions so your images won't be cropped at all.  This setting is best used when you've already done the work to resize and crop your images to just how you wan them.

16: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

Product Listing Settings

The product list settings are applied to the pages on your site that have a product grid—think Category, Brand and Search Result pages. From these settings you can control how many products list per page, the size of category page banners and whether certain product list features display. 

If you've uploaded featured images for your Product Categories, the  Product Category Banner Size setting allows you to control the height at which these Category images will display at the top of your Category pages. 

The Product Category Banner Size comes with four size options: Large (Default)MediumSmall, Smallest. 

By default, your Category images display at the Large (Default) setting which preserves their natural full height. The subsequent settings will set a minimum height on your image, making them smaller and smaller.  You can go all the way down to the Smallest setting which gives your image the appearance of a skinny banner. The smaller settings may result in your image being cropped, so play around with it and see what work best for you.

To give you an idea, here is an example of the same Category image at all 4 of the banner size settings:

Large (Default)

Medium

Small

Smallest


Products Results Count
 allows you to control the number of products that are listed in your product grid on a single page.  If you have more products to display, pagination will allow customers to click to view subsequent pages.

Enable Quick View allows you to turn quick view on/off.  When enabled, hovering over a product on a product listing page, reveals Quick view button. When disabled, the Quick View button is replaced with a View Product button that takes customers to the product's page

Quick View on

Quick View off

Clicking the Quick View button will launch a modal that provides product details and allows customers to add the product to their cart without having to navigate to the product's page, decreasing the number of clicks it takes a customer to add an item to their cart. 

If you have a product whose price varies based on options (e.g. if your product comes in different sizes and larger sizes are more expensive), the setting  Add 'As low as' text to the prices of products with options allows you to toggle on pricing text that lets customers know the lowest starting price of that product.

You can set up your products prices to vary by option in the BigCommerce dashboard. First, you'll need to create the product's options under Product > Product Options.  Then, under Product > Edit Product > Options & SKUs, assign the product an Option Set from the Option Set Dropdown.  Now you can assign the different options a SKU and price in the SKUs tab.

Need a little more help? Checkout these articles for more detailed instructions on setting up  Product Options and SKUs.

Brands Page Settings

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


Brands Per Page allows you to control the number of Brands that are listed on a single page at /Brands.  If you have more Brands to display than the number you choose for this setting, pagination will be triggered and appear at the bottom of each page, allowing customers to navigate multiple pages. 

For more info on creating and managing Brand, checkout this BC guide:  https://support.bigcommerce.com/articles/Public/Managing-Brands

Product Settings

These settings will control the display of content on your Product pages. 

The Number of Reviews on Product page gives you the option to determine how many reviews you'd like to have display or to disable

Similarly to the above settings, the Number of Product Videos setting allows you to set the number of videos that will display on your product pages.  Not sure who to set up videos on your product page? Check out this article.

Related products appear in the a grid at the bottom of your product page and the the Number of Related Products setting allows you to control the number of product thats display here. 

The products that appear as Related Product can be set up to be pulled in automatically or you can set them up manually.  Check out this BC guide for more information on setting up your Related Products.

Next you have the ability to toggle on/off the display of the Additional Info section on you product pages using the Display Additional Info Section setting.  This tab is located just below you main product information and, depending on your settings, is grouped with Video and Reviews tabs. 

The Additional Info section allows you to display important product information that might not necessarily belong in your product descriptions.  All the information that displays here is entered individually for each product and can include:

As an extra level of control you can also choose to hide your product's dimensions from this tab by unchecking the Display Product Dimensions setting, as this information is often important for merchants to enter for products but not necessarily something they need to display for customers. So, this setting allows you to hide this info while still utilizing the Additional Info tab to display other important product information.

Edit Theme Files

If you have a knowledge of CSS and HTML, editing your theme files can be a great way of taking your store customizations to the next level. We're not going to go there in these docs, but if you're looking for a good primer, you'll find it  here.

Storefront Content

The Storefront Content tab of your BigCommerce dashboard is where all of your pages, blog posts, and images live. If you're looking to create or edit a page or post, or if you want to manage the images contained in those pages and posts, this is the place to do it. 

BigCommerce has some great resources on these topics (which we've linked to below) but we wanted to supplement them with a bit of quick n' dirty setup info so you can get your store up and running (and selling) ASAP. Scroll down for Storefront Content 101.

Web Pages

The web pages on your BigCommerce store should be used to display content that doesn't change very often. Yes, your product, brand, and category pages are all technically web pages, but they are all generated and managed automatically. It's pages like your "About," "Contact" and maybe a "Size Guide" or "Return Policy" that you'll create and manage here. 

How to add a contact page

Our BigCommerce 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.

To create one, go to Content > Web Pages and 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 your contact page. The Page URL will auto-fill based on the page name.

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

Now, if you navigate to that page in your store, you should see something resembling this:

Hooray! Customers can get in touch to tell you how much they love your store!

If you want to create any other type of page, just use the radio buttons under Web Site Link and complete the fields that display below. You should be able to create most kinds of ecommere store pages (About, FAQ, Size Guide, etc.) by using the Contain content created using the WYSIWYG editor below option. You'll find more information here.

How to set up a navigation menu

Your store's navigation menu will be generated automatically from your created pages and categories.

To control which pages are displayed in your menu, go to Content > Web pages. Here, you can select and deselect pages using the check mark under Visible. You can also drag and drop your pages into the desired order.

The categories that automatically display as links on your main navigation can be controlled in the same way. Just navigate to Products > Product Categories and under the Visible in Menu? column, you can select or deselect products as well as reorder items. The changes will automatically be reflected in your live store.

You may also find  this video on updating the links of your main navigation helpful.

Blog

Blogging can be a great tool for promoting your products and giving your store a personal touch, as well as give a boost to your site's SEO ranking.

By default, a basic blog is included on the BigCommerce platform, which you can access by navigating to Storefront Content > Blog. Here, you'll see an index of all the posts — drafted and published — on your store's blog.

If you've yet to publish your first post — what an exciting and precious time for you! — then you won't see much here yet. You might want to start by naming your blog. Here's how:

Navigate to the Blog Settings page by clicking the "..." button at the top of the page (between the "+" button and "Blog Visibility"). This is where you should be:

Give your blog a name in the Blog Title field (a simple "Blog" will do) and set the URL in the Blog URL field. 

You can also enable or disable Disqus Comments at the bottom of this page. Social Sharing is now controlled under Store Settings>Share (more on that  here). 

Create a blog post

To add a post, navigate to Content > Blog and click the + icon under the Published tab. Your screen should look like this:


Give your post a title in the Title field, write the content in the Body field, add some images (using the toolbar icon that looks like a photo of mountains or a house or a Tetris piece), 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 or the comma key to separate the tags.

To upload an image that will appear as the post’s thumbnail, choose a file and click 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 on the main blog settings.

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.

Storefront Design

The Storefront Design section of your BigCommerce dashboard is the place to be for all of your logo, carousel, social media needs. It's also where you go if you want to change or update your theme (Storefront Design > My Themes > Customize/Upload Theme). In this section, we'll focus on the things you'll want to do to get your store up and running — and looking good.

How to set up a carousel


In web design parlance, the term "carousel" refers to the rotating cycle of images that generally occupies the "above the fold" area of our store. Peak's carousel displays up to five images with a heading, subtitle, and 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 Storefront Design > Design Options and click the Carousel & Social Media tab.

Click on Slide 1 (or whatever slide you want really) and either drag and drop a file to the outlined area or click Select from your computer to upload an image.

ADD CAROUSEL TEXT CONTENT

Once you’ve uploaded an image, you can add a Heading, Text, and Button Text by typing in the corresponding fields at the top. Click Save when you're done.

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  ProductCategoryBrandPage, or Blog from the Store Linker. Click Insert Link and Save.

SUPPORTED FILE TYPES AND IMAGE SIZES

The carousel supports JPEG, GIF, and PNG file types, but we recommend using JPEG files to ensure a balance between image quality and fast loading-time. We also recommend using images at least 1200px wide. But most importantly, you'll want to ensure your slide images are consistent in dimension.

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 side of the same Home Page Carousel page. Then click Save.

How to upload a store logo

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 of your site.

To replace your store title with a logo image, go to Storefront Design > Design Options and then click the Logo tab.

Select the option to Upload an image from my computer. Then choose the image file you want to upload under the Logo Upload section. We recommend an image no larger than 350 x 80 px. Once your image is selected, click Upload Logo Image.

How to set up your social links

You can include links to your different social media accounts (e.g. Facebook, Pinterest, Instagram) on your storefront. With Peak, these links are displayed as icons in your store's footer. By providing links to your social media accounts, you can encourage shoppers to follow you and share your business and products with their own friends and followers. 

To set up the social links on your store, navigate to Store Design > Design Options and click the Carousel & Social Media tab. Scroll down to the Social Media section, and input the your various profile links into the corresponding fields beside Available Networks. Make sure to 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. 

The links that are live on your storefront will, predictably, appear in the top Live on Your Storefront section. 

How to set a favicon for your store

A favicon (also known as a  website icon, tab icon, or bookmark icon) is a small icon that represents your website and provides a shortcut to it wherever the icon appears. There are a whole bunch of sites that can help you generate a favicon for your store, or you can  create your own.

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

Then go to Store Design > Design Options, then click More > Favicon. Click Choose File to select the favicon from your computer. Click Upload Favicon.

Marketing

Marketing is a huge topic, and we don't have the space to get too deep into it here. If you're looking for some basic articles to get your marketing juices flowing, BigCommerce has some  great resources, but for our part, we're going to focus on two things that most merchants want to get up and running before they launch their online store: banners and newsletters.

How to add a banner to your store

Banners allow you to add content to the top or bottom of categories or web pages without the need for code. They're great for advertising sales, displaying coupon codes and shipping information, and creating urgency around limited-time offers. A banner can only be applied to one page at a time. 

To create, edit, or delete existing banners go to Marketing > Banners. 

Click the Create a Banner button in the top left side of your screen.

Enter a Banner Name (which will only be used internally, and will not be visible to your customers). Then enter your Banner Content in the field below.

Select the page you want your banner to display on from the choices adjacent to Show on Page. Note that you can only add a banner to one page at a time.

Next, select the Date range for the banner to display. If your summer sale ends August 31st, for example, choose Only display this banner between specific dates, and make sure 31/Aug/2017 is selected as the end date.

Ensure you've checked the box Visible before you save your banner if you're ready to have it live on your site.

And finally, use the Location dropdown to select whether the banner should appear at the Top of [the] page, or Bottom of [the] page.

Save your work, then go to your store to see how your banner looks. You can customize the fonts and colors used in your banners from the Banners tab of your theme editor (see instructions above).

Newsletter

Email Marketing is a great way to keep in touch and build relationships with your customers. BigCommerce comes with a built-in newsletter sign-up box and easily integrates with email marketing apps such as  MailChimpConstant Contact, and iContact. All customer data is stored on a CSV file, which can be accessed from Marketing › Email Marketing.

This is where you can select your email marketing service provider and customize the experience of visitors who add their email to your list. In Peak, the newsletter signup appears near the bottom of your homepage, just above the footer. Here: 

By default, it also appears on the 'Order Confirmation' page at the end of the checkout process.

To configure your newsletter, start by selecting your provider from the Email Integration Providers box at the top.

Then, check Yes, allow customers to subscribe to the store newsletter from the Allow Newsletter Subscriptions? box. If you want to disable email collection at any time, you can uncheck this box and it will remove the field both from the footer of your store and the order confirmation page.

You can learn more about collecting newsletter subscriptions  here.

World-class customer support

We've covered a lot of ground in these docs, but there will no doubt be questions they don't answer. If you've got a burning question—or if you're just  stuck—don't hesitate to get in touch with us. Our friendly and knowledgable support team will dig into the issue and get you back on track ASAP.