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".
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).
To get this to work on your store, you need to add a little bit to your base HTML:
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.