Images changing when product gallery thumbnail images are vertically swiped

  • Resolved shahzeb104

    (@shahzeb104)


    2 months, 2 weeks ago

    I’m facing this weird behavior with Product Gallery Thumbnail Images on MOBILE. When I vertically swipe on these thumbnail images, my intention is not to change the image but to scroll the screen. As on mobile devices, screen size is small, people will vertically swipe on these thumbnail images with the intention to scroll the screen but they would be seeing the images change, which is not good User Experience. Here’s the video for better understanding: https://youtube.com/shorts/y-EuXWK2SPE
    I’ve enabled pointer location on my Android phone so that the swipe location can be seen.

    The standard behavior should be as follows:

    1. Image SHOULD NOT be changed when I tap the product gallery thumbnail image and then vertically swipe my finger on screen. By doing this, I only need the screen to scroll, not changing the image.

    2. CHANGE the image only when I tap on the product gallery thumbnail image. By TAP I mean putting the finger on thumbnail image and removing the finger from screen, no swiping involved.

    Right now, I try to scroll the screen and in order to do so, the images get changed. This is bad for User Experience. It’s annoying. Any solution to this?

    Theme: Storefront
    Active Plugins: Only WooCommerce
    No change in theme’s functions.php file
    No custom CSS added
    Not using any Cache Plugin
    Cleared browser cache

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)

  • Hey there, @shahzeb104! Thanks for contacting us. I’m happy to help you.

    From your video it seems the image switches when you try to scroll down clicking on the image, correct?

    This happens because if you click on an image it will switch to that image, even if you click with the intent of scrolling down/up, that’s expected behavior.

    If that is not exactly what is going on, do you mind sharing more details so we can better understand the issue?

    Looking forward to your reply.

    Have a wonderful day!

    Thread Starter shahzeb104

    (@shahzeb104)

    Hi,

    Thank you for your response!

    Yes, you’re correct that the image switches when I try to scroll while clicking (or placing my finger) on the product gallery thumbnail. However, my intention is to scroll the page, not change the image. This behavior makes it tricky for users on mobile devices since the small screen size means they might naturally place their finger on a thumbnail to scroll, which unintentionally triggers an image change.

    What I’m hoping to achieve is this:

    1. Scroll without changing the image: When I tap and vertically swipe over the product gallery thumbnails, the image should not change. I want the screen to scroll without affecting the gallery.
    2. Image change only on a tap: The image should change only when I specifically tap (put my finger down and release) on a thumbnail. There shouldn’t be any change if I’m swiping.

    The current behavior negatively impacts user experience because users frequently swipe to scroll on mobile, and the images change unintentionally.

    Let me know if there’s any solution or workaround for this.

    Plugin Support Zubair Zahid (woo-hc)

    (@doublezed2)

    Hello shahzeb104,

    Thank you for your reply.

    I understand what you are trying to say here.
    I was able to replicate the experience on my end as well.

    Having said that, this looks like a limitation on how browsers handle the user input.
    When holding the screen over thumbnails, the JS registers a click and when we scroll the browser recognizes the motion and moves the page vertically.

    If you like you may post your suggestions at the Storefront theme’s feature request page and our devs will take a look into it.

    Please don’t hesitate to contact us again if you have more questions or concerns.
    We are here to help ??

    Best regards.

    Thread Starter shahzeb104

    (@shahzeb104)

    I’m using Astra theme in my production website, not storefront.

    Plugin Support ckadenge (woo-hc)

    (@ckadenge)

    Hi @shahzeb104,

    I’m using Astra theme in my production website, not storefront.

    Thank you for sharing an update on this.

    As you may already know, Astra is a third-party theme and is not covered in our support scope. I would recommend reaching out to their support team for further assistance with this, as they’re better placed on helping out troubleshoot this issue.

    I hope this gets you going.

Viewing 5 replies - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.