Multiple Tags For Shopify Blog

Shopify blogging is incredibly versatile because site owners have access to underlying code. Here’s a way to make multiple filter selections easy.

Publish Insights 25 February 2023

Include Easily Clickable Multiple Keywords

If you only have a few articles, drilling down to a specific list with multiple tags is less than a concern. It’s useless. A couple of tags will easily return a page-not-found error message. After accumulating several hundred articles, you need to find a way for blog visitors find what they desire.

I posted a prior article with a clever way of creating collections of blog articles within Shopify. The fact is, I have several tag filters for blogs within the blog template. They switch out automatically based on variable conditions.

The basic formula for filtering by multiple blog tags is simple. Append the blog.url with {{'/tagged/'}} followed by the first handleized tag. Append an additional tag with {{tag | handleize | prepend: '+'}}. Below is an example:

website.myshopify.com/blogs/blog-name/tagged/nutrition+food

Shopify includes Liquid URL filters for doing this. But link_to_tag and link_to_add_tag do not offer conditional logic based on a default tag selection, number of tags, or number of blog articles.

{% for tag in collection.tags %}
 {{ tag | link_to_add_tag: tag }}
{% endfor %}

With the current site theme settings, a dozen articles appear on a blog page. I set up a condition that allows appending additionally clicked when the blog.articles_count is greater than 3. (A full page of results.)

Here’s the beauty. Each tag clicked is appended to the prior, unless reaching the threshold. Then a click replaces the current query. Conceivably, with thousands of records, you can append 3, 4, or more tags. With many tags, I only include them at the bottom of the first page. When clicking the same tag multiple times, it only gets one inclusion.

Liquid Programming

Click Online Store > Blog posts. Modify the code below. Each Shopify theme uses different classes. So in this example, the classes have numeric placeholders. Items within the code reading replacement (or verification) have been colored red.

{% comment %} // only tags within visible articles // {% endcomment %}
{%- capture responsive_tags -%}
 <div class="style_1">
  <ul class="style_2">
   <li class="style_3">
    <a href="{{ blog.url }}" class="style_4"{% if current_tags == blank %}{{ is_active }}{% endif %}">{{ 'blog.general.all_tag' | t }}</a>
   </li>
  {%- for tag in blog.tags limit: 24 -%}
   {% unless tag contains tag %}
    <li class="style_3">
     {% capture current_tag_list %}{% unless current_tags contains tag %}{{ blog.url }}{{ '/tagged/' }}{% if blog.articles_count > 3 %}{{ current_tags | join: '+' }}{% if current_tags == blank %}{{ tag | handleize }}{% else %}{{ tag | handleize | prepend: '+' }}{% endif %}{% else %}{{ tag | handleize }}{% endif %}{% endunless %}{% endcapture %}
     <a href="{{ current_tag_list | replace: ' ', '-' }}" class="style_4{% unless tag == current_tags %} style_5{% endunless %}{% if current_tags contains tag %} {{ is_active }}{% endif %}">{{ tag }}</a>
    </li>
   {% endunless %}
  {%- endfor -%}
  </ul>
 </div>
{%- endcapture -%}

Replace the numbered style_ tags in my code with the ones for your theme. Place the above code within the blog template under the Sections area (or beneath Templates in older themes). What are the caveats?

1. 1. Clicking Next or Previous links on article pages will display the unfiltered sequential article.
2. 2. Since the page refreshes, it’s best to have multiple tags appear at the top of the page. This prevents scrolling to the bottom after each selection.

Not really a caveat, but a workaround. When there are many tags, I might limit visible tags to 24. I also exclude currently selected tags.

Caution: Modifying Liquid code may invalidate your theme for future updates by the developer. Anything you add will require manual migration to a different theme, with possible incompatibility.

You may notice the addition of a hashtag. This is a debatable option. In quantity, the extra character lengthens tag lists. It might also interfere with legibility. (I apply CSS to lighten and shrink the hashtag.) On the other hand, it may more quickly communicate clickable tags. You can enable hashtags by creating a true or false metafield or include an option within the schema on the blog page, as I have done.

 {  "type": "checkbox",  "id": "hashtags",  "label": "Prepend tags with #",  "default": false },

Then assign a condition {% if section.settings.hashtags %}{% assign hashtag = '#' %}{% endif %}. Finally, prepend the visible tag like this {{ tag | prepend: hashtag }}. Then you can toggle the settings to enable it.

The code on this page includes hidden formatting characters that most of the time does not interfere with operation if copied from the web page. To verify, paste into a text editor and reveal invisibles before pasting into a Shopify theme. Replace non-breaking spaces ( ) with regular space and remove HTML line breaks (<br />).