Create a ‘Free Shipping’ Image Overlay

This post is for creating a ‘free shipping’ image overlay in the product list pages but the same methods would apply to any other callouts you’d find appropriate, such as ‘reduced’, ‘sale’, ‘special’, ‘new’. It’s all determined by what attributes you use and how they’re set.

(This assumes you have an attribute called ‘free_shipping’ and it’s available on the frontend – change or add the attribute needed as appropriate)

First step is to create a css entry to define the image definition.

OPEN: skin/frontend/YOURPACKAGE/YOURTHEME/css/skin.css and add the following:


/* added for free shipping overlay */
.freeship_image {
position: absolute;
z-index:1;
padding-top: 10px;
}

(The padding can be adjusted depending on what works best for you particular images)

Create a small image that will be your overlay and upload to your skin images folder –¬†images/free_shipping_sm.gif (the image used in this example was 44 x 27 which worked best for the image sizes used in the list.phtml)

OPEN:  app/design/frontend/YOURPACKAGE/YOURTHEME/template/catalog/product/list.phtml

In the bottom section for grid mode, find the item class and modify so that it’s similar to below (the main thing is you want to add a div that includes the overlay image)


<li class="item<?php if(($i-1)%$_columnCount==0): ?> first<?php elseif($i%$_columnCount==0): ?> last<?php endif; ?>">
<div>
<?php if ($_product->getfree_shipping() >= 1): // added the div for free shipping flag?>
<img class="freeship_image" src="<? echo $this->getSkinUrl('images/free_shipping_sm.gif'); ?>">
<?php endif; ?>
<a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>" class="product-image"><img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(150, 150); ?>" width="150" height="150" alt="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>" /></a>
</div>
<h2 class="product-name"><a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->htmlEscape($_product->getName()) ?>"><?php echo $this->htmlEscape($_product->getName()) ?></a></h2>

ok, now that the grid mode is set, find the list mode section and adjust so that the div appears similar to below


<li class="item<?php if( ++$_iterator == sizeof($_productCollection) ): ?> last<?php endif; ?>">
<?php // Product Image ?>
<div>
<?php if ($_product->getfree_shipping() >= 1): // added the div for free shipping flag?>
<img class="freeship_image" src="<? echo $this->getSkinUrl('images/free_shipping_sm.gif'); ?>">
<?php endif; ?>
</div>
<a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>" class="product-image"><img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(135,135); ?>" width="135" alt="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>" /></a>
<?php // Product description ?>

free_shipping_list

Your product listing pages should now display the ‘free shipping’ overlay.

We’ll also add a message on the product view page that ‘free shipping’ is included for those items …

OPEN: app/design/frontend/YOURPACKAGE/YOURTHEME/template/catalog/product/view.phtml

Depending on your template, locate a section where you want the message to appear – this example is right below the add to cart section ..


<?php endif; ?>

<?php if ($_product->getfree_shipping() >= 1): // added for free shipping flag?>
<div><h3>Includes <span style="color:red;">FREE SHIPPING</span> to contiguous USA</h3></div>
<?php endif; ?>

<?php if(!$_product->isSaleable() && $_isActive): ?>

free_shipping_view

 

If you also want to include the image in your upsell products:

OPEN: app/design/frontend/YOURPACKAGE/YOURTHEME/template/catalog/product/list/upsell.phtml

Insert the code as it appears below:


<?php if($_link=$this->getIterableItem()): ?>
<td>
<?php // Product Image ?>
<?php if ($_link->getfree_shipping() >= 1): // added the div for free shipping flag?>
<div><img class="freeship_image" src="<? echo $this->getSkinUrl('images/free_shipping_sm.gif'); ?>"></div>
<?php endif; ?>

<a href="<?php echo $_link->getProductUrl() ?>" title="<?php echo $this->htmlEscape($_link->getName()) ?>" class="product-image"><img src="<?php echo $this->helper('catalog/image')->init($_link, 'small_image')->resize(150,150) ?>" width="150" alt="<?php echo $this->htmlEscape($_link->getName()) ?>" /></a>
<h3 class="product-name"><a href="<?php echo $_link->getProductUrl() ?>" title="<?php echo $this->htmlEscape($_link->getName()) ?>"><?php echo $this->htmlEscape($_link->getName()) ?></a></h3>
<?php echo $this->getPriceHtml($_link, true, '-upsell') ?>
<?php echo $this->getReviewsSummaryHtml($_link) ?>
</td>
<?php else: ?>

 

Leave a Reply