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


 All Forums
 Technical
 Tips and Tricks - HALL OF FAME
 Display 'Promo Banner' image over product image
 New Topic  Reply to Topic
 Printer Friendly
Author  Topic   

RJB
Ecommerce Template Expert

United Kingdom
670 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
Administrator

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
670 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
1892 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   
 New Topic  Reply to Topic
 Printer Friendly
Jump To:
Shopping Cart Software Forum for Ecommerce Templates © 2002-2019 ecommercetemplates.com
This page was generated in 0.02 seconds. Snitz Forums 2000