Filter My Blog logoFilter My Blog

How to Show Tags on Shopify Blog Posts (Copy-and-Paste Liquid)

Show tags on Shopify blog posts as clickable links, on the article page and on blog cards, with snippets for Dawn and Horizon.

Photo of Marti BeleguSenior Developer · Founder of Filter My BlogPublished Updated 5 min read

To show tags on Shopify blog posts, loop over article.tags in your article template and link each tag to {{ blog.url }}/tagged/{{ tag | handleize }}. On Dawn and Horizon you don't need to edit theme files: add a Custom Liquid section (Dawn) or block (Horizon) to the article template in the theme editor and paste the snippet below.

Tags on the post itself matter more than they look. Most readers arrive on an article from search, not from your blog page. A row of topic links under the title is their only route to "more like this".

This guide covers the article page, the cards on your blog page, hiding internal tags, and styling. For background on how tags work, see Shopify Blog Tags: The Complete Guide.

Check your theme first

Some paid themes have a "Show tags" checkbox on the article section. Open Online Store → Themes → Customize, switch to Blogs → Default article, click the blog post section and look through its settings. If there's a tags option, turn it on and you're done.

Dawn and Horizon don't have one. I checked the current code of both: neither prints article.tags on the article page or on the blog's article cards.

The snippet for the article page

{%- if article.tags.size > 0 -%}
  <nav class="post-tags page-width" aria-label="Article tags">
    <span class="post-tags__label">Topics:</span>
    {%- for tag in article.tags -%}
      <a href="{{ blog.url }}/tagged/{{ tag | handleize }}">{{ tag }}</a>
    {%- endfor -%}
  </nav>
{%- endif -%}

<style>
  .post-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-block: 16px; }
  .post-tags__label { font-size: 14px; opacity: .7; }
  .post-tags a {
    padding: 4px 12px; border: 1px solid currentColor; border-radius: 999px;
    font-size: 14px; text-decoration: none; color: inherit; opacity: .8;
  }
  .post-tags a:hover { opacity: 1; }
</style>

What it does:

  • article.tags holds the tags on this one article, in the order Shopify stores them.
  • blog.url is the URL of the blog the article belongs to, so the links point to the right blog even if you have several.
  • handleize turns "Brew Guides" into brew-guides, the form Shopify uses in tag URLs. Never type handles by hand.
  • aria-label names the group for screen readers, so it isn't announced as just a list of links.
  • The styles use currentColor, so the pills follow your theme's text colour in any colour scheme.

Adding it on Dawn

  1. In the theme editor, open Blogs → Default article.
  2. Under Template, click Add section and choose Custom Liquid.
  3. Drag it to just below Blog post (or above, if you want tags near the title).
  4. Paste the snippet and Save.

Dawn's article section accepts app blocks but not Custom Liquid blocks, so a section next to it is the way in. page-width is Dawn's container class and lines the tags up with the article.

Adding it on Horizon

  1. In the theme editor, open Blogs → Default article.
  2. Expand the blog post section and click Add block.
  3. Choose Custom Liquid and drag it under the title or under the content.
  4. Paste the snippet, remove page-width from the class (the block is already inside the section's layout), and Save.

Horizon's blog post section accepts theme blocks, so the tags can sit inside the article, right where you want them.

Hide tags readers shouldn't see

Tags like featured, homepage or newsletter-oct are useful for your theme or your team, but they make odd links. Skip them in the loop:

{%- assign hidden_tags = 'featured,homepage' | split: ',' -%}
{%- for tag in article.tags -%}
  {%- unless hidden_tags contains tag -%}
    <a href="{{ blog.url }}/tagged/{{ tag | handleize }}">{{ tag }}</a>
  {%- endunless -%}
{%- endfor -%}

The check is case-sensitive, so write each tag exactly as it appears in the admin.

If you only want to show your main topics and nothing else, flip it round and list the tags to show with if instead of unless. That's the safer choice when your team adds tags freely.

Tags on the blog page cards

Showing tags on each card in the blog listing needs a theme code edit, because the card markup lives in a theme file, not in a setting. Duplicate your theme first (Themes → … → Duplicate) and make the change on the copy.

  • On Dawn, the card is snippets/article-card.liquid.
  • On Horizon, it's blocks/_blog-post-card.liquid.

Add this where you want the tags to appear in the card, for example after the excerpt:

{%- if blog and article.tags.size > 0 -%}
  <p class="card-tags">
    {%- for tag in article.tags limit: 3 -%}
      <a href="{{ blog.url }}/tagged/{{ tag | handleize }}">{{ tag }}</a>{% unless forloop.last %}, {% endunless %}
    {%- endfor -%}
  </p>
{%- endif -%}

Two details:

  • if blog keeps the code from running where there's no current blog, such as a featured-blog section on your home page, where the links would be wrong.
  • limit: 3 keeps cards tidy. A card with seven tags is noise.

There's one catch with cards. In many themes, the whole card is a single link to the article. A link inside a link isn't valid HTML, and browsers handle it unpredictably. Put the tags outside the card's main <a> element. If the theme makes the whole card clickable with an overlay, the tags may need position: relative; z-index: 1 to be clickable.

Because of this, and because theme updates replace edited files, tags on cards are often more trouble than they're worth. A tag filter bar above the cards gives readers the same choice with less clutter.

Tags on posts vs a filter bar on the blog page

They do different jobs:

  • Tags on the post help a reader who's already reading one article find related ones.
  • A filter bar on the blog page lets a reader who's browsing pick a topic before choosing an article.

Most blogs benefit from both. How to Filter Shopify Blog Posts by Tag has a free snippet for the blog page. If you'd rather not maintain code there, Filter My Blog adds a styled tag bar to your blog page. The app works on the blog listing page, not on individual articles, so use the snippet above for the post itself. The app also lets you hide and rename tags for display without editing articles. See showing, hiding and renaming tags.

If you're setting it up on a specific theme, there are step-by-step guides for Dawn and Horizon. The pricing page compares the plans.

Troubleshooting

The tags don't appear. The article has no tags, or the section was added to a different template. Check the article in the admin, and in the theme editor confirm you're on the article template your blog actually uses.

The links go back to the main blog page. The tag in the URL doesn't match any article in that blog. This happens if you typed the handle by hand. Use handleize.

A tag shows on the post but its page is empty. That shouldn't happen with a single tag. If you linked a combination like tagged/a+b, no article carries both.

The tags look unstyled. Some themes reset link styles inside sections. Make the selectors more specific, for example .post-tags a.post-tags__link, and add that class to each link.

Frequently asked questions

How do I display tags on a Shopify blog post?

Loop over article.tags in Liquid and link each one to the blog's tag page. On Dawn and Horizon you can do this without editing theme files: add a Custom Liquid section or block to the article template in the theme editor and paste the snippet.

Why aren't my Shopify blog post tags showing?

Most themes, including Dawn and Horizon, don't print article tags at all. The tags are saved on the article, but the theme has to output them. Check your article section's settings for a tags option first, then add a Liquid snippet if there isn't one.

How do I hide some tags on Shopify blog posts?

Skip them in the loop. Put the tags to hide in a comma-separated list, split it into an array, and wrap each link in an unless block that checks whether the list contains the tag.

Do tag links on blog posts help SEO?

They help readers and search engines find your tag pages, which can work as topic pages. Keep it useful: link only to tags that cover several posts, and hide internal tags like featured or homepage.

Loading search index
↑ ↓ to navigate↵ to selectEsc to close