Adding a Frame to your products
One of the things highlighted in my recent article, "What can we learn from Bricks and Mortar?", one of the highlighted aspects of store design was product presentation. When you display your product thumnails in your section pages, you are fairly limited by how you can add a bit of pizazz aand help the products stand out. Its kind of like an art gallery where none of the paintings have frames, OK but a little dull. I have previously discussed adding a border to the products, however I really wanted a more dynamic and visually pleasing method to give the store a better look. With that i mind, I present to you "Overlay v1.0".
By using a combination of transparent GIF images and some of my sneaky javascript, it is possible to add a whole new style of presentation to your products. For example, continuing the Art Gallery analogy, we could have something like this:
Continue reading Comments (2) 09.12.2007. 14:10
Add a Bookmark button
I was recently asked for a simple way to add a "Bookmark this site button". Nice little feature, but a little annoying to implement across a wide range of browsers. With some HTML / Script additions, you can have this feature, although different browsers will handle it differently.
Firefox and all other mozilla / gecko based browsers will pop up the add bookmark dialog. IE 6 and below will do the same. IE7 will work for some people, however increased security measures stop it from working in most cases. Safari has no automated method, so will pop up a message telling the uer to press CTRL+D to bookmark it.
Continue reading Comments (2) 23.11.2007. 14:57
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: http://www.printfection.com/ukulele
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="http://www.australele.com/usw/js/tp-jq.js" type="text/javascript"> </script> <script type=text/javascript> var basecart= 'ukulele'; </script> <script src="http://www.australele.com/usw/js/minicart.js" 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}
Comments (2) 23.11.2007. 14:32
