Shopify Tips: Add tag links to blog posts

A guide to displaying the list of tags associated with a blog post, linking through to other blog posts which also share that tag.

Introduction

Shopify includes blogging features, but they're quite limited and what is available to you will also depend on the design theme you have chosen to use with your store.

The popular Dawn theme doesn't include tag links on blog posts so I decided to add that in. This guide will take you through the simple process of doing the same, regardless of what theme you are using.

Where to put the code

You have two choices for where to copy and paste the code to get tag links displaying on your blog posts. You can either put it directly in the theme code itself, using the "Edit code" facility, or if it's available to you just add a new "Section" to your blog post template via the "Customize" button - choosing the section called "Custom Liquid".

See the screenshot below for trying out the "Customize" route:
(Go to Online Store -> Customize button. Choose your blog post template page from the drop down list, top center of the page, then "Add section" where you want the links to appear. Choose "Custom liquid" and copy and paste the code into the box.)

For editing the theme code directly instead, go to Online Store -> Themes -> [three dots button] -> Edit code. In the Sections area / folder open the file named:

main-article.liquid

(Note: I am using the Shopify Dawn theme, if you are using a different theme then the file name might be different - scroll through and see what name makes sense for where your blog posts / articles might be).

Find this line of code in the main-article.liquid file:

{{ article.content }}

It displays your main blog post content. We'll add the list of tag links immediately after the main blog content, so paste the new code starting at a new line immediately following that.

Tags code (text only version)

The following code will display a simple list of text links to tags, including the number of blog posts which use that tag in brackets i.e. "Tag (number) Tag (number)". If you also want to display a relevant icon (I use a tag icon in front of each tag link) then read on afterwards for how to add icons to your links.

{% for tag in article.tags -%}
  <span style="padding-right:15px;">
  <a href="{{ blog.url }}/tagged/{{ tag | replace: ' ', '-' | url_encode }}">{{ tag }} ({{ tag.total_count }})</a>
  </span>
{%- endfor %}

Optional extra: adding icons to your links

I decided to display a tag icon with each tag link - making it more obvious what the links are and also just breaking them up a bit visually.

To achieve this, firstly you need to create a new file to house your icon.

Go to Online Store -> Themes -> [three dots button] -> Edit code. In the "Snippets" area / folder choose "+ Add a new snippet":

Give your new snippet the filename:

icon-tag.liquid

(Note that you will probably just name it 'icon-tag' and Shopify will add the '.liquid' itself. If you already have a file of that name then choose another sensible name and make sure you refer to this different filename later.)

Then copy and paste the following HTML code into the file, so that this is the only contents of the file:

<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24">
  <path d="M9.776 2l11.395 11.395-7.78 7.777-11.391-11.391v-7.781h7.776zm.829-2h-10.605v10.609l13.391 13.391 10.609-10.604-13.395-13.396zm-3.191 7.414c-.781.782-2.046.782-2.829.001-.781-.783-.781-2.048 0-2.829.782-.782 2.048-.781 2.829-.001.782.783.781 2.047 0 2.829z"/>  
</svg>

Save the file.

Note: If you want to choose from a selection of icons see my blog post on icons.

Note: Edit width="14" and height="14 as needed to get the icon the size you want.

Now your new icon is ready for use, we just need to add it to the tags code. To do that you need to return to where you added the tags code.

You need to add this new bit of code to get your icon displayed:

{%- render 'icon-tag' -%}

So, the whole code in total now becomes this (it's probably easier to just overwrite the text-only version of the code from earlier with this new code, than me trying to explain where to insert the new bit!)

{% for tag in article.tags -%}
  <span style="padding-right:15px;">
  {%- render 'icon-tag' -%}&nbsp;<a href="{{ blog.url }}/tagged/{{ tag | replace: ' ', '-' | url_encode }}">{{ tag }} ({{ tag.total_count }})</a>
  </span>
{%- endfor %}

Save your change.

(Note: So that the icon is not too close to the tag wording following it I have added   - it stands for non-breaking space and can be safely removed or extra ones added as you like.)

Found this useful?

If this guide has helped you please leave a comment to let me know :) If it's really helped you, or you're just feeling generous, please consider buying me a coffee via Ko-Fi as a thank you - or buy an item from this website.

If you want to suggest other things you'd like me to write a Shopify guide about please let me know!