Solved

Debut Theme - Solution to swipe images on the product page (Mobile & Desktop)

diego_ezfy
Shopify Partner
2958 568 890

Hey everyone,

I have developed a custom solution to swiping images on the Debut theme and I'd like to share it with you all. 
Click here for a live demo of how it looks like.

Overview
Debut is a great theme but you can't swipe images on the product page, which ends up hurting the UX and, subsequently, potentially hurting conversions.

How to add it to your Debut theme
1. On the admin page, navigate to Online Store > Themes.
debut1.jpg
2. Find the Debut theme and click on "Edit Code".
3. Find the file named "product-template.liquid". Delete everything in there and paste the code in this link: https://gist.github.com/dpw1/b596c4d0fba16349170b0dcef87901e3
4. Find the file named "theme.js". At the very bottom of the file, right below $(theme.init), paste the code in this link: https://gist.github.com/dpw1/19b344c5332f4753d6bf05c96da69767
debut3.png

5. You're all set!

Notes
- At the customize page you can turn on/off the adaptive height images.

debut-cus.jpg
- The image zoom currently does not work with the slider. I might update it in the future. If so, I'll update this post.
- Let me know if you find any bugs and I'll get it fixed.

Hope it helps you guys.

Thanks!

◦ Follow my blog & youtube for coding tutorials.
◦ Replace apps with copy/paste code snippets and save money.
Accepted Solution (1)
diego_ezfy
Shopify Partner
2958 568 890

This is an accepted solution.

@klau @yuum @yashsaini @yiotti @VLMontoro 

New update released. Kindly update your sliders with the code found on the very first post of this thread.

If you find any bugs please tag me and I'll do my best to get them fixed.

Kind regards,
Diego 

◦ Follow my blog & youtube for coding tutorials.
◦ Replace apps with copy/paste code snippets and save money.

View solution in original post

Replies 98 (98)