As things stand, the confirmation page in BigCommerce simply displays a thank you message and if you have set up a “pay later” option, details on how to complete the order, plus some links to new/popular products. So how to add the order confirmation details?

I initially tried calling the %%Panel.ConfirmOrder%% into the order.html template, but while this is read by the template file, and pulls in the table structure, it seems the cart/order session data is emptied between checkout success and order confirmation, resulting in an empty summary.

The workaround lies in the email templates.

I remembered that the order confirmation email sends a customer a summary of the order, and amazingly after a quick test, the snippet is rendered by the order confirmation template.

So here is how to get the summary:

Head over to Design > Browse Template Files… and open the order.html template file. On line 50 (assuming you’re in an unedited version of the template), above %%GLOBAL_OrderConfirmationDetails%%, paste the following code:

Now when you place an order, you will get a summary on the confirmation page.

To style the order summary, because the table IDs aren’t set up properly, I have wrapped each snippet in a div tag with a unique ID. You can then reference them in your CSS file as #OrderSummaryTable td etc.

Below the “thank you” blurb and order confirmation number, they presented an eye-catching panel with a Facebook Like Box, Twitter Follow Button and newsletter signup form. I guess I have seen this many times in recent years, but I can honestly say this is the first time I noticed it. And I have to say, it’s a most excellent idea.

It has become a case of plastering social proof over your site and hoping new visitors will click “like” or “follow”. Of course some FB/Twitter savvy users will click the buttons, but on the majority of sites I work with I have to say the “new visitors to followers” conversion rate is minimal. I’d put this down to the fact the visitor has come with the purpose of finding a product, not following your promotions on Facebook.

But, if your could convert the user to a customer, the chances they will want to subscribe are a lot higher, as you’ve already started a relationship between them and your company. So placing a good promotion for your social channels on the order complete page should help build your followers for Facebook, Twitter, YouTube and whatever else you’re using at the moment.

So how do we do it in BigCommerce? If we know where to look, we can add our Social Marketing promotion in just a few seconds. For this demo, I’ll show you how to add a Like Box for your Facebook profile.

First things first, let’s get the code we need for the Like Box. Pop on over to http://developers.facebook.com/docs/reference/plugins/like-box/ and generate your code. Set up the options how you like, and click the Get Code button. In the code popup, select HTML5, and copy the mark-up that is displayed.

Now we’ll go into our BigCommerce control panel. Click Design and under the Store Design tab click Browse Template Files. Under Layouts in the left hand column of the editor, locate and click order.html. Now somewhere around line 50, you should see the following code in the layout:

Underneath this, we can paste the Facebook code. I’ve added a header along with it inviting people to follow, to receive offers and news. If I was adding this feature to a clients website, I would put a design together which was eye-catching and attractive to the user to entice them into following the companies Social Marketing channels, but this is not a design lesson!

Finally, click save, and now you have a Facebook Like Box presented to everyone who reaches the Order Confirmation page. You could do the same thing with your mailing list, YouTube channel or Twitter feed too.

Hope this was useful, and if you use it and it does indeed boost your followers, let me know in the comments box below!

To begin, lets head over to the Shipping Settings section in the control panel, under the Settings menu.

If you haven’t already set up your shipping options, you will see the following screen:

To briefly summarise the Store Location section, we need to fill in the details of our warehouse here. The company address should be the location of where we are sending our products from. Easy. Just fill in the correct details and click save, and we’ll move on to the Shipping Zones tab.

The first time you look at the Shipping Zones tab, you will only see one zone, the Default Zone. A zone covers an area you want to ship to; it can be a country (or several countries grouped together), specific states or regions of a country or countries, or specific postal code limited areas.

The zone also contains one or more Shipping Methods. A shipping method is a delivery service, or multiple services you use for that zone. For example, you may use two different couriers plus a postal service in one zone, these would be added as methods to the zone.

The Default Zone initially covers everywhere, worldwide. It’s a generic shipping charge which is applied if a customer doesn’t meet a criteria in your custom zone settings. You can disable this, to limit your shipping to only specific zones, by clicking Edit Methods and then deleting the existing services listed.

After doing this, your store no longer ships anywhere in the world. If you try to check out, you will be notified that shipping is unavailable.

So next we need to add a new shipping zone to resume deliveries. Go back to the main shipping settings page, and click Add a Shipping Zone. We’re going to see this screen now:

First of all, give the new zone a name, the country or continent name would be fine. I’m setting a zone up for the USA so I’ve just called my zone “USA“. Now you need to choose one of the options that suits. As I only want to create shipping for the USA as a whole, I’ve selected the first option, This shipping zone is based on one or more countries. Lastly, in this section, click the checkbox to enable the zone.

Directly below this section, you will see the following options:

Here are the zone settings for free shipping and handling charges. I’ll briefly break down these options:

• Enable Free Shipping - check this to enable free shipping to this zone. If for instance you are based in the USA and want to give US customers free delivery on orders over $50, enable the option and type 50 into the Order Total to Qualify box.
• Exclude products with fixed price shipping - you can specify a fixed shipping cost for specific products. If for instance you always need to send certain items with a specialist courier, you can add a fixed price to the item. Checking this option makes sure that the fixed shipping cost is always applied.
• Handling Fee - If you add a service charge or handling fee for each order, you can choose to specify a charge per zone or per method.
• Show Separately - This itemises the handling fee at checkout, showing your customer a breakdown of shipping and handling charges.

After you have set up the zone, it’s time to add at least one shipping method. Click Next to move on.

Click on the Add a Shipping Method button for a list of available shipping methods.

You are now given the choice of several methods, but these are broken down into two main categories; real time and fixed rates. Real time shipping is usually zone dependent, whereas fixed rate does just what it says – you set a fixed charge for your delivery fees. Many of the real time courier services such as FedEX and UPS require an account with access to their quoting API systems too, so if you plan to use real time shipping quotes with BigCommerce, make sure you have your account details to hand.

For the purposes of this walk through, we will choose the simplest method, Flat Rate Per Order. Select this from the list, and then enter a more user friendly name, as this is what your customer sees at the checkout. Maybe Next day delivery. Finally, make sure the checkbox is ticked, and enter a cost in the input box which appears. Then click save.

And that is that, it’s fairly straightforward to set everything up how you wanted. How about if you wanted to offer a budget 3-5 day delivery as an option as well though? Again you could do this using the Flat Rate method; again in the Shipping Methods tab of your USA zone, just click the Add a Shipping Method button and repeat the last process, labelling the display name 3-5 day standard delivery, with a lower shipping cost.

If you wanted to ship internationally, head back over to your default zone, and add in the appropriate methods. Don’t forget to check the zone settings and make sure free shipping is turned off, otherwise you could give international customers costly delivery services for nothing. Handling the free shipping and handling charges per zone lets you get this problem under control.

That concludes this walk through guide. If you have any questions, let me know in the comments box below!

It’s very straight forward and easy to do, so for today’s 5 minute masterclass, we’ll look at how we go about doing it.

First of all we will remove the main site “powered by” link. To do this, head over to Design > Store Design and click the Browse Template Files… button. In the editor window, locate and open the Footer.html panel.

By default, around line 8, you will see the following global variable: %%GLOBAL_PoweredBy%%, just go ahead and delete that, and now save the file. That’s it for the main site!

Removing the “powered by” message from customer emails is just as easy. In the Design section, click the Emails tab, and expand the Snippets folder. Edit the EmailFooter.html file, where at the bottom you will find the line: “%%GLOBAL_StoreName%% is powered by Big Commerce. Launch your own store for free with Big Commerce.”

You can simply delete this line, and save.

Using a bit of jQuery, we can replicate the old feature by hiding menu links matching or containing specific keywords.

To do this, we need to open the panel SideCategoryList.html in the template editor (Design > Store Design > Browse Template Files).

At the end of the file, we need to paste the following code snippet:

This works for both classic mode and the newer flyout/dropdown menu style category menus. To match a category, replace Keyword in the :contains(‘Keyword’) part. If you only have one category you want to hide, remove the next part ,:contains(‘My key phrase’), or add as many other phrases with extra ,:contains(‘category names here’).

Any questions, as always, drop me a comment below.

So for this 5 minute masterclass, I’m going to show you how to change a status message in the cart page with jQuery.

One such status message appears when your customer submits a coupon code to discount their order. Generally, BC notifies the customer that “The coupon that you entered has been applied to your cart”. Fair enough, but we might want to say something like “Thank you for taking advantage of one of our awesome offers!”. This can be done quickly and easily with one line of code.

To do this, simply open your cart.html template file from Design > Template Files and before the closing </body> tag, add the following code:

And there we have it, a status message updated using jQuery. You can do this with any text you previously thought impossible to edit. Just change the selector (the $(“div.SuccessMessage”) part) to the appropriate class/id of the element you want to replace. Happy editing!

Always up for a challenge, especially when I see such big claims that something is impossible, I headed for the template file editor and opened up cart.html, and after a few moments of experimenting, I concluded that it is entirely possible to create the redirect.

Here’s how, in three easy steps:

1. Click Design and open the Template Files tab. Find cart.html in the file list, and click edit.
2. In the editor, scroll to the bottom of the file, and locate the closing </body> tag.
3. Paste in the following code above the tag:

And there we have it. Test it out by adding an item to your cart in the frontend, opening the cart, and then clicking Remove. After two seconds, the empty cart redirects to your store index page.

Just a few notes to explain the following:

“window.location = ‘/’;” – replace the ‘/’ with any path you require for your redirect destination.
2000 is a time, in milliseconds, until the redirect activates.

Setting up your Sale products

The first thing we need to do is put some items on sale. This is easy; head on over to the Products tab in your store control panel and hit View Products. Find the product you want to put on sale and click the edit button.

Under the main details tab of the edit screen, scroll down to the Pricing & Pre-Order Options section and then click the More Price Options link. You’ll see a few more price fields appear. We now just have to fill in a couple of extra prices. Set the Retail Price field to reflect the existing price of the item, and the Sale Price field to the new reduced price. Now save your new prices, and there you have it, the item is now on sale. Easy! Repeat for as many items you wish to promote.

Adding the “on sale” panel

Now that we have some sale items set up, the next thing we need to do is add the “On Sale” panel to the store front. Head over to Design, and then click the Template Files tab. Locate default.html and click Edit. Under the main content div tag, add the following Panel call:

Now save the changes to your template.

Viewing the new panel

All that’s left to do is check your new panel is appearing. Visit your main store page and take a look. You should now see a new panel displaying the discounted products. I’m planning to show you how to make these sale items more prominent with a “you save x%” badge in a later article. As always, drop any questions into the comments below this post.

So how do we go about it? It’s pretty straightforward and can be set up in just a few moments.

Creating a new template file

The first thing to do is grab the markup from the existing default homepage layout template. You’ll find this inside the default.html template. If you’re unfamiliar with where to locate template files, you’ll find everything under the Template Files tab in the Design section of your stores control panel. Click the edit link, and you’ll bring up the HTML source code of the existing front page.

Now you have the default layout template source open, select the entire HTML markup and copy it, then open your favorite text editor and paste in the code. Now you need to save this file to upload into your store template directory via FTP. For easy reference, I’m going to call this _homepage.html.

Upload your new homepage code into the template directory of your store via FTP. If your unsure about how to go about doing this, BigCommerce have a handy set of articles here on how to connect to your store hosting via FTP. If you refresh your Template Files tab in the design area of your control panel, you will now see the new _homepage.html file near the top of your template list. Now click the Edit link.

In the source code window that now appears, paste in the following code and save:

Setting up your style sheet

We’ve now created the base layout for our new homepage. Pretty easy so far! Now we need to edit our main stylesheet. In the edit window, open your styles.css file. Scroll down to the bottom, and add the following definitions:

OK, so far, so good.

Changing display settings

Next we need to change a display setting for the “New Products” feed. In your control panel, click Settings and choose Store Settings. Now open the Display tab and find the New Products setting (it should be the second setting under Display Settings). Change this setting to display 6 new products at a time.

Add a banner

Now it’s time to add a banner into our homepage. First of all we need to upload an image we can use for our banner. Still in our control panel, head over to Image Manager which you will find under the Website Content tab. Click the Upload Images… button and then browser for your banner image. I created on which is 960 pixels wide by 300 pixels high. Select it, and then upload.

Our template file contains regions which will pull in content from the banner system, so let’s move on to the banner section. Click the Marketing tab and choose View Banners, and on the screen that appears click the Create a Banner… button.

Give your banner a name, I called mine Homepage Banner Top, and then in the WYSIWYG editor, click the Insert/edit image button. In the dialogue box, choose the image you just uploaded from the option box labelled Image from gallery, and click Insert.

Now we can turn this banner into a link. Click on the new banner in the WYSIWYG editor to select it and then on the Insert/edit link. In the Link URL field, put a link to the page you want to head over to, I used the URL /store/.

All that’s left to do here is make this banner appear on the homepage. Select homepage from the list labeled Show on Page and finally choose Top of Page from the Location dropdown. Click save.

Setting the new homepage as default

Finally we just need to enable the homepage, and create an obvious link to the main store area. We do this in the View Web Pages section underneath the Website Content tab. In that section, click the Create a Web Page button. Firstly, in the list labelled This Page Will, choose Contain content created using the WYSIWYG editor below. Enter Home as the page name, /home/ as the page URL, and ignore the content editor box.

As you scroll down the page, make sure Yes, show this web page on the navigation menu is checked, and that No Parent Page is selected. Now comes the two most important options! You will notice a dropdown box labelled Template Layout File:. This will by default have page.html selected. Click the box, and you will see that now you have a choice, and your new template, _homepage.html is available to use. Select this, and then check the next option Yes, display this page as the home page of my store.

Create a link to the store front

The last thing to do is create an obvious link to the default store front. Again, create a new webpage, but this time select Link to another website or document as the page type. Call your page Store and set the link to /store/.

So that’s it, we’re all done! Now we have a new homepage! I hope that wasn’t too painful and you were able to follow along. While my example doesn’t break the boundaries of page design, it gives you an idea of what we can achieve by using the templating system to apply custom designs to specific pages. Hopefully I’ve given you enough information to expand on when implementing your own designs. If you have any questions, drop a comment below.