Variant drop down menus not working on mobile

Highlighted
New Member
2 0 1

On any product page that has a variant option dropdown list, some users on Android devices are unable to click the dropdown list to select a variant.

However, it seems for all these users if they tap right at the bottom of the word "Size" or "Style" (whatever the heading for the dropdown is) just above the dropdown box , but not in the center of either, the dropdown list will work.

One user even sent me a screen grab and labeled the areas in red where you can tap to open the lists if you're having the issue.

I've attached the photo below.

I put this out to other users who have the issue and they said taping in that area made it work finally.

It's not an obvious way to open the dropdowns and most people give up after a few taps.

I've tried changing product templates and disabling our store apps, but none of that worked for these users.

I've also tried changing themes to no avail.

At anyrate, something is going wonky with the "hit box" for these selection boxes for some users on android.

Screenshot:

https://www.dropbox.com/s/sk69kyspov9jygt/File%20Jul%2016%2C%2012%2057%2028%20AM.jpeg?dl=0

0 Likes
Highlighted
Shopify Staff
Shopify Staff
150 0 12

Hi, Steam. 

This is Martha from the Shopify Team. 

I'm not able to pinpoint why this is happening on your shop's mobile version. In terms of finding a solution, have you tried reaching out to your Theme developer for some more insight? The screenshot does make me presume the issue is coming from some code that's a bit off.  

If you're not sure how to find it, head to Online Store > Themes > click Customize theme > click More actions > click Theme info

If this change was noticed after some custom code changes, you might find a solution in rolling back to an older version of your theme. Check out this link for some more info. 

Otherwise, hopefully, you'll get some more feedback here or from Experts.

Best, 
Martha

0 Likes
Highlighted
New Member
2 0 1

With the help of a handful of users I was able to track it to using tables in the product descriptions.
The tables need to be set to 100% width, instead of a specific size. Even small sizes mess up the dropdown clickable area for some Android users.
I checked and it looks like the current "add table" button in the visual editor adds the correct width properties, but I guess my product pages are old enough that their tables had the width fixed.

1 Like
Highlighted
New Member
3 0 0

Hi, I'm using the Supply theme and am having the exact same problem. I'm a bit of an amateur and just wondering how I change the table width? Thank you!

0 Likes
New Member
1 0 1

This problem is related to the use of FastClick.js (an outdated JS plugin, abandoned since 2015: https://github.com/ftlabs/fastclick)

Disabling FastClick will resolve this issue.

 

This is a two step process:

 1. Edit your theme's theme.js.liquid file

 2. Find the line:  FastClick.attach(document.body);

 3. Comment or remove this line.

 

Second step, open your vendor.js file

 1. Find the FastClick block (generally the top item in the file)

 2. Locate the line starting with: //!function(){"use s.....

 3. Comment or remove this line

 

Your problem should be solved.

1 Like
Highlighted
New Member
1 0 0

Thanks Steve, this works perfectly!

I removed {{ 'fastclick.min.js' | asset_url | script_tag }} from theme.liquid file (in older Supply theme) and this resolved the problem.

0 Likes
Highlighted
New Member
2 0 0

Removing fastclick as above fixed the issue, but broke my menu.  So ended up fixing the tables to 100% in the product descriptions

0 Likes