Product image slider Dawn on mobile: too fast

Store Design
1

Hi,

If you visit any Dawn theme Shopify store from a mobile phone and you go to a product page, then you swipe left and right to scroll through the product images, you will see that the swiping is too sensitive. You just want to swipe to the next image, but in a small swipe you swipe to 5 images further. The image slider / swiper is too sensitive. Visitors just want to see the next image, not 4 images further.

User story: as a visitor I want to swipe the product images on product pages (on mobile) by just seeing the next image after every swipe in order to conveniently view all images one by one. No more skipping a few images.

The Alibaba app has a very similar design, but they also made sure that every swipe you just go to the next image. No images are skipped when swiping.

How can I change this? In Javascript?

2

@Tobias5

YES, PLEASE SHARE YOURE STORE URL SO I WILL CHECK

3

Hi,

Here is the store url where you can check the slider problem.

https://themes.shopify.com/themes/dawn/styles/default/preview

I have attached a video where I show what I mean with the issue. I (and my visitors) want to be able to scroll through the images without skipping images. Swiping right, should mean that you will see the next image. Not 3 or 7 images further. There should not be any skill involved, if you want to see the next image as a customer.

4

dawn-swipe.gif

In addition I show a GIf that demonstrates the issue. You have to swipe very carefully. Otherwize multiple images will skip.

5

Hi, I have the same problem, did you fix it?

6

@Shopify_77 Any chance of getting this looked at at a theme level? Seems like a big UX oversight :slightly_smiling_face:

7

Yes, it would be great if Dawn Theme could fix this.

8

Hi @go2u , nope. I never found a solution for this. It is a quite inconvenient UX.

9

Add this code to your custom css file:

.slider__slide { 
	scroll-snap-stop: always;
}
10

This fixed it! Thanks

11

Wow a small piece of code did the trick. A small step for a man, a giant swipe in Dawnkind. Thanks a lot!

12

I have the same issue,could you provide a more detailed explanation? I can’t find custom css and also if I find it where exactly do I have to insert the code? I would appreciate the help.

13

Look for your base.css file and paste the code at the bottom of the file, that fixed it for me :+1:

14

After the recent updated version of the dawn theme 12.0.0, this solution doesn’t work for me anymore. Do you have any suggestions? Thank you for your precious support!

15

People say it doesnt work anymore for Dawn 12 update. Can you confirm this?

16

I tried it and you are right. It doesn’t work anymore. Very frustrating.

17

This Currently works on spotlight v.13 theme. You want to click customize website then on left hand side click theme settings look at the very bottom of options for Custom CSS and it should be empty and just paste code