How can I add multiple product filters in my online store?

Shopify Partner
8 0 1

Problem explanation:

I have a Shopify store and I want to add multiple filters for tags, my product tags look like this

product 1: Face shape diamond, frame size medium, frame shape aviator

product 2: Face shape heart, frame size small, frame shape square


And what I need is 3 filters (select box),

1st filter title: Face Shape
1st filter options: diamond, heart, square

2nd filter title: Frame size
2nd filter options: small, large, medium

3rd filter title: Frame Shape
3rd filter options: cat eye, aviator, square


Then when the user clicks on each one it filters the products accordingly

What's happening now is it filters only according to 1 tag, then when I add the second filter by tag it removes the first one & filters by the second tag

So for example, if I filter by face shape = diamond, the results are correctly showing, however, when I add the second filter by frame size = small, it shows the results of frame size = small disregarding the face shape


The code

My theme doesn't allow filters so I downloaded Search & Discovery application and added 1 filter for the tags but I cannot add more than 1 filter of any type on the application

I added 1 tag filter from the app and tried to make the other 2 filters manually like so


<details class="filter-group">
   //this is the filter title
    <summary class="filter-group-summary">
        <span>Frame Size</span>
        {% render 'armament-icon' with icon: 'arrow-right', classes: "w-10 custom-filter__right-icon" %}

   //this is checkboxes with all the tags values of the frame size
    <div class="filter-group-display">
        <ul class="filter-group-display__list">
        {% for tag in collection.all_tags %}
            {% if tag contains 'SIZE_' %}
                <li class="filter-group-display__list-item pb-2">
                <label for="Filter-{{ forloop.index }}">
                    // when the form is submitted, take this name and put it in the url

                    <input type="checkbox"
                        value="{{ tag }}"
                        id="Filter-{{ forloop.index }}"
                        {% if filter_value.count == 0 and == false -%}disabled{%- endif %}
                    {{ tag | remove: "SIZE_" }}
            {% endif %}
        {% endfor %}

 let collection_handle = '{{collection.handle}}';
 let custom_loader = document.querySelector('#custom_loader');
 let custom_checkbox = document.querySelectorAll('[data-armada-selector="custom_filter_checkbox"]');
 let custom_filter_form = document.querySelector('[data-armada-selector="custom_filter-form-container"]');
 let custom_active_filters = document.querySelector('[data-armada-selector="active-filters"]');

let queryString;

custom_checkbox.forEach(checkbox => 
      checkbox.addEventListener("change", (e) => {
        // take the form data & transform them into queryParam
        queryString = new URLSearchParams(new FormData(custom_filter_form)).toString();

        let fetch_url;
        if(window.location.href.includes("?sort") || window.location.href.includes("&sort")) 
          const querySortString =;
          const urlParams = new URLSearchParams(querySortString);
          const sort_by_value = urlParams.get('sort_by')

          fetch_url = '/collections/{{ collection.handle }}?' + queryString + "&sort_by="+sort_by_value
        else fetch_url = '/collections/{{ collection.handle }}?' + queryString;

          .then(response => response.text())
          .then(data => {
            let html_div = document.createElement('div');
            let active_filter_div = document.createElement('div');

            html_div.innerHTML = data;
            active_filter_div.innerHTML = data;

            let html_dom = html_div.querySelector('[data-armada-selector="collection-grid-main"]').innerHTML;
            let active_filter_html_dom = html_div.querySelector('[data-armada-selector="active-filters"]').innerHTML;

            // replace the document grid section with the grid from api response
            document.querySelector('[data-armada-selector="collection-grid-main"]').innerHTML = html_dom;
            document.querySelector('[data-armada-selector="active-filters"]').innerHTML = active_filter_html_dom;

            // update url without refreshing the page 
            history.replaceState(null, null, fetch_url);
          .catch(error => console.error('Error:', error))
          .finally(() => custom_loader.classList.add('hidden'));


URL structure in the browser



What I think the solution is

I think since having 2 inputs with the same name (filter.p.tag), the form is submitting only one of them and replacing the other but I have to have this name so the form takes the value & puts it in the URL as it should be & probably it's the URL structure what's wrong but I'm not finding the resource of how to filter products by multiple tags


What I tried

In Shopify documentation, they say to add a coma in between the 2 tags


But it's not working for me as well


Also I tried this url structure

But the result was no product found although of having multiple products with these 2 tags

I also tried these structures as suggested by ChatGPT

- ?filter[p][tag][]=FRAME+SHAPE_ROUND&filter[p][tag][]=SIZE_SMALL



But still no results

Replies 9 (9)

Shopify Partner
803 32 63

Seems like an interesting feature here.


Reading that doc link you sent, try writing your multiple product filter like this: filter.v.option.color=red&filter.v.option.size=L 


The snippet you wrote here: ?filter.p.tag=FRAME+SHAPE_ROUND,SIZE_SMALL , with the comma, I believe only applies to categories in the same realm (color, size). But since "shape" and "size" are two different categories, that may be why it did not work.


Let me know if the snippet I gave you was helpful. Thanks.

Shopify Partner
8 0 1

Hello Zqdo!


I appreciate your answer, now I tried this solution on tags filtering but it doesn't work unless we're filtering by only 1 tag, and no matter what I tried nothing seems to work and I believe it's not achievable to have multiple tags filtering in Shopify, I contacted Shopify's support and they mentioned that they're gonna add such feature.


Now what worked for me, is adding multiple metafields and filtering by metafiled using filter.p.m.custom.frame_shape=Aviator  for example. I added 2 metafields for products & kept 1 tag filtering, the only problem with metafields is that you cannot have more than 1 value per each product if you wanna build the filter with it on the contrary with tags you have this benefit

Shopify Partner
803 32 63

Do you think that this could be a good temporary solution for now?

Shopify Partner
8 0 1

Yes it's working on my website so far and I've seen many Shopify websites using the same strategy, so it's the only possible solution. Also as I mentioned earlier, Shopify support said that there's no possibility of adding more than 1 tag filter currently

Shopify Partner
803 32 63

Ok. If you ever have any other questions, or ideas on a feature for your store, don't hesitate to reach out!

1 0 0

Hi there,


I have the same problem as i need to configure more than one tag for a bikini range.


I used tags in Discovery app to setup 'the filterable tag 'bikini tops', though I need 3 other options, one of them being 'bottoms'.


Can you please offer me the complete instruction how to do so. I am not a programmer though am a designer /developer very familiar with liquid code etc. 
Also how to configure the metafeilds and assign to products and that process if you could.


Just need the full code and instruction to implement what you have . . If you could that would be great !

I would really appreciate it. I cannot believe Shopify doesn't allow us to filter by more than one tag ?




Shopify Partner
66 0 8

Hi @hiba_abdelk


This is Stacy from the Searchanise Team, the app that offers professional search and filtering capabilities for Shopify stores.


Filters with AND logic could help you to achieve the desired result. 


By implementing the AND filter logic, your customers will have the ability to refine their search results by combining multiple filter options at the same time. This feature ensures that they can find products that meet all their specified criteria, resulting in a narrowed down list of the most relevant items.


To set up AND logic for filters, you can follow the instructions provided in our app's help article: Link to the help article


Check out the Smart Search Bar and Filters listing to learn about other features our app has.


Should you have any further questions or require assistance during the installation and setup process, please don't hesitate to reach out.


Wishing you the best of luck with your Shopify store!




Shopify Partner
61 0 2

It is not possible to filter with multiple tags using the Shopify filter only. Maybe trying some other filter app would be better. Here is what I use since they do support me on the issue


Don't stop grinding
Shopify Partner
1 0 0

Your solution is great but useless for stores with custom product cards. Since these are not possible?