Ecommerce software home
Shopping Cart Software Forum for Ecommerce Templates
 
Home | Profile | Register | Active Topics | Members | Search | FAQ
Username:
Password:
Save Password
Forgot your Password?

Find us on Facebook Follow us on Twitter View our YouTube channel
Search our site
 All Forums
 Technical
 Tips and Tricks - HALL OF FAME
 Display 'Promo Banner' image over product image
Author « Topic »  

RJB
Ecommerce Template Expert

United Kingdom
777 Posts

Posted - 04/30/2014 :  15:27:50  
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.

Andy
ECT Moderator

95440 Posts

Posted - 05/01/2014 :  04:14:01  
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



RJB
Ecommerce Template Expert

United Kingdom
777 Posts

Posted - 05/01/2014 :  09:01:08  
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.

Guy
ECT Moderator

Canada
2486 Posts

Posted - 05/01/2014 :  12:53:14  
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

hrioo
New Member

59 Posts

Pre-sales questions only
(More Details...)

Posted - 05/09/2014 :  11:42:24  
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.
  « Topic »  
Jump To:
Shopping Cart Software Forum for Ecommerce Templates © 2002-2022 ecommercetemplates.com
This page was generated in 0.03 seconds. Snitz Forums 2000