Sorting and Filtering not working on mobile

Ellocopepe · ‎03-25-2025

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.

tim · ‎03-25-2025

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

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com

View solution in original post

Guleria · ‎03-25-2025

Hello @Ellocopepe ,

It works fine for me.

Regards
Guleria

- Custom themes, UI/UX design, ongoing maintenance & support.
- Drop an email if you are looking for quick fix or any customization
- Email: guleriathakur43@gmail.com Skype: live:navrocks1
- Try GEMPAGES a great page builder

Ellocopepe · ‎03-25-2025

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.

Ellocopepe · ‎03-25-2025

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

Guleria · ‎03-25-2025

Yes, these options are also working on my phone.

- Custom themes, UI/UX design, ongoing maintenance & support.
- Drop an email if you are looking for quick fix or any customization
- Email: guleriathakur43@gmail.com Skype: live:navrocks1
- Try GEMPAGES a great page builder

Ellocopepe · ‎03-25-2025

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

Guleria · ‎03-25-2025

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 ?

- Custom themes, UI/UX design, ongoing maintenance & support.
- Drop an email if you are looking for quick fix or any customization
- Email: guleriathakur43@gmail.com Skype: live:navrocks1
- Try GEMPAGES a great page builder

tim · ‎03-25-2025

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

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com

Ellocopepe · ‎03-25-2025

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

tim · ‎03-25-2025

Let me know next time you're in Adelaide 🙂

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com

manan123 · ‎03-26-2025

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/

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

frp · ‎04-17-2025

Common Causes & Fixes:

1. JavaScript Not Loading Properly

Cause: Some scripts may not be initialized correctly on smaller screens or are excluded in mobile view.
Fix: Check if your sorting/filtering JS is wrapped in a desktop-only condition. Remove or adjust it to include mobile.

js

CopyEdit

// Bad example: only runs on desktop if (window.innerWidth > 768) { initializeSorting(); }

Update to:

js

CopyEdit

initializeSorting(); // Runs on all devices

2. Responsive CSS Hiding Elements

Cause: Filters or sort dropdowns might be hidden with CSS for mobile.
Fix: Check your media queries in CSS for display: none on filter elements and modify accordingly.

css

CopyEdit

@media (max-width: 768px) { .filter-sidebar { display: none; /* may be blocking access */ } }

You can replace with a collapsible mobile-friendly version instead.

3. Touch Events Not Supported

Cause: Your filter/sort code might be listening for click events only, and not recognizing mobile touchstart.
Fix: Add mobile-friendly event listeners or use a library that supports both.

4. Third-Party Plugin Conflicts

Cause: Plugins or themes (especially on platforms like Shopify, WordPress) may override behavior on mobile.
Fix: Try disabling one plugin at a time or test in a clean environment to identify the issue.

5. Viewport Scaling Issues

Cause: Your page may not be scaling properly on mobile, causing filters to be visually available but non-functional.
Fix: Ensure this meta tag is in your HTML <head>:

html

CopyEdit

Bonus Tip:

Try inspecting your mobile site using Chrome DevTools Mobile View or real device testing to reproduce and debug the behavior directly.

frp · ‎04-17-2025

What It Does:

Simulates mobile screen sizes (like iPhone, Galaxy, Pixel, etc.)
Emulates touch input and mobile network speeds
Lets you debug responsive design issues
Helps test things like sorting/filtering, hamburger menus, or media queries

Sorting and Filtering not working on mobile