PAYG Website Design services. Cancel anytime. See Plans

Shopify Tips

How to display tagged articles on your Shopify product page with Liquid

← Blog

iPad screen displaying lists of articles under their corresponding tags.

Shopify doesn’t allow you to filter blog articles by tag, so there’s no default way to have these show up on product-related pages automatically. But here’s a simple method I use to display tagged articles on non-blog-related pages.

Why would you want to show articles?

There are many scenarios when you might want to display articles on your product details pages. For example, you may have written reviews for items you sell and want to show them alongside the product. You could take this one step further and display reviews for similar alternatives the customer may be interested in. By tagging articles appropriately, you can open up all sorts of possibilities and have articles displayed wherever you need them.

This code works even if multiple tags are assigned to each of your blog articles. You can display any content from your post, including featured images. Place the code in your product page template/section, wherever you would like them to appear. And, you will need to apply your own HTML and styles so they fit in with your store’s design.

{% comment %}
Shopify limits the articles to 50 by default, so to get
around this, we’ll use pagination to set a preferred limit.
The reason for this is so we can check the tags for as many
articles as possible.

Enter the handle of your blog in the square brackets below.
{% endcomment %}

{% paginate blogs[‘news’].articles by 1000 %}
    {% comment %}
    The following two variables are used to limit the number 
    of articles displayed on the page.
    {% endcomment %}
    {% assign posts_to_show = 3 %}
    {% assign post_count = 0 %}
    {% comment %}
    This is the tag we are looking for in the article loop below.
    We lowercase all tags to remove any casing issues.
    {% endcomment %}
    {% assign tag = "Web Design" | downcase %}
    {% for post in blogs[settings.main_blog].articles %}
      {% assign lowercase_tags = post.tags | join: "," | downcase | split: "," %}
      {% if lowercase_tags contains tag %}
        {% assign post_count = post_count | plus: 1 %}
          <a href="{{ post.url }}">{{ post.title }}</a>
        {% comment %}
        Break the loop if we’ve got 3 articles now.
        {% endcomment %}
        {% if post_count == posts_to_show %}
          {% break %}
        {% endif %}
      {% endif %}
    {% endfor %}

{% endpaginate %}

If you like tips like these, subscribe to my email newsletter below.

Subscribe to my newsletter

Sign up to get my latest blog articles direct to your inbox.

%d bloggers like this: