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:

Or if something a little more grunge is your style, you could have something like this:

 

Or put those same frames on a black background for something really different:

Using the same techniques, we can even end up with more of an overlay, rather than an actual frame:

This is all done by overlaying a transparent GIF image over the top of the product image using a script. The overlay images that I have used are 220 x 200, which seems pretty ideal to still show enough of the actual product.

Preparing the images

To create your overlay images, all you need to do is create a suitable image with a transparent region where you want the actual product to show through. If you need help creating transparent images, go to google, there are plenty of tutorials that cover this well.

Here's some I prepared earlier

To get you started I have prepared some overlay images that you can use.. Right click on each image and view the properties to get each images location (URL).

The Script 

To get this to work on your store, you need to add a little bit to your base HTML:


<script src="http://www.australele.com/usw/js/tp-jq.js" type="text/javascript"></script>
<script type="text/javascript"> 
var frameHeight = "220px"
var frameWidth = "220px"
var numFrames = 5
var overlay1 = "http://www.australele.com/usw/frames/frame1.gif"
var overlay2 = "http://www.australele.com/usw/frames/frame2.gif"
var overlay3 = "http://www.australele.com/usw/frames/frame3.gif"
var overlay4 = "http://www.australele.com/usw/frames/frame4.gif"
var overlay5 = "http://www.australele.com/usw/frames/frame5.gif"
</script>
<script type="text/javascript" src="http://www.australele.com/usw/js/overlay.js"></script>

The script is fairly simple. All you need to do is set the url of your frames (up to 5 in total - overlay1, ovelay2 , etc ) set the number of frames (numFrames} and tell the script the height and width of your overlay images. If ypu have used any of my other addons, you will probablt already have the first line and wont need it again.

Let me know if you use this, or would like to contribute some overlay images for other people to use.

09.12.2007. 14:10

Fighting Saints Sports Shop on 10.12.2007. 12:32

Wow!

Very cool and will certainly make a PF shop stand out from other POD's. Now all I need to do is find the time to implement your new enhancement.

Gavin Smith on 11.12.2007. 14:12

Thanks, that is what I was aiming for. Hope you get some use out of it.

Lorie on 11.06.2009. 23:01

Gavin,
Your help is SO greatly appreciated! I LOVE all the things you've come up with and I'm taking great advantage of most of them!
I know they will help get me more sales- they're awesome!
Thanks!!
Lorie