Horizon Theme Blog: Add a Tag Filter and Search, Step by Step

Set up a Horizon theme blog with tag filters and search that update without a page reload, using a Liquid block or an app.

Marti BeleguSenior Developer · Founder of Filter My BlogPublished October 30, 2026Updated October 30, 20266 min read

On a Horizon theme blog, you can add a tag filter inside the Blog posts section, directly above the article grid. That's the big difference from Dawn. Because the filter sits in the same section as the articles, tag clicks, multi-tag selections and search results can update the grid without a page reload, while the URL still changes so links and the back button work.

This guide shows how to set that up on Horizon, two ways: a free Custom Liquid block, and Filter My Blog for filtering and search that update in place. If you're on Dawn, the Dawn guide is the one you want.

How Horizon's blog page is built

Horizon is Shopify's newer theme, and several other Shopify themes are built on the same foundation. Its blog code is quite different from Dawn's, and three details matter for filtering:

• The Blog posts section accepts blocks. Both theme blocks (text, images, Custom Liquid and more) and app blocks can go inside it.
• Blocks render above the article grid. In Horizon's code, {% content_for 'blocks' %} comes right before the blog-posts-container that holds the cards. So anything you add sits between the section's top and the first article.
• The grid is positional. Horizon styles each card by its position: the first card is a wide "hero", the next two are medium, the rest are compact. The exact pattern depends on how many articles are on the page.

Like Dawn, Horizon doesn't print tags on the blog page or on articles by default. The tag pages at /blogs/<blog>/tagged/<tag> exist and render the matching articles in the same grid.

Method 1: A Custom Liquid block (free)

Because the section accepts theme blocks, you can put a tag list inside it on Horizon. On Dawn it has to be a separate section.

1. Go to Online Store → Themes → Customize.
2. Use the page selector to open Blogs → Default blog.
3. In the sidebar, expand the Blog posts section and click Add block.
4. Choose Custom Liquid, and drag it to the top of the section's blocks.
5. Paste this into the Liquid box, then Save:

{%- if blog.all_tags.size > 0 -%}
  <nav class="horizon-tags" aria-label="Filter articles by tag">
    <a href="{{ blog.url }}" {% if current_tags == blank %}aria-current="page"{% endif %}>All</a>
    {%- for tag in blog.all_tags -%}
      <a
        href="{{ blog.url }}/tagged/{{ tag | handleize }}"
        {% if current_tags contains tag %}aria-current="page"{% endif %}
      >{{ tag }}</a>
    {%- endfor -%}
  </nav>
{%- endif -%}

<style>
  .horizon-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-block-end: 24px; }
  .horizon-tags a {
    padding: 6px 14px; border: 1px solid currentColor; border-radius: 999px;
    text-decoration: none; color: inherit; opacity: .75; font-size: 14px;
  }
  .horizon-tags a:hover { opacity: 1; }
  .horizon-tags a[aria-current="page"] { opacity: 1; font-weight: 600; box-shadow: inset 0 0 0 1px currentColor; }
</style>

The styles use currentColor and inherit, so the pills take on the text colour of whichever colour scheme the section uses.

This is a set of plain links. A tag click loads the tag's page, just as it would on Dawn. Being inside the section makes it possible to filter without a reload, but it takes a script to do it, and that's what the app below adds.

Method 2: Filter My Blog, inside the blog section

1. Install Filter My Blog. It asks only for read-only access to your blog content, then reads every article and counts each tag.
2. Pick a style on the Design page: one of eight presets, then colours, corners, spacing and fonts.
3. Click "Add to your theme" and choose "Add inside the blog section". Shopify opens the theme editor with the "Blog tag filter" block placed inside Horizon's Blog posts section.
4. Save.

That's it. There's no separate section to drag around, because the block is already in place above the grid. The full guide is in Add the filter to your theme.

What updates in place on Horizon

With the block inside the section, the app's script can re-render the article grid using Shopify's Section Rendering API instead of loading a new page. Here's what that gives you.

Tag filtering

A reader clicks "Recipes". The script fetches the /tagged/recipes version of the section and swaps in the new cards. The address bar changes to the tag URL, so the page can be shared and the back button returns to the previous view. Each pill is still a real link, so if JavaScript is off or a script is blocked, the click simply loads the tag page. See how filtering works.

Multi-select (Plus)

With multi-select on, readers can pick several tags and the grid narrows to articles carrying all of them. Shopify only combines tags with AND, so "Recipes" plus "Vegan" means vegan recipes, not everything in either.

Some combinations match nothing. Horizon renders an empty grid for those, which looks like a broken page, so the filter shows a short message instead ("No articles carry all of the selected tags." by default, and you can reword it). If a theme prints its own empty message, the app leaves that one alone rather than showing two.

Blog search (Plus) and search as you type (Pro)

Shopify has no URL that searches inside one blog, so there's no section version for the script to fetch. Instead, the app collects Horizon's own article cards for the blog and puts the matching ones into the grid.

Because Horizon styles cards by position, results keep the layout: the first result gets the hero slot, the next two the medium slots, and so on. A search looks like a page of your blog, not a separate results list. Clear the search and the original page comes back.

On Plus, results appear when the reader presses Enter. On Pro, they update as the reader types. The search checks titles, tags and excerpts, with title matches first. See blog search, or the wider Shopify Blog Search guide for the free options too.

What you can see afterwards (Pro)

Pro adds tag analytics, which show clicks, impressions and click rate for each tag, and search analytics, including the searches that found nothing. Those zero-result searches are a list of posts your readers want and you haven't written. Clicks are recorded on every plan from day one, so the history is there when you upgrade.

Horizon vs Dawn at a glance

Both are fully usable. Horizon simply feels faster because nothing reloads. The plans comparison shows which features are on which plan.

Is your theme "Horizon-like"?

The name doesn't matter. What matters is whether your blog section accepts app blocks. To check:

1. Open your blog template in the theme editor.
2. Click Add block inside the section that shows your articles.
3. If Apps appears in the list, the filter can go inside it.

If it doesn't, use the app's Add as its own section option, which works on every theme. Developers who control their theme's code can also mark the article grid and its pagination so the filter recognises them. Theme compatibility has the details.

Troubleshooting on Horizon

"There is a problem with the app block" when adding inline. The blog template you opened isn't a Horizon-style one. This happens if a blog uses an older custom template. Check which template the blog uses under Blog posts → Manage blogs, or add the filter as its own section.

Tags appear twice. You've added both a Custom Liquid tag list and the app block. Remove one.

Counts look a day behind. Article counts come from a nightly scan, not a live count. Click Refresh tags in the app after publishing a batch of posts.

For every other way to filter a Shopify blog, see How to Filter Shopify Blog Posts by Tag.