Basic theme setup
This section covers some essentials to get your theme up and running. Customization settings can be found in the sections below.
Select a theme variation
Merchant 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, Classic, and Bright variations in action.
To select your desired variation, go the Variations section of your theme editor. Click on one of the four theme variations. Then click Save Changes. Please note that switching to a new variation will overwrite your previous style settings.
To return the variation to its default state, you can click Reset Theme Variant at the bottom of your theme editor, which will revert any customizations you've made on a theme variant.
Add your first product
To add a product to your store, navigate to Products > Add from your dashboard.
At minimum, you'll want to add a product Name, Price, and Category, and then upload a product Image.
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.
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 and footer of your site.
To replace your store title with a logo image, go to Storefront and then click the Logo tab.
Select the option to upload custom logo an image from your computer. Then choose the image file you want to upload under the Logo Upload section. We recommend an image around 250 x 75 px, though you may upload a larger one if you wish to customize the size within the theme editor (we'll get to that in a minute). Once your image is selected, click Upload Logo Image.
Merchant also allows you to customize the logo size from within the theme editor. From your BigCommerce admin panel, go to Storefront > My Themes > Customize on the Merchant theme. Within the theme editor, click on the Header tab, and in the Logo dimensions dropdown, choose from the following options:
- Optimized for theme - this option will resize your logo to a size chosen by the theme
- Original - this option will retain the original size of your logo image, up to 480px wide. If your logo is wider than 480px, it will cap the width at 480px and adjust the height to be the same aspect ratio as the original image.
- Specify Dimensions - this option allows you to choose which dimensions you'd like the logo to appear at. 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.
Set up a carousel
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 Storefront 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 information (the text and links) will be moved along with it.
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 at least 1200px wide. But most importantly, you'll want 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.
Theme editor settings
From within the theme editor, you can choose your Slideshow aspect ratio as well as the Slideshow text box position and whether or not to Show the slide number.
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 Content > Web 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.
You can also insert content (such as text and images) in the Page Content area that will appear above the Contact Form.
Set up a navigation menu
Your navigation menu will be automatically generated from your create pages, categories, and brands. This menu will appear both in your header and footer.
NOTE: Keep any navigation titles (Brands, Categories, etc.) short and concise, ideally one word long, to avoid overlap in your nav menu.
To control which pages are displayed in your menu, go to Content > Web pages. Here, you can deselect the check mark under Visible to hide any pages. Click Save and Exit.
You can hide or show categories by going to Products > Product Categories. Under the Visible in menu? column, select or deselect your categories by clicking on the check marks or 'x' marks.
Under the Global Theme Settings of your theme editor, you can toggle the option to Show 'Home' Link in Navigation. You can also choose to Use a flyout menu on desktop, Show Pages/Categories in the main navigation, Allow the navigation to use full screen width, and Show category images in dropdowns (these will only appear if you have chosen to show your navigation links in a Mega Nav). If you decide to show categories in your navigation, you can use the Categories display dropdown to choose whether to show them in their own Shop dropdown or within the main navigation as separate links. Finally, you can customize how your navigation links display: either as a Standard dropdown, as an Expanded dropdown, or in a Mega nav.
This section covers how to manage and customize your products, categories, and brands.
In your theme editor, select how many Product reviews, Related Products, and Customers Also Viewed Products to display, by using the dropdowns provided.
Product images and layout
The product images 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.
Under the Global theme settings section of your theme editor, you can toggle the option to Crop and Force Product Images to Fill Container.
Under the Product settings section of your theme editor, you can set the Number of Reviews on Product Page, Number of Product Videos, and Number of Related Products
Categories, Brands, and Home page
For your category or brand featured image, we recommend using an image both wide and short. The minimum width is 760px and is ideally within the 760 x 260px range.
For a brand featured image, go to Products > Brands, then select a brand and upload an image to Brand image.
On any product listing page (Category, Search, Brands, and Home page), customers have the option to add any product directly to their cart or pick options from the product grid (ie, without having to go into a product page). When you hover over a product thumbnail, you will see either:
- Add to Basket (if the product does not have any options) which will add the product to the cart directly
- Pick Options (if the product has options), which, when clicked, will bring up a small modal where you can choose your options, enter a quantity, and add the product to the cart or a wish list.
Note: The Add to Basket and Pick Options will not show the product images, but the Quick Shop will.
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 dropdown in the Products Grids section of your theme editor.
In the quick shop, you can also add a product to an existing wish list, or you can create a new one from the quick shop itself.
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 to your individual products.
A sale badge will show up on any products that you have put on sale. To place a product on sale, go to edit one of your products. Then, under the Summary section, next to Price, click "More Pricing." Fill in the Price and Retail Price with the original price, and enter the reduced price in Sale Price.
Customize your store
This section covers how set up theme features and customize the styles and layout of your store.
Typography and colors
In your theme editor, you can customize the fonts and colors of your store front. Under the Typography section, use the drop downs for Primary and Secondary fonts.
Under the Colors section, you'll find color options for virtually every element of your store. You can see the changes in real-time within your theme editor's preview.
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 Store Design > Design Options, then click More > Favicon. Click Choose File to select the favicon from your computer. Click Upload Favicon.
Banners allow you to add promotional links and images throughout your store to advertise special deals and discounts to your shoppers.
Go to Marketing > Banners to begin. Banners can be added to the Homepage, a specific category or brand, and 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.
You can set how many product results are displayed, under the Search Settings section of your theme editor. Choose from 6, 12, 24, or All by using the dropdown provided.
Featured, New, and Popular Products
The featured, new, and popular products sections are displayed on your home page. You can replace the new products section with top selling popular products by toggling Show Top Sellers Instead of New Products on Homepage, under the Homepage section of your theme editor.
You can also control how many products are displayed. The Number of Featured Products on Homepage can be set to 4, 8, or 12, or disabled from being shown. The Number of New or Top Selling Products on Homepage can be set to 3, 6, or 9, or disabled from being shown.
Recent blog posts
Two of your most recent blog posts will be displayed if you enable "Show latest blog posts on Homepage" that is under the Home page section of your theme editor.
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 5 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 Settings > Store 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.
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 Marketing > Settings > Email Marketing.
Under General Settings, find the Email Integration Settings, and enable the email campaign monitor that you want to use for your Newsletter. BigCommerce 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.
Post updates on products, upcoming events, and other news in your shop’s built-in blog. Navigate to the Blog settings by clicking on Content > Blog.
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 Content > Blog 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.
Under the Blog Settings section of your theme editor, you can set the Blog Posts per Page, Number of Blog Pages, and Blog Post Summary Length.
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 Design > Design 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.
The RSS (Really Simple Syndication) page allows your visitor to subscribe to any new content, including new products and blog posts.
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. Big Commerce automatically populates this page with a Shipping and Returns policy.
To change it, head to your Content > Web 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.
The customer account allows customers to log in and track recent purchase history and message you, the merchant.
As a merchant, you can restrict the ability for customers to see prices and add items to the cart unless they are logged in by toggling the Restrict purchase to login setting in the Global settings section of the theme editor. This will ensure that only customers who have an account with your store can view prices and purchase products.
World-class customer support
Our support staff is committed to helping you solve any problems you encounter along the way. Exceptional, human support matters to us a great deal. Contact us or check our help centre if you need any help at all.