The default magento product grid is functional, but can be a bit bland. It sure would be nice to show some Free Shipping Notices in the grid. Maybe a stylish product image overlay (or label). Today we are going to learn how.
Here is a side by side image with and without the image overlay.
Here are the steps for accomplishing this on product listing pages:
1) create a free_shipping attribute in admin section. Make sure to select Used in Product Listing on frontend properties.
2) Add your attribute to your whatever attribute sets you want it to show in.
3) Open a product in admin, find your new attribute free_shipping and set to Yes using the dropdown menu.
4) We are going to use a conditional statement to pull an image into the category view page at app>design>frontend>default>your theme>template>catalog>product>list.phtml.
Insert the code as shown in this code.[download id=”2072″].
5) Create a static block called free_shipping. Inside of this static block insert div and a free shipping image.[download id=”2074″]
6) Create an image to be used inside your static block or use mine. Make sure it is the right size, and make sure it has a transparent background. Place it inside the statick block.
Here is my image.
7) Add the following rules to your style sheet:
.free-shipping{position: absolute;top:0px;left: 0px;}
You may also need to set the product grid position to relative:
.products-grid li.item {position:relative;}.
Congratulations!
Your product should now have a custom label in top left corner, showing Free Shipping.