Adding a Dynamic Cart Content Panel to Your BigCommerce Store Header

Tonight I was working on a new client’s shopping cart and one of his requests was to have a Dynamic portion of the Header updated every time a visitor added something to their cart. This panel will not show until the first item is added to the shopping cart, then it will remain visible at all times.

His website is still in process but this request was tackled today with great results. As some of you may be looking to implement this on their websites I will now post the steps to do this. So follow along, it is very simple. (Right… it took me a while to get it to work, but now you get the benefits, ENJOY)

There are three main components:

  1. The Panel that will show only when a visitors adds something to their cart.
  2. The Styling to make it appear on the correct place.
  3. The Code that will hold the Panel.

We will be using the “SideCartContent” Panel that is already available to you through the BigCommerce template files. So lets start by opening your Control Panel.

  • Log in to you BigCommerce store
  • Go to Store Design

Editing the SideCartContents Panel

Click the “Browse Template Files” button under Store Design and go find SideCartContents.html under Panels. You will edit this file with the following information. REMEMBER! Copy and paste the entire file into a text document or your favorite HTML editor before making any changes and keep it as a backup.

Remove the entire code and paste this code instead:

<div class=”Block Moveable Panel SideCart” id=”SideCartContents” style=”display:%%GLOBAL_HidePurchasingOptions%%%%GLOBAL_HideCartOptions%%; %%GLOBAL_HideSideCart%%”>
<big><b><a href=”%%GLOBAL_ShopPathNormal%%/cart.php” style=”color: white;”>%%LNG_YourShoppingCart%%</a></b></big>
<div class=”BlockContent”>
<p>
%%GLOBAL_SideCartItemCount%%<br />
%%LNG_SideCartTotalCost%%
</p>
</div>
</div>

Click “SAVE”

Editing the Style.css file (for proper positioning)

Now, still under the “Browse Template Files” window, it is time to go to the top and find “Styles.css” under Style Sheets. The following code can be pasted anywhere really, but try to find an appropriate place for it. Keeping your code clean and organized will save you time in the future if you ever need to find anything.

Here is the code you need to copy and paste into your Styles.css file:

#HeadSubTotal {
margin: -200px 0 0 730px;
position: absolute;
font-size: 0.9em;
padding: 0 0 0 75px;
color: #fff;
}

Don’t worry too much right now about the settings, we will come back to that once we get it working so you can style it to fit your specific color scheme and overall web design.

Adding the Code to Your Pages

Last step is to add the code that will hold the Panel on your pages. For this we will start with “default.html” which is your Home Page, so go find it under your Layouts section (we are still on the Browse Template Files window). Copy and paste the following code right bellow the %%Panel.Header%% tag.

The code you need to copy and paste is this:

<div id=”HeadSubTotal”>
<div style=”display:%%GLOBAL_HideSideCart%%”>
%%Panel.SideCartContents%%
</div>
</div>

So it should end up looking like the following picture:

Time to Roll this to All Your Pages

Now repeat the last step of adding the above code to each and every page under your Layouts that you want to apply this. So if a visitor goes from your Home Page to a Product Page the dynamic cart content panel will be available, same thing if he goes from a Product Page to a Category Page. The idea is to keep this panel available to your visitors AT ALL TIMES so they can navigate to their Cart from this section of the web page and then Check Out. It should only take you about 10 minutes to paste the code to these pages and once it is done, IT IS DONE!

Styling the New Panel to Match Your Website

Go back to your Styles.css file and work on the settings to make it match your online store design. You may need to move the margins or change the text color. Play with it until you get it to match and display exactly where you want it. The color white of the link can be changed under the SideCartContents.html panel. Find the style that says “white” and change it to any color you like, you may use hex colors like #000000 for black.

NOTE:

You may need to move your Search box down if you want your new panel to appear above it. All you need to do is go into your Styles.css file and find #SearchForm then change the “padding-top” attribute. Make it a higher number to move it down or lower number to move it up. See image bellow:

Need Help Implementing this Into Your BigCommerce Store?

Request professional help by using the form below. We will get in touch with you ASAP and schedule a time to work on your store.

We would love to hear your comments about this tutorial. Please leave a comment.

Tags: , , , ,

6 Responses to "Adding a Dynamic Cart Content Panel to Your BigCommerce Store Header"

  • SkidVicious says:
    • admin says:
  • Paul says:
    • admin says:
  • Jimmy says:
    • admin says:
Leave a Comment

*