Introducing Minicart

After spending a considerable amount of time lately thinking / talking / writing about "UX" (geek speak for "user experience"), I realised one thing that was really missing from my store. A good ecommerce user experience should always give the shopper feedback about their shopping cart. Little thing I know, but an important piece of info for the shopper and something that helps your store look like a professional ecommerce site.

For example, if the shopper adds some items to the cart, the only way that they can see what is in their cart or track how much it is going to cost is by going into the shopping cart page. Wouldn't it be better if we could give the user a total in a visible location, and even list the items in the cart somewhere convenient. <>

Now, thanks to Minicart, your shoppers can see their total shopping cart value in the header next to the shopping cart link and if you choose, you can have a list of items displayed soewhere on your store pages.

Have a look here:

Add some products to the cart and see the total and items (in the left hand menu bar).

To add this feature to your store, add the following to your base HTML. Change the basecart variable to point to your chosen store:

<script src="" type="text/javascript">  </script>
<script type=text/javascript> var basecart= 'ukulele';  </script> 
<script src="" type="text/javascript">  </script>

To have the item list, you will need to add the following at the point that you wish to show them, probably on the base HTML in the #menucol cell.:

<div id="minicart"> </div>

You can style these links using:

#minicart a {attribute: value}

23.11.2007. 14:32

chris millst on 04.04.2008. 14:30

when i use this my page suddenly forwards itself to the shopping cart as soon as the home page loads.

Gavin Smith on 04.04.2008. 14:48

Chris, This is in use on many stores and I have never seen this happen. Please send me a link to your store so that I can diagnose the problem.