Product image slider on Debut theme

Highlighted
New Member
1 0 1

Hello,

I want my products to have an image slider, instead off all the images showing in rows, as I have a lot of variant images. 

I've found a couple of threads here about this, with tutorials on how to do it however, non have worked for me. It appears that the Debut theme has updated since these posts, meaning they no longer work. I have been able to get arrows to appear next to the images however, the images don't collapse into a slider and are still show in rows. 

Here is the most updated tutorial I can find: https://community.shopify.com/c/Shopify-Design/Instructions-to-enable-thumbnail-slider-for-all-scree...

When I open theme.js  and search for the section starting _initBreakpoints: function() I am unable to find this section. Instead it appears to have split into two sections;  this.initMobileBreakpoint(); and this.initDesktopBreakpoint(); 

Because of this, I'm not sure where to put in the code, I've tried a few different solutions but I only have a basic understanding of HTML and am unable to figure this out. 

 

If anyone has an updated method to make this work, or if I am doing something wrong and can point me in the right direction, then I'd appreciate any help you could provide me with. 

 

Thank you!

1 Like
Highlighted
Tourist
6 0 1

Same here. I had implemented the code you are referring to in the old version. I updated the theme and was looking to re-do the slider and it does not work. They also changes the slider in the updated theme and it is buggy. 1 image always stacks in 2 rows. No idea why. Is anyone else seeing this?

Also the scroll was infinite previously and is unidirectional in the updated theme.

Can anyone provide suggestions for how to fix these things:

1. Add thumbnail slider to desktop

2. Fix thumbnail slider for mobile so that image does not stack

3. Make scroll infinite and not unidirectional

Thanks for your help.

Best wishes.

0 Likes