Solved

Product image slider Dawn on mobile: too fast

Tobias5
Shopify Partner
24 0 27

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? 

Accepted Solution (1)

MarkGPT
Visitor
2 1 4

This is an accepted solution.

Add this code to your custom css file:

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

 

View solution in original post

Replies 16 (16)

KetanKumar
Shopify Partner
36854 3637 11976

@Tobias5 

YES, PLEASE SHARE YOURE STORE URL SO I WILL CHECK

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Tobias5
Shopify Partner
24 0 27

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. 

Tobias5
Shopify Partner
24 0 27

dawn-swipe.gif

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

 

go2u
Tourist
6 0 3

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

Tobias5
Shopify Partner
24 0 27

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

AlissaWillow
Shopify Partner
4 0 1

@Shopify Any chance of getting this looked at at a theme level?  Seems like a big UX oversight 🙂

 

Tobias5
Shopify Partner
24 0 27

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

MarkGPT
Visitor
2 1 4

This is an accepted solution.

Add this code to your custom css file:

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

 

scrambleduser
Tourist
10 0 2

This fixed it! Thanks

Tobias5
Shopify Partner
24 0 27

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

Oj0522
Tourist
3 0 1

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.

EmilioUR
Visitor
1 0 1

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

NatPa
Visitor
1 0 0

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!

Tobias5
Shopify Partner
24 0 27

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

Tobias5
Shopify Partner
24 0 27

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

JosephCommerce
Visitor
1 0 0

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