BigCommerce Tips and Tricks Collections

BigCommerce shopping cart is one of the cloud service shopping cart in the world.

As experience with some of its difficulties in design, I would collect all the tips I have found in one place.

OnlineStoreCreation.com\

What to do if you have problems with zoom

The BigCommerce zoom feature may soemtimes stop working. If this happens try commenting out the following line in styles.css:

#ProductDetails .ProductThumbImage {
   height: 220px;
   width: 220px;
   /* overflow: hidden; */
   margin:auto;
}

Changing the default size when you click on product image

You can change the default size of the large image that comes up when you click on the icon within the Product page via Settings > Store Settings > Images. Note that the image will be further limited by the resolution of the user’s computer (ie will not be bigger than the desktop).

Setting your website's favicon

You can set the icon of your store’s website pages (which is a 16x16 image displaying in your web browser’s tabs) via Design > Favicon.

Displaying the same logo at the top of every page

Your store can display your logo at the top of every page by selecting Design > Logo and uploading your image.

Difference between Options and Option sets

Options are used for generic choices. For example one Option could be ‘Sizes’ (1, 2, 3... 10) and another Option could be ‘Colors’ (red, blue, white). Option Sets are used to group Options together. For example the Option Set ‘Shirt Option Set’ could have in it ‘Sizes’ and ‘Colors’.

How to modify an Option whilst assigning it to a Set

When you assign an Option into an Option Set you can REMOVE some of its choices in the process. This allows you to assign the same Option into two separate Option Sets but for example have ‘Men’s Shirt option Set’ with sizes 2 to 10 and ‘Women’s Option Set’ having 1 to 7 without having to create two separate Options.

Applying an option Set to multiple Products

You can apply a single Option Set to multiple Products at once via the Products Page by selecting the Products you want to assign to, choosing from the action dropdown ‘Apply Option Set…’ and clicking on ‘Go’.

How to see which product a customer has ordered

To see which products a customer has ordered, click on the ‘+’ sign next to the customer’s name.

What's a SKU?

Don’t know what a SKU is? It stands for Stock Keeping Unit, and is a unique inventory code used to identify each product.

Setting the order in which products appear in your store

A little known trick in BigCommerce is the ability to set the order that products appear. This is easily done by going to Edit a Product > Other Details and entering a number in ‘Sort Order’ field. This number will determine the display order.

How to display the message SOLD OUT

You can display the message ‘Sold Out’ when a product’s inventory reaches zero by going to Settings > Store Settings > Display and checking ‘Show Inventory Levels’. When the inventory of a product reaches zero, it will display ‘Current Stock: Sold Out’ on the Product page.

Hiding products from displaying on your store

Hiding products from customers is easy (for example because you have run out of inventory). Simply go to Products > View Products, select the product, click ‘Edit’, and on the ‘Details’ tab ensure that ‘This product cannot be purchased in my online store’ is selected.

Adding Free Shipping to products

You want free shipping? Easy! Just go to Edit a Product > Details and check ‘Yes, this product has free shipping’.

Limiting shipping to a particular country

You can limit shipping to a particular country by creating a shipping zone which contains all the countries you want to ship. Then also edit the default zone and disable all the shipping methods set there. This is done in Settings > Shipping Settings.

Enable purchasing without an account

By default, BigCommerce stores will be configured to accept customer logins, but be aware that many customers don’t like registering an account, either for privacy reasons or because they want to make a once-off purchase. To enable purchasing without an account, go to Settings > Checkout Settings and ensure ‘Yes, enable guest checkout’ is checked.

Display Down For Maintenance on your store

You can stop access to the store temporarily, and show a Maintenance page, by going to Settings > Store Settings > Website and select ‘Yes, display a 'Down for Maintenance' message on my store’. You can also determine what this page shows says by going to Design > Template Files and clicking on ‘Edit’ for ‘maintenance.html’.

Does BigCommerce store credit card numbers?

BigCommerce does NOT store the credit card number under any circumstances, for security reasons.

Showing prices in multiple currencies

Payment will always occur in a single currency (called the default currency). However, you can display the costs of your goods in whatever currencies your customers desire – with the added bonus that the conversion will happen in real time per the correct currency exchange rate! To do this, select Settings > Currency Settings and click on ‘Add Currency’. To get real time currency conversion ensure that ‘Get currency exchange rate from Big Commerce Currency Service’ is checked.

Setting up PayPal

