How to add custom product labels, badges, ribbons

2016-05-11 badge, label, ribbon, tutorial, video

custom product ribbons

 

This is an article about creating custom product ribbons. Of course the way of how I will do it can be used to add other things like badges, labels etc. The main expectaction that i've got is a possibility to create unique ribbon for selected products only - it should appear on list of products only for defined products. You can achieve this with mine module called custom contents blocks. So please install it in your shop. And go to the next step.

 

New hook to support customized product ribbon

As you probably know. my module html box pro allows to create blocks that will appear in custom hooks. In this addon you can create hooks too. For this guide, it is not necessary to create new hook (product-list.tpl file from your theme, if it is well coded should have hooks like: {hook h="displayProductDeliveryTime" product=$product}). But i decided to create new hook for this tutorial, it's because not each theme is well coded, so i will create new hook "just in case".

  1. Open html box pro module configuration page, inside left hand side column you can find form to "add new hook" (see screenshot)
  2. After page refresh you should see this new hook at the bottom of left hand column
  3. Enable it with clicking on checbox
  4. Click on add new contents button (green add new button)

 

Create new contents with our ribbon

Now it's time to define contents of our block. With html box pro moduel you can create and display any kind of custom contents you want. You can display texts, videos, images etc. So, in fact, i will use this image only - block with these contents will be our ribbon. So please follow steps described below:

  1. Click on green "add new" button and you will be redirected to form where you can define your new block.
  2. Please define name of the ribbon (it will be visible only for you, for back office purposes). For this guide purposes i used name "MyRibbon"
  3. If you want to display ribbon for selected products only - turn on option "Only on selected product page" and define products for which you want to display this block (see screenshot).
  4. Then scroll page down to section where you can define contents of the block.
  5. Insert there own ribbon image (or any other image that you want to display for this product as a kind of ribbon/ badge / label) (see screenshot)
  6. after that save your block.
  7. go back to your block edit page to see if everything was saved properly

 

It's time to alter theme product-list.tpl to support your new hook.

Please open product-list.tpl file. This file is responsible for appearance of list of products in the shop. We have to paste there a little shortcode to spawn our new hook (to display contents). And that is all what we have to do in this file. So, please open it and search there for code like:

<a class="product_img_link" href="{$product.link|escape:'html':'UTF-8'}" title="{$product.name|escape:'html':'UTF-8'}" itemprop="url">
     <img class="replace-2x img-responsive" src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')|escape:'html':'UTF-8'}" alt="{if !empty($product.legend)}{$product.legend|escape:'html':'UTF-8'}{else}{$product.name|escape:'html':'UTF-8'}{/if}" title="{if !empty($product.legend)}{$product.legend|escape:'html':'UTF-8'}{else}{$product.name|escape:'html':'UTF-8'}{/if}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} itemprop="image" />
</a>

replace it with:

<a class="product_img_link" href="{$product.link|escape:'html':'UTF-8'}" title="{$product.name|escape:'html':'UTF-8'}" itemprop="url">
     <img class="replace-2x img-responsive" src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')|escape:'html':'UTF-8'}" alt="{if !empty($product.legend)}{$product.legend|escape:'html':'UTF-8'}{else}{$product.name|escape:'html':'UTF-8'}{/if}" title="{if !empty($product.legend)}{$product.legend|escape:'html':'UTF-8'}{else}{$product.name|escape:'html':'UTF-8'}{/if}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} itemprop="image" />
</a>
<div style="position:absolute; top:0px; right:0px;">{hook h='MyRibbon' product=$product}</div>

 

As you can see  added there shortcode {hook h='MyRibbon' product=$product}. This is shortcode that will be responsible for appearance of contents attached to hook named "MyRibbon". If you created different hook, go back to your block edit page and grab suggested code (you can find it at the top of the block edit page: see screenshot). Save file and go back to your category page to see list of products with new awesome ribbon

 

Step by step videguide

author milos myszczuk
Article by Milosz Myszczuk PrestaShop expert, official PrestaShop community moderator. PHP developer, specialist in relative and spatial databases management, GIS Analyst, CEO & founder of VEKIA interactive agency. Read more about VEKIA company
If you like my articles and want much more valuable tips, feel free to send me donation
1.4 version 1.4.11 1.6 404 addon admin advertise ahref ajax alpha animation api app application authentication back office backup badge banner basics block bootstrap button cache carrier cart catalog category certificate changelog chat class clear client clip cms code colors columns comments configuration contact container content controller cookie counter country coupon css csv currency customer dashboard database debug default delete delivery desktop developer device disable discount displayNav displayTop download dynamic editor effect empty encrypt engine error exchange exclude export facebook faceshop fade fancoupon fancybox fanpage fatal feature feed field file fix fixed font footer free friendly url front ftp full gallery generate gift global godaddy google google+ gray grid groupon header help hide highlight homefeatured homepage hook hosting hover howto htaccess html html5 ID image import include input instagram installation integration iPhone issue javascript jquery kgb knowhow languages law left likebox link list livingsocial loading log login logo loyality mail mailing maintenance manufacturer marketing marquee mcrypt menu meta mobile modification module movie moving multilanguage multiupload must have mysql news newsletter notification number open graph order override page password performance PHP phpmyadmin picture pinterest plugin popup post prestashop prestashop 1.0 prestashop 1.1 prestashop 1.2 prestashop 1.3 prestashop 1.4 prestashop 1.5 price rules problem product profile promotion proslider purifier quantity query quick tip random rates register reinsurance release reporting reset responsive restore results ribbon rich text right sales search security seo service shadow share shipping shop shopmania slider smarty social networks SQL SSL statistics stock store style subcategory superuser support switcher tab tablet tag tax template text theme tinyMCE tips and tricks tpl tracking translations tree trends trigger tumblr tutorial twitter update upgrade upload variables video visits voucher vulnerability web2print wide widget width window wishlist wysiwyg youtube zip zopim