Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Show "Free Shipping" on every image

7:33 am on Sep 17, 2010 (gmt 0)

10+ Year Member

Hello everyone,

I want to show "Free Shipping" on every page thumbnails generated by my shopping cart through CSS:

<ul class="ProductList ">
<li class="Odd">
<div class="ProductImage">
<a href="ddd" ><img src="ddd" alt="" /></a>
<div class="mare livr mare2">Free Shipping</div>

Every image is generated 3 image products per row, there is 4 rows with product images.

I used this one but the "Free Shipping" goes to left side and only one time showing:


.ProductList .ProductImage .mare{
position: absolute;
left: 199px;
bottom: 0px;
height: 13px;
padding: 0px 4px;
font: normal 7pt Arial;
color: #fff;
line-height: 13px;
.ProductList .ProductImage .mare2{
bottom: 5px;
.ProductList .ProductImage .mare3{
bottom: 26px;
.ProductList .ProductImage .nou{
background: #D82423;
.ProductList .ProductImage .promo{
background: #E67026;
.ProductList .ProductImage .livr{
background: #5D833F;

Please help

8:16 am on Sep 17, 2010 (gmt 0)

If the image is small enough, you could use the list-style-image: url(freeshipping.jpg); property:

ul li {

If you need to use classes:

ul li.freeshipping {

Try it and see if it works for you.
8:48 am on Sep 17, 2010 (gmt 0)

10+ Year Member

Hi Payne,

Thanks for reply.

Here is my design table for showing grid images:

You mean :

<li class="%%GLOBAL_AlternateClass%%">
<div class="ProductImage">
<div class="freeshipping">Free Shipping</div>
<div class="ProductDetails">
<strong><a href="%%GLOBAL_ProductLink%%" class="%%GLOBAL_SearchTrackClass%%">%%GLOBAL_ProductName%%</a></strong>

<div style="display: %%GLOBAL_HideProductShortDescription%%;">%%GLOBAL_ProductShortDescription%%</div>
<div class="ProductPriceRating">
<span class="Rating Rating%%GLOBAL_ProductRating%%"><img src="%%GLOBAL_IMG_PATH%%/IcoRating%%GLOBAL_ProductRating%%.gif" alt="" style="%%GLOBAL_HideProductRating%%" /></span>
<div class="ProductCompareButton" style="display:%%GLOBAL_HideCompareItems%%">
<input type="checkbox" class="CheckBox" name="compare_product_ids" id="compare_%%GLOBAL_ProductId%%" value="%%GLOBAL_ProductId%%" onclick="product_comparison_box_changed(this.checked)" /> <label for="compare_%%GLOBAL_ProductId%%">%%LNG_Compare%%</label> <br />
<div class="ProductActionAdd" style="display:%%GLOBAL_HideActionAdd%%;">
<a href="%%GLOBAL_ProductURL%%">%%GLOBAL_ProductAddText%%</a>

and CSS:

.ProductImage ul li.freeshipping {

Is that you mean?

9:20 am on Sep 17, 2010 (gmt 0)

If the entire "ProductImage" list needs the image, then that will probably work. That will put the freeshipping image in the list that has the class "ProductImage" only...or should.

Hate to make comments on code that I can not test.
10:10 am on Sep 17, 2010 (gmt 0)

10+ Year Member

Hi Payne,

Please check [chairsdirect.eu...]
6:43 pm on Sep 17, 2010 (gmt 0)

Sorry, but is there something I'm suppose to notice or not notice on the home page?
4:02 am on Sep 18, 2010 (gmt 0)

10+ Year Member

I want to show free shipping on directory products, on images.
5:36 am on Sep 18, 2010 (gmt 0)

Haven't you even tried the previous method using list-style-image and the necessary class for the list?

Featured Threads

Hot Threads This Week

Hot Threads This Month