How to add tags (with link) to product page?

Today i want to show you how to display product tags on product page in your store based on PrestaShop engine. I will show how to achieve this in PrestaShop in version 1.5.x. I will use really simple method so each merchant can do this without any special knowledge about php. The most important thing in this case is fact, that I will only modify template file - which mean that you can achieve this without core modification!

If you are not familiar with theme modifications, feel free to check two modules that are related to tags on product pages 

Product page icons (click to open module page)	Show tags on product pages (click to open module page)

What I mean by tags on product page?

picture below shows blue labels with product tags.

You can define own tags for each product on product edit page in back office

First step: open the product.tpl file

As i said this tutorial will show you in the simplest way how to display product tags on product page without prestashop core modyfications. Go to your theme directory and open product.tpl file. This file is a smarty template document, where is defined the design of the each product page. You can find there html language with smarty code. 

right after the

<div id="primary_block" class="clearfix">

add the code:

<ul class="producttags">
    {foreach from=Tag::getProductTags(Tools::getValue('id_product')) key=k item=v}
        {foreach from=$v item=value}
            <li><a href="{$link->getPageLink('search', true, NULL, "tag={$value|urlencode}")}">{$value|escape:html:'UTF-8'}</a></li>
        {/foreach}
    {/foreach}
</ul>

Code above add to your product page <ul> list with <li> elements. In each <li> element will appear link to the tag search page. As you see, there are two {foreach} loops. This is most important thing in this code. Okay, so I included the list with tags, now I will show how to create styles to display tag as a blue label.

CSS styles for tags list

In this case you have to add css code that i pasted below to the global.css file located in your theme directory. Just open this file and prepend code:

.producttags {
	list-style:none;
    position:relative;
    clear:both;
    display:block;
    padding-bottom:20px;
    margin-bottom:20px;
}

.producttags li, .producttags a{
	float:left;
	height:24px;
	line-height:24px;
	position:relative;
	font-size:11px;
	}

.producttags a{
	margin-left:20px;
	padding:0 10px 0 12px;
	background:#0089e0;
	color:#fff;
	text-decoration:none;
	-moz-border-radius-bottomright:4px;
	-webkit-border-bottom-right-radius:4px;	
	border-bottom-right-radius:4px;
	-moz-border-radius-topright:4px;
	-webkit-border-top-right-radius:4px;	
	border-top-right-radius:4px;	
} 
.producttags a:visited{
    color:#fff;
}

.producttags a:before{
	content:"";
	float:left;
	position:absolute;
	top:0;
	left:-12px;
	width:0;
	height:0;
	border-color:transparent #0089e0 transparent transparent;
	border-style:solid;
	border-width:12px 12px 12px 0;		
}

.producttags a:after{
	content:"";
	position:absolute;
	top:10px;
	left:0;
	float:left;
	width:4px;
	height:4px;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	border-radius:2px;
	background:#fff;
	-moz-box-shadow:-1px -1px 2px #004977;
	-webkit-box-shadow:-1px -1px 2px #004977;
	box-shadow:-1px -1px 2px #004977;
}

.producttags a:hover{background:#555; text-decoration:none;}	

.producttags a:hover:before{border-color:transparent #555 transparent transparent;}

Save changes and refresh your product page. The nice looking tag labels should appear. That's all! If you've got any questions related to the tags on product page - feel free to ask in the comments feature below.