The example Shopify blog includes multi-page articles with the first of each tagged premiere. Here is an easy way to append a second tag.
Publish Insights 15 October 2022
Appending Tags to Filter Articles
It’s great that Shopify allows you to group products into different collections. For articles, you can create multiple blogs. But what if you want to display collections of articles within one blog? It’s doable, with a couple of caveats.
Filtering by multiple tags is possible on Shopify blogs. 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/premiere+drama
That’s fine for manually changing the URL within the browser address bar. But you want on-page clickable options for the ease of the site visitor.
After playing around with several solutions, I arrived at one that works well for one of the blogs hosted here, with no additional javascript required. ClinicalNovellas.com includes multi-episode miniseries.
Genres are subcategories like mystery, drama, sci-fi, or thriller. When filtering on any one of these tags, the user sees all episodes. However, readers should begin at the first episode, which is tagged premiere.
Liquid Programming
If you hunt around, other solutions require two drop-down menus or rows of clickable lists. The method explained here uses one list with a primary key_tag—in this case called premiere. Clicking another tag from the same list appends it to the key_tag.
Clicking all disables the additional tags. Of course for your purposes, the word premiere may be inappropriate, especially if you have multiple blogs. Where’s a good place to edit the key_tag without opening up the Liquid code? How about a metafield. Click settings, then metafields to add a single-line text option called Key Tag for Blogs. Save that and click Online Store > Blog posts. There you can include the word premiere or whatever other key tag you desire.
The sample page has been modified to include more than two tags when there are more than 3 results. A subsequent article will discuss this technique. Try it out to see how intuitive it is. If you have similar goals, you can modify the code below. Each Shopify theme uses different classes. So in this example the classes have numeric placeholders.
{%- comment -%} // append tags - replace number classes as appropriate // {%- endcomment -%}
{%- if blog.all_tags.size > 0 -%}
{%- assign key_tag = blog.metafields.custom.key_tag -%}
<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 %}">{{ 'all' }}</a>
</li>
{%- for tag in blog.tags -%}
{%- unless current_tags contains tag -%}
<li class="style_3">
<a href="{{ blog.url }}{{ '/tagged/' }}{{ key_tag }}{% if current_tags contains key_tag %}{% unless tag == key_tag %}{{ tag | handleize | prepend: '+' }}{% endunless %}{% else %}{{ tag | handleize }}{% endif %}" class="style_4{% unless tag == key_tag %}{{ ' style_4'}}{% endunless %}{% if current_tags contains tag %}{{ ' is-active' }}{% endif %}">{{ tag }}</a>
</li>
{%- endunless -%}
{%- endfor -%}
</ul>
</div>
{%- endif -%}
The above code should be placed within the blog-template under the Sections area (or beneath Templates in older themes).
Taking usability a step further, when a premiere has multiple episodes, there’s a link below the article excerpt. That link opens all episodes, which are articles with tags matching the title (minus the episode number).
What are the caveats? First, clicking Next or Previous links on article pages will display the unfiltered sequential article. Second, you should integrate the two-tag approach within your navigation and breadcrumb links for a consistent user experience.
Avoid Multiple Blog Tag Problems
For the best experience, choose a good primary tag and limit the number of additional tags. With premiere as the key_tag, be sure to modify all links within your site to append this tag (or include a 302 redirect). To make selections intuitive, the code prevents the selection of multiple genres, since they may conflict, displaying no results.
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.
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 />).
