Bespoke Theme Manual
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 center.
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 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>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 variety of sections: History, Styles, Typography, Colors, and more. We'll cover all of them in the order that you encounter them below.
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.
Bespoke comes with four unique theme styles that curate the fonts, colors, and general style of your store: Classic, Cool, Neon, 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.
Bespoke comes with a selection of hand-picked fonts for your store. You can select the Body Font Family, Heading Font Family, Main Menu Font, and Product Price Font from the corresponding dropdowns under Typography. Any changes you make will be automatically displayed in the preview.
Almost every color in Bespoke is customizable, from the text color to the background colors to the alert and error colors. 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).
The Apple Pay button can also be customized in the Colors settings to show on your cart page as black, white, or black text with a white border.
You can also toggle on and off the decorative borders that appear throughout the theme, such as on the home page featured collections section, carousel content, home page blog posts, and category titles. This is what it looks like when they're enabled (as they are by default).
The header is the rectangular area that runs across the top of your store containing your logo, navigation, search, account and wishlist links, 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 navigate to any page of your site.
Bespoke comes with three Header logo alignment options - Right, Center, and Left. Changing the position of your logo will slightly change the layout of the account, search, currency converter, and cart links. You can upload a logo by navigating to Storefront>Logo in your BigCommerce dashboard. We recommend a logo size of 140px x 50px.
Bespoke has a number of settings that allow you to customize your navigation. You can choose to show a ' Home' link in your navigation, which customers can click to easily navigate back to the homepage. You can also choose whether to show Categories, Pages, or both in your navigation.
If you wish to show Categories in the navigation, you have three options for how they display, under Categories display:
- In the main navigation will show the categories as individual links in the header.
- In a dropdown will show the categories in a single dropdown by opening a Shop link in the header.
- In a mega nav will show the categories in a mega navigation layout by opening a Shop link in the header. We recommend using this option if you have a large catalog with many categories and sub categories.
The Carousel is comprised of up to five large rotating images that appear at the top of your homepage. Each image has a text box overlay 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 set up in your dashboard under Storefront>Home Page Carousel. We'll talk about how to set up your carousel in further detail a bit later, or you can check out BigCommerce's guide to the Carousel Builder.
The Carousel in Bespoke comes with two styles: Light and Dark. These styles refer to the background color of the text box overlay; choosing Light will show a light text box with dark text, and choosing Dark will show a dark text box with light text.
Opening the Carousel slide cropping setting reveals two options for controlling how your images look in your carousel: Crop (16:9) and Don't crop. Choosing Crop (16:9) will set your images to a 16:9 aspect ratio, whhile Don't crop preserves your images' natural dimensions so your images won't be cropped at all.
The Don't crop setting is best used when you've already done the work to resize and crop your images to just how you want them. Wrapping your head around aspect ratios can be tricky. If you need a little help on the basics, check out this great guide: Understanding and working with aspect ratios.
You can also choose to show or hide the border in the text box overlay in the Colors settings by toggling the Remove decorative borders setting.
Your homepage is made up of six basic sections: Carousel, Categories, Featured Products, Top Selling Products, New 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. We'll focus on how Bespoke utilizes these sections and the theme settings that allow you to customize the appearance of your homepage.
You can customize the order of the Categories, Featured Products, Top Selling Products, and New Products by choosing the sections from the dropdowns in the same order you want them to appear in. Section 1 appears first directly under the Carousel, followed by Section 2, 3, and 4. Each Section has a Section layout dropdown which allows you to choose either a background colour to match the site background or to have an alternate background, which is pulled from the Alternate Background Color setting under Colors.
The Number of items setting allows you to customize the number of featured products, categories, top selling products, or new products that you would like to show in each section.
At the bottom of your home page, you will find the Recent blog posts section.
These settings also live in the Home Page tab in the theme editor. Here, you can show or hide recent blog posts by toggling the Show blog setting on or off. If you choose to Use the minimal blog layout, your three most recent blog posts will appear side by side but without their respective featured blog images. You can customize the background color of the blog posts here with the Accent setting in the Colors tab in the theme editor.
Disabling the minimal blog layout setting will show your three most recent blog posts with their respective featured blog images above the titles like this:
Product Catalog settings are applied to the pages on your site that have a product grid—think Category, Brand and Search Result pages.
Catalog banner image ratio shows four options to choose which aspect ratio you'd like your category image to crop to: Short (10:4), Medium (16:9), Tall (4:3), and Don't constrain. If you choose Don't constrain, your category images will appear at their natural aspect ratio, without any cropping. Catalog banners include Category and Brand images. Here's a great article on understanding aspect ratios.
Number of products per page allows you to choose how many products appear in the product grid per page in each category. If there are more products than can be shown on one page, pagination will automatically appear on the category page.
Product grid image ratio allows you to set the aspect ratio of your product images (i.e. the relative height and width of your images) to either Short (4:3), Square (1:1) or Tall (3:4). Click here for a great article on understanding aspect ratios.
Note: If your product images were shot on a white background and your site background is also white, it might be difficult to tell the difference between some of these options.
Prouct grid impage cropping allows you have your product images either Uncropped or Cropped and centred to the size of the image container. Choosing the Cropped and centered option will make your product thumbnails appear uniform if they are varied sizes and aspect ratios.
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 'From' 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.
You can choose to hide details such as a product's SKU, weight, dimensions, gift wrapping options, shipping options, and warranty information by toggling the Hide additional information tab on the product page on. This will remove the Additional information tab on the product page, including information added to the Custom Fields section of the product setup.
Setting up a customizable product
Bespoke comes with two types of product templates: default and customizable. All products are automatically set to the default template, which shows all of your product options as a list in a single-page view. To set up a customizable product, create a product as you would normally by adding images, prices, variants, and option sets. Then, from the individual product settings, click on the Other Details tab. In the Other Details section, choose alternate-product from the Template Layout File dropdown, and click Save.
You can change as many products as you like to have the alternate-product template. This template shows three tabs that walks your customers through a customizing process for your product(s).
**Note: In order for options to show under the Customize tab, you must have any combination of the following option types for your product:
- Text box
- Number field
- File upload
- Date field
Bespoke's Blog allows you to customize the Number of blog posts per page. Whichever blog posts do not fit onto the first page will appear in subsequent pages which can be accessed by the pagination at the bottom of the blog page.
You can also choose between two layouts of the blog page: Masonry grid and Single column. Choosing Masonry grid will make your posts appear in a grid, making it easy for customers to see many blog post images and titles at once. Choosing Single column portrays your blog in a traditional blog layout with one blog appearing at a time as you scroll down the page.
The Payment Icons settings allow you to control which icons show in your footer, just above the theme credits. Just check or uncheck the box next to the payment method to show or hide that particular icon:
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.
Bespoke contains a number of settings that allow you to control the style and information contained in your Footer.
You can customize which types of links appear in the footer from the Footer menu. Choose between showing links to your Pages, Categories, or Brands.
In your footer settings, you can also:
- Show sitemap, which allows you to control whether to include a link to your store's sitemap page. The sitemap is basically an XML file that contains a list of the URLs in your store. To customers, it looks like a page with links to all of the 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 store address, which allows you to show your store's address and phone number, taken from Store setup > Store profile page in the BigCommerce admin.
- Show theme credits will display the Pixel Union and BigCommerce credits at the bottom of the footer.
Optimized checkout is BigCommerce’s new single-page checkout and order confirmation page. It includes features that reduce friction and improve the overall flow of checkout to increase sale conversions.
You can customize the look and feel of your store's checkout experience from the theme editor.
From the top, you can customize the Background color using the color picker or inputting a hex code to match your store's design. If you want to Use (a) custom background (i.e. an image), ensure that box is checked. We recommend using a 1000 x 400px image.
You can also upload a Custom logo to your checkout page if you don't want to use the same one as your storefront. Just select Custom from the dropdown and then choose a Position.
If you want to display a Discount Banner on your store, you first have to create it in the BigCommerce admin under Marketing > Banners (more on how to do that below, under Marketing)
If you want to customize the Background color of your order summary (that's the box on the right side that says "Order Summary") you can do so from the Order summary > Background color selector.
Follow the same steps for the Checkout section of these settings ( Background color is the "bubble" color around the numbers; Text color is the color of the numbers themselves).
The same goes for Primary headings, Secondary headings, Body, Primary content, Secondary content, Links, Primary button, Secondary button, and Form inputs. There is effectively no component of the checkout experience that cannot be customized :-)
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.
Note that BigCommerce is unable to offer support for any theme that has been modified HTML and CSS files. Proceed with caution.
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.
- BigCommerce's Guide to Adding Web Pages
- BigCommerce's Guide to Using the Built-In Blog
- BigCommerce's Guide to Using the Image Manager
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 Storefront>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, which will appear above the Contact Form.
Now, if you navigate to that page in your store, you should see something resembling this:
Now your 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 Storefront > 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.
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 > 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 > Store setup > Share (more on that here).
Create a blog post
To add a post, navigate to Storefront > 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. You can also add an optional Summary thumbnail image and set the Publication date here.
In the SEO (optional) section below, you can customize each post’s URL in the Post URL field, and specify what happens If the Post URL changes. Adding a Meta description to your posts will help improve your 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.
The Storefront section of your BigCommerce dashboard is the place to be for all of your logo, carousel, and social media needs. It's also where you go if you want to change or update your theme (Storefront>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 your store. Bespoke's carousel supports 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>Home Page Carousel.
Click on any slide 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, Subtitle, 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 Product, Category, Brand, Page, 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 > Logo.
By default, BigCommerce will display your store's name as a logo. If you're okay with this, do nothing! (just ensure that Show text where my logo will be displayed is activated). However, if you want to display a logo, activate the Upload a logo image from my computer option.
Then choose the image file you want to upload under the Logo Upload section. For Bespoke, we recommend a logo image that's 140 x 50px or larger. Once your image is selected, click Upload Logo Image. It will display in the Current Site Logo section.
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 Bespoke, 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 Storefront > Social Media Links. 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 that's 16 x 16px or 32 x 32px in dimension. The image must be saved in ICO, JPG, GIF, or PNG format.
Then go to Storefront > Logo, and scroll down to the Favicon section. Click Choose File to select the favicon from your computer. Click Upload Favicon.
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).
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 MailChimp, Constant 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 Bespoke, the newsletter signup appears centred and just above the footer of your store:
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 knowledgeable support team will dig into the issue and get you back on track ASAP.