Setting up payment to handle PayPal is easy: go to Settings > Checkout Settings, select a PayPal version (such as ‘PayPal Website Payments (Standard)’, click ‘Save’, and then on the new PayPal tab that appears, enter your PaylPal credentials.

Knowing your panels and snippets

Want to know all about your panels and snippets? Go to Design > Template Files. An orange row means you have edited it. A white row means it is unedited. A green row means it is newly created by you.

Adding completely new web pages

Completely new web pages, in addition to the BigCommerce supplied files, can be added to your store by going to Website Content > Create a Web Page. To show the new page on the store’s menu, make sure the ‘Yes, show this web page on the navigation menu’ is ticked.

Removing a panel

Any panel can be removed from a page easily and quickly. This can be done in two ways. The first way is by going to Design > Design Mode and clicking ‘Open My Store in Design Mode’. Right click on the panel you want to remove (such as ‘Categories’) and select ‘Remove Panel’ from the popup menu. The other way is by directly editing the file in a HTML editor, and uploading to your BigCommerce site via FTP.

Setting whether sub-categories are displayed or not

You can set whether sub-categories are displayed or not by going to Settings > Store Settings > Display and entering a number in ‘Category List Depth’. A depth of 1 will hide sub-categories.

Changing your emails' footer

By default your emails will have an ugly footer like ‘is powered by Big Commerce. Launch your own store for free with Big Commerce’. To change this, go to Design > Emails. Click ‘Snippets’. Then edit the file called EmailFooter.html.

Determining which order statuses trigger an email to the customer

You can set which status on the order triggers an automatic email to the customer. Go to Settings > Checjkout Settings. At the bottom of the 'General Settings' tab, go to 'Customer Email Notifications' and tick all the statuses you want emails for.

Getting a copy of the email your customer is automatically sent

To get a copy of the invoice a customer gets emailed automatically when they buy a product in your store, go to Settings > Store Settings > Miscellaneous, and click on ‘Yes, forward order invoice emails to’.

Avoiding SPAM in your store

SPAM can be easily avoided by adding CAPTCHA to your store (which is a challenge response test to ensure that the response is generated by a human and not by a computer). This can be enabled by going to Settings > Store Settings > Display tab, and turning ‘Enable CAPTCHA? [Yes], enable CAPTCHA security’ on.

Adding your store as a subdomain of an exidting website

Your store can be a subdomain of an existing domain. You can set this in Tools > Move to Domain and select ‘I want to keep my domain name with my current registrar, but use it for my store’. You will then have to go to your ISP and set what is called a ‘CNAME’ entry to the store.

Registering a new subdomain with Bigcommerce

You can register your store’s domain name directly within BigCommerce via Tools > Move to Domain and select ‘I want to register a new domain name to use for my store’.

Forcing your customer to buy a minumum and/or maximum quantity

You can set a minimum and/or maximum quantity of any product by going to Edit Product > Other Details and entering the details in the 'Minimum Purchase Quantity' and 'Maximum Purchase Quantity' fields.

Creating a forum in your store

To create a user forum within your store, goto to nabble.com and sign up for a free forum. Within your Nabble account, go to Options > Embedding Options and copy the javascript code that is produced. Then within your BigCommerce account, go to Website Content > Create a Web Page, click on the 'HTML' button, and paste the javascript code you copied.

Changing the Sort By dropdown

The contents of the 'Sort By' dropdown can be changed by editing the snippet CategorySortBox.html. This can be done via Design > Template Files and choosing this under 'Snippets'.

Changing the Thank You message when customers finish their order

You can change the default 'Thanks for your order!' message that comes up after a customer has paid for a purchase. To do this edit the order.html page and change the following line to whatever you wish:

%%LNG_ThanksForYourOrder%%

Removing the Powered By BigCommerce link

If you want to remove 'Powered by BigCommerce' at the bottom of your store, simply edit the Panel Footer.html and comment out (or remove) the line

%%GLOBAL_PoweredBy%%

Changing your store's background color

To change your store's background color, go to your template css file (this will be called something like gray.css or blue.cc) and change the background-color in the following line to the color you want:

body {
   background-color: #fff;
}

Changing the customer invoice email

Customers are emailed an invoice when a purchase is made. This email can be changed by editing invoice_email.html. This can be done by going to Design > Email and clicking on 'Edit'.

Having a splash creen on your store's home page

To create a splash screen with a large image on your store's home page, edit default.html and immediately under the following code add your image:

%%Discount.FreeShippingEligibility%%
%%Banner.TopBanner%%

For example:

%%Discount.FreeShippingEligibility%%
%%Banner.TopBanner%%
<img style="float:right; margin-top:10px" src="%%GLOBAL_IMG_PATH%%/%%GLOBAL_SiteColor%%/front_page_image.jpg" width="793" height="500" alt="Online Store"></a>

Also you will need to comment out the following code:

%%Panel.SideCartContents%%
%%Panel.SideTopSellers%%
%%Panel.SideNewProducts%%
%%Panel.SidePopularProducts%%

Editing the global BigCommerce variables

The global BigCommerce variables %%xxxxxxxxxxxx%% cannot be edited - they are server side includes which you do not have access to (this is a big limitation, so get used to it). However, you can replace them with text of your own.

Changing the font or color of any of the text in your store

By FAR the easiest way to do this is by using the FireFox browser. Once you are displaying the page you want in the browser, right click on the background and select the 'Inspect Element' menu item. This will open up the element inspector at the bottom of your screen. Click once on the magnifying glass icon (near the very bottom left of the browser) - this will change the color of the icon from gray to blue. Then immediately click on whatever element you want to change. The bottom righthand side will display the css file (line number and tag) that you need to change.

Adding a special link on the left column

To add a special link on the left column, edit the SideCategoryList.html panel, and change the following section:

%%SNIPPET_SideCategoryList%%

to something like:

%%SNIPPET_SideCategoryList%%
<a href="http://wwww.yourspecialink.com">Your Special Link</a>

Hiding the search bar from your store

To hide the search bar, edit styles.css and change the following code:

#SearchForm {     float: right;
    margin: 15px 10px 0 0;
    padding: 10px 0 0 0;
    display: inline;
}

