I don't know if this has been shown here before, but I have just worked out a way to display a second 'promo banner' image over the top of
the small product image. I think this is a really effective way to highlight special offers or new products etc.

It is quite simple really.. First of all create a promo / special offer image of a suitable size to display over the product image and save it with a transparrent background.

Then, on the product admin page simply add the following code immediately after the small product image url.

" /><img src="images/special.png" class="specialimage

Then you just need to set up the 'specialimage' css class to adjust the position of the image so it is correctly aligned over the product image. I used the following, but this will need to be adjusted depending on the size of the images used.

.specialimage
{
position: relative;
top: -150px;
left: -35px;
z-index: 10;
margin-bottom: -70px;
}

On my site the the product images displayed on the cross-sell on the proddetail page and cart product images are scaled to a smaller size so I added the css class to those pages and adjusted the position as necessary.

I should add that I am no expert so if anyone is thinking of trying this I would advise thorough testing.

Hi

That's a very neat way of doing it and well thought out. I had to give it a whirl and it works very well

Here's an example on the first product

http://www.ectwp.com/products.php

..using the following css

.specialimage
{
position: relative;
top: -96px;
left: 2px;
z-index: 10;
}

Thanks very much for sharing

Andy

Please review our software and services

ECT newsletter
ECT hosting suggestions

Follow us on Twitter, Facebook, Google + and YouTube

Thanks Andy ..I'm glad you like it.

Mikelli - It adds a banner image to the small product image or thumbnail, and this is displayed wherever the small product image is displayed i.e. product page and the cart page and cross-sell displays if set up. See Andys example above..

Richard.

Cool thing! I think it would be even better if we could mark a product as "new" within the admin to activate the image overlay.

----
Guy
Quebec, Canada
http://www.lineaire.com

This is great. However, when magicthumb is enabled the product large image in detail page gets overlayed twice instead of displaying the specialimage. It works fine when magicthumb is disabled.