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

Solved

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!

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Using a free theme? Improve it with copy/paste code snippets clicking here.
◦ Looking to hire an experienced developer? Same day response: ezfycode@gmail.com.
DaamnShop
Excursionist
20 0 3

@diego_ezfy OMG! You're amazing! Actually the only solution that worked with me after thousands of tries and tuts followed on "how to add slick slider to debut"... Really apreciated!

CoffeeMedley
Excursionist
11 2 0

@diego_ezfy It works great on mobile, but on the desktop it doesn't change to the other images.  It remains on the original. I have zoom turned off.

0 Likes

Which browser are you in? Could you please record a video of it? 

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Using a free theme? Improve it with copy/paste code snippets clicking here.
◦ Looking to hire an experienced developer? Same day response: ezfycode@gmail.com.
0 Likes
CoffeeMedley
Excursionist
11 2 0

@diego_ezfy I will, but first it only happens when I have 4 or less images.  As soon as I add the 5th it works.

0 Likes
CoffeeMedley
Excursionist
11 2 0

@diego_ezfy I emailed a link to the address on your website. I was using chrome and it doesn't seem to work well with microsoft edge.

0 Likes
DaamnShop
Excursionist
20 0 3

@diego_ezfy, how can I add the thumbnail slider for desktop too?

0 Likes
nikhil0189
New Member
6 0 0

Thank you so much for the slider! You're a life saver!
One quick thing. Main image doesn't change when variants are changed. Can you help!
Noticed that your sample store has the same bug/feature

0 Likes

@nikhil0189  You're welcome! Thanks for letting me know, I will get that fixed in the upcoming days.

I just released a new update. 

Bug fixes:
- sometimes image was not updated when clicking on the thumbnail;
- add videos;
- resize images when selecting a new variant.

 

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Using a free theme? Improve it with copy/paste code snippets clicking here.
◦ Looking to hire an experienced developer? Same day response: ezfycode@gmail.com.
0 Likes
nikhil0189
New Member
6 0 0

Video Support! Yayyy!
Appreciate it brother!

0 Likes