Debut Theme 2020 Product Image Thumbnail as Slider

[smartwellnessco]

Hi everyone! 

I'm looking for help to edit the debut theme code to enable the product image thumbnails into a slider. I have tried following instructions from a previous solution however i am unable to do so. The solution i followed is from this link https://community.shopify.com/c/Technical-Q-A/Debut-theme-Product-thumbnails-as-slider/td-p/571620. I understand that shopify updates themes from time to time so i'm thinking if the above link is solution is no longer valid. Appreciate all the help that i could get! 

Thank you very much and i hope everyone is staying safe 🙂 

[diego_ezfy]

@smartwellnessco 

Thank you for your question.

This particular type of customization would require some heavy work, you'll likely need to hire a Shopify developer to assist you in case you're unfamiliar with advanced Liquid/Javascript/CSS.

Recently I developed a code for this community that makes the main product image swipe-able, but the thumbnails for now are not working as a slider, only on mobile devices.

Perhaps in the future I will implement it if there is enough request, so I suggest that you subscribe to the thread, it can benefit you eventually:

https://community.shopify.com/c/Shopify-Design/Debut-Theme-Solution-to-swipe-images-on-the-product-p...

Kind regards,
Diego

[smartwellnessco]

Hey Diego! @diego_ezfy 

Tired out the solution found in your link however it did not work out. Thanks for reaching out though. 

Best, 

Dee

[asiddhanthi]

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. Also the scroll was infinite previously and is unidirectional in the updated theme.

Can anyone provide suggestions for how to fix these two 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.

[diego_ezfy]

@smartwellnessco 
@asiddhanthi 

It would require some vast Liquid/CSS/Javascript knowledge to implement the features you're looking for. 

Although not guaranteed it's possible that someone around here may be kind enough to devote hours of their time to implement this into your store free of charge, but if this is something you need urgently I recommend either purchasing a theme that has these features or hiring a Shopify developer to assist you.

Kind regards,
Diego

[diego_ezfy]

@smartwellnessco 

Hope you're doing well!

Just to let you know, I have coded a custom solution for this. You can use arrows and also swipe.

Here is the tutorial of how to install it and here is the live preview of the Debut theme working with arrows/swipe feature.

I'll be releasing much more features in the near future, also if you find any bugs let me know!

Kind regards,
Diego

[Brian_Calgary]

Had diego_ezfy, in the answer above, install his slider code for me. Had a couple of questions and the response was very prompt.

Works great and so much less expensive than having someone do some custom coding. Two thumbs up.

Brian

[Aliecommerce]

Could you please share code

[MRamzan]

It is simple. I got the help from a Shopify Developer connected from this video. https://www.youtube.com/watch?v=YQUhEsHV-hQ