> Note:
> You should consider using [storefront filtering](/docs/storefronts/themes/navigation-search/filtering/storefront-filtering) instead of filtering by tag. Storefront filtering gives merchants the ability to easily create filters based on existing product data, rather than manually building out a tag system. Storefront filtering can also apply to search results, in addition to collections.

You can use [product tags](/docs/api/liquid/objects/product#product-tags) to filter a collection into smaller subsets of products.

## How tag filtering works

Tag filters are applied by appending `/[tag-handle]` to the collection URL, where `[tag-handle]` is the [handleized](/docs/api/liquid/filters/handleize) version of the desired product tag.

For example, if you only wanted to show products from the `frontpage` collection that are tagged with `new`, then you could use the following URL structure:

```text
{shop}.myshopify.com/collections/frontpage/new
```

You can also filter by multiple tags by combining the handleized tags with a `+`:

```text
{shop}.myshopify.com/collections/frontpage/new+sale
```

Tag filtering uses the AND operator, so only products that have both `new` and `sale` are shown. If no products in the `frontpage` collection have both tags, then customers will see a page with no results.

### Redirecting unused product tags

If a tag in the URL isn't used on any of the store's products, then Shopify redirects to a collection URL with the tag removed.  For example, if the tag `summer-sale` is removed from all your products because a limited-time promotion is over, then any customer that goes to `{shop}.myshopify.com/collections/frontpage/summer-sale` will be redirected to `{shop}.myshopify.com/collections/frontpage`.

When multiple tag handles are in the collection URL, only the tags not applicable to any products in the store are removed and the rest are kept in the redirect URL.

This behavior supports displaying products when customers follow links to collections with outdated filters, or mistype a tag handle when manually entering a collection URL.

## Implementing tag filtering

The tag filter display should be included in the [`collection` template](/docs/storefronts/themes/architecture/templates/collection), or through a section that's included in the `collection` template.

To implement tag filtering in your Liquid template, loop through all of the product tags in the collection using the [`all_tags` object](/docs/api/liquid/objects/collection#collection-all_tags) of the `collection` object. For each tag, you can check for its presence in the [`current_tags` object](/docs/api/liquid/objects/current_tags), and then output a link to add or remove it accordingly with the following [URL tag filters](/docs/api/liquid/filters/tag-filters):

- `link_to_add_tag`
- `link_to_remove_tag`

### Example

<p>
<div class="react-code-block" data-preset="file">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar "></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>

</div>
</div>

<script data-option="filename" data-value="Example tag filtering"></script>

<script type="text/plain" data-language="liquid">
RAW_MD_CONTENT
{% if collection.all_tags.size > 0 %}
  <ul class="tag-filters">
    {% for tag in collection.all_tags %}
      {% if current_tags contains tag %}
        <li class="tag-filters__item active">{{ tag | link_to_remove_tag: tag }}</li>
      {% else %}
        <li class="tag-filters__item">{{ tag | link_to_add_tag: tag }}</li>
      {% endif %}
    {% endfor %}
  </ul>
{% endif %}

END_RAW_MD_CONTENT</script>

</div>
</p>