How to display product tags ?

Reigo
Shopify Partner
58 0 2

how can i display product tags on each product page ? like in skreened for example : http://skreened.com/ilovenetflix/netflix-spirit-animal

Replies 12 (12)
Reigo
Shopify Partner
58 0 2

the tags must be clickable also 

John_Nguyen2
Shopify Partner
31 0 2

hi Reigo,

you can do like this by edit your tempalates\product.liquid file and put codes below your description:

<p class="tags-list">
  {% for tag in product.tags %}
  <a href="/collections/all/{{ tag | handleize }}">
    <span clsas="el-icon-tag">{{ tag }}</span>
  </a>
  {% endfor %}
</p>

 

Technical supporter of Secomapp ♥ www.secomapp.com
Reigo
Shopify Partner
58 0 2

thanks!

 

is there any way to add # before each tag ?

and how can i change the tags position?

 

John_Nguyen2
Shopify Partner
31 0 2

Yes, can, sorry I had mistake while copy&paste, change the code:

<a href="/collections/all/{{ tag | handleize }}"> 
 <span clsas="el-icon-tag">{{ tag }}</span> 
</a>

to:

<a href="/collections/all/{{ tag | handleize }}"> 
<span class="tag">
  <span class="el-icon-tag"></span>{{ tag }}
</span> 
</a>

 

Technical supporter of Secomapp ♥ www.secomapp.com
Reigo
Shopify Partner
58 0 2

still doesnt show the # before each tag..

John_Nguyen2
Shopify Partner
31 0 2

did you defined "el-icon-tag" in your css file?

see more at here:
http://www.w3schools.com/cssref/sel_before.asp
http://www.w3schools.com/css/css_pseudo_elements.asp

Technical supporter of Secomapp ♥ www.secomapp.com
Reigo
Shopify Partner
58 0 2

so i will create a new css file named "el-icon-tag.css" ?

 

and whats the example css inside this file? for # before tag ?

John_Nguyen2
Shopify Partner
31 0 2

I just check your site: shirtoopia.com, what you need to put those codes at the end of file: assets\style.scss.css.liquid (rename style.scss.css to style.scss.css.liquid if need):

p {
display: block;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;  
}
p.tags-list .tag {
    background-color: #ededed;
    border-radius: 1px;
    color: #999;
    display: inline-block;
    margin-bottom: 5px;
    margin-right: 10px;
    padding: 5px;
}
p.tags-list .tag span {
    padding-right: 3px;
}
.el-icon-tag::before {
  content: url({{ 'tag.png' | asset_url }});
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;  
}

upload your tag.png file to assets folder of your themes. 
(can down load add here: http://cdn.shopify.com/s/files/1/0521/9121/t/20/assets/tag.png)

Technical supporter of Secomapp ♥ www.secomapp.com
Reigo
Shopify Partner
58 0 2

omg thank you so much, i love you! :D