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

hiba_abdelk
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">
        <div>
        <span>Frame Size</span>
        </div>
        <div>
        {% render 'armament-icon' with icon: 'arrow-right', classes: "w-10 custom-filter__right-icon" %}
        </div>
    </summary>

   //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"
                        name="filter.p.tag"
                        value="{{ tag }}"
                        id="Filter-{{ forloop.index }}"
                        {% if filter_value.count == 0 and filter_value.active == false -%}disabled{%- endif %}
                        data-armada-selector="custom_filter_checkbox"
                    > 
                    {{ tag | remove: "SIZE_" }}
                </label>
                </li>
            {% endif %}
        {% endfor %}
        </ul>
    </div>
</details>



<script>
 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();
        custom_loader.classList.remove('hidden')

        let fetch_url;
        if(window.location.href.includes("?sort") || window.location.href.includes("&sort")) 
        {
          const querySortString = window.location.search;
          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;

        fetch(fetch_url)
          .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);
            custom_loader.classList.add('hidden');
          })
          .catch(error => console.error('Error:', error))
          .finally(() => custom_loader.classList.add('hidden'));
      })
    )
</script>

 

URL structure in the browser

 

?filter.p.product_type=Acetate+Eyeglasses&filter.p.tag=FRAME+SHAPE_ROUND&filter.p.tag=SIZE_SMALL


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
?filter.p.tag=FRAME+SHAPE_ROUND,SIZE_SMALL

 

But it's not working for me as well

 

Also I tried this url structure
?filter.p.tag=FRAME+SHAPE_ROUND+AND+SIZE_SMALL


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

?constraint=tag:FRAME+SHAPE_ROUND,SIZE_SMALL

?tags=FRAME+SHAPE_ROUND,SIZE_SMALL

But still no results

Replies 9 (9)

Zqdo
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.

banned
hiba_abdelk
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

Zqdo
Shopify Partner
803 32 63

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

banned
hiba_abdelk
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

Zqdo
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!

banned
kristommy2
Visitor
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 ?

 

Cheers

Krisso.

SearchaniseTeam
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!

 

Best,

Stacy

minhcu
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
https://apps.shopify.com/ultimate-search-and-filter-1

 

Don't stop grinding
Brauwn
Shopify Partner
1 0 0

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