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!