to

#SearchForm {     visibility: hidden;
    float: right;
    margin: 15px 10px 0 0;
    padding: 10px 0 0 0;
    display: inline;
}

Displaying credit card logo in your payment page

You can display a credit card logo in the bottom of your credit card payment page by first uploading an image of the creditcard logo to your store's website, then b y changing the code in the snippet file ExpressCheckoutConfirmation.html from:

<div class="PL20" id="provider_list" style="display:%%GLOBAL_HidePaymentProviderList%%">
   %%GLOBAL_PaymentProviders%%
</div>

to something like:

<div class="PL20" id="provider_list" style="display:%%GLOBAL_HidePaymentProviderList%%">
   %%GLOBAL_PaymentProviders%%
   <br />
   <img src="%%GLOBAL_IMG_PATH%%/%%GLOBAL_SiteColor%%/creditcards_image.gif"/>
</div>

Redirecting a deleted or old link

Redirecting an out of date link in your store to a new page is easy. Select Tools > 301 Redirects. Click 'Add Redirect...'. In the 'Old URL' field enter the old link (fr example /pages/old.html). For 'Redirect Type' select 'Manual Link'. Then enter your new URL (for example /pages/new/html). Any time a user tries to go to your old link, they will be automatically redirected to the new page.

Adding Google Analytics to your store

Google Analytics is a must! It provides, free of charge, huge amount of statistics such as how many hits and visits your site has had on any particular day, from which countries, etc. To add Google Analytics to your store go to http://www.google.com/analytics and register for a free account, and enter your store's details (including URL). At the end of registration, you will see a section on Google Analytics with 'Paste this code into your site'. Copy the code, then go into your BigCommerce store and select Settings > Analytics Settings. Choose 'Google Analytics', press Save, and paste that copied code segment into the Google Analytics tab. This will automatically put analytics code into every page in your store.

Displaying your products by brand as well as by type

A common feature is to have on the left of the store two category trees: one by category type (dresses, shirts, shoes) and the other by brand. To add the brand tree, firstlyt create brand names by going to Products > View Brands. Then assign brands to each product by going to Edit a Product > Other Fields and assigning the Brand Name. As soon as any products are assigned a brand, you will see an additional panel on the left called 'Shop By Brand'.

Guest Checkout

It is very important to provide customers a capability to purchase without creating an account, due to time or privacy reasons. This is called Guest Checkout and is enabled by going to Settings > Checkout Settings and selecting 'Yes, enable guest checkout'.

Going directly to shopping cart after purchase

The default behavior within BigCommerce is that after a purchase is made, a dialog box is opened asking the user 'What next?'. This is actually quite ugly, and can be improved by taking the users directly to their shopping cart. To do this, go to Settings > Store Settings > Display and in 'Add to Cart Action' select 'Take Them To Their Shopping Cart'.

Avoiding American Express and Diner's Club

Adding a credit card capability to your store is straight forward, however often you want to limit the choice by avoiding cards such as American Express and Diner's Club. This can be done via going to Design > Template Files and editing genericcreditcard.html. Then add the follow to the end of the file:

<script type="text/javascript">
$('#CCType_AMEX,#CCType_DINERS,').remove();
</script>

Store Credit

You can provide customers store credit rather than returning money. This is done by going to Customers > View Customers, finding your customer, and entering in an amount in the 'Store Credit' field. A customer that has sdtore credit then selects 'Pay using my store credit' on the checkout page.

Adding Telephone field to account signup

To add a new field when a customer signs up (such as Telephone) go to Tools > Form Fields > Account Signup Fields and select 'Create a New Field...'.

Different prices for different options

To have different prices for different product options, set up an Option Set for the options. Then go to Products > Product Options and select 'Manage Rules' for the Option Set you want. and click 'Create a Rule...'. On the popup that shows, tick the option you want the price change for, tick 'Adjust its Price' - and that's it!