Sorting and Filtering not working on mobile

Shopify Discussion

Topic summary

A Shopify store owner encountered an issue where newly added filters (specifically gemstone and color filters) worked on desktop but failed on mobile devices. The filters would not apply changes when the “Apply” button was pressed on iPhone and iPad.

Key findings:

  • The issue was isolated to iOS devices using Safari
  • On iOS, clicking the filter text labels didn’t work, but clicking the images/color swatches did function properly
  • Android devices had no issues

Solution provided:
A CSS fix was shared to address this Safari-specific quirk:

.swatch-input-wrapper [type=checkbox] {
    width:100%;
    height:100%;
}

This code should be added to “theme settings” => “custom css”. The issue was also noted as fixed in Dawn theme version 15.3.0.

Resolution: The CSS solution successfully resolved the problem. The original poster confirmed it worked and offered compensation to the helpers.

Note: An unrelated question about displaying product variants separately on collection pages was posted at the end but remains unanswered.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

I recently added some more filters on shopify for my site. They seem to work just fine on my desktop browser, even when i inspect it as a mobile screen. However when i try to use the filters on my phone, they dont seem to work. I select the filter and press apply and nothing changes. My site is:

goldamiaustralia.com.au

Willing to pay for solutions.

2

Hello @Ellocopepe ,

It works fine for me.

Regards
Guleria

3

Did you try it on your phone? I just tried it on my iphone and my ipad and im still having issues. I have set up a gemstone filter using a metaobject. The other filters seem to work but this filter and the colour filter aren’t working on my mobile.

4

please try the colour and gemstone filters on this collection here and let me know if they work on your phone.

5

Yes, these options are also working on my phone.

6

I see, thats very weird. I wonder why they are not working on my iphone, even when i use a different browser. I seem to select apply and nothing changes. Do you have any ides as to why that might be happening? thank you very much

7

Okay now I find something using IOS
Using IOS when we click on color options or gemstone options it’s not working but when we click its images then it’s working.

But using Android it works fine.

Can you please confirm the same issue you have ?

2 Likes
8

Are you using Safari on your IOS devices?

And it works like @Guleria said – tapping image/swatch works, but tapping text it does not?

Then this should fix it:

.swatch-input-wrapper [type=checkbox] {
    width:100%;
    height:100%;
}

Add this code to the “theme settings” => “custom css”.

This is a Safari quirk.

And actually fixed in 15.3.0 https://github.com/Shopify/dawn/pull/3678

2 Likes
9

Yes thats correct, it only seems to work when I select the images or the colour swatch.

I just added the code and this worked perfectly. Thanks so much. Feel free to pm me your paypal email, ill get both of you a coffee.

Thanks again

2 Likes
10

Let me know next time you’re in Adelaide :slightly_smiling_face:

1 Like
11

HEY HELP ME!!

I am using shopify dawn theme. I want each variant to appear separately on the collection page, and when I open any one of them, all the other variants should also be displayed together on the product page.

My website - https://mansaroverfurnishings.com/

manan123_0-1742978796340.png
manan123_0-1742978796340.png399Ă—199 44.3 KB

manan123_1-1742978796341.png
manan123_1-1742978796341.png400Ă—179 54.6 KB

I want all the variants to be appear seperately also on collection page.