FROM CACHE - en_header

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

Solved
diego_ezfy
Shopify Partner
2791 526 714

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!

Accepted Solution (1)

Accepted Solutions
diego_ezfy
Shopify Partner
2791 526 714

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 

View solution in original post

Replies 98 (98)
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.

diego_ezfy
Shopify Partner
2791 526 714
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.

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.

DaamnShop
Excursionist
20 0 3

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

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

diego_ezfy
Shopify Partner
2791 526 714

@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.

 

nikhil0189
New Member
6 0 0

Video Support! Yayyy!
Appreciate it brother!

nikhil0189
New Member
6 0 0

@diego_ezfy 

A small feedback about video support
1. It takes quite a bit to load...I think it waits for the entire video to download before playing it..introduce buffering maybe?
2. Let's say when the default image is the video..it does not take full height..around 50% of the actual video height
3. When the video is playing and you slide onto the next image, the video doesn't stop playing

I would have given a link of my store as an example but I'll have to move the video down to product description for now!
Appreciate your time on this!

diego_ezfy
Shopify Partner
2791 526 714

@nikhil0189 thank you for the heads up.

I released a new update, let me know whether the issues you mentioned are fixed and, if you find new ones, please let me know.

Major changes:
- video buffering;
- video stops playing when slider changes;
- video continues playing when slider changes;
- video shows image before loading.

nikhil0189
New Member
6 0 0

Hey @diego_ezfy 

Thanks a ton for the quick response.

Tried out the new release.
Video does show image. Thanks for that.

The video is stuck on buffering. I am using an .mp4 of 4.5mb size. I waited a minute to give it time to load thinking my network may be the reason. But it still didn't load. Tested out on Mobile & Desktop.

nikhil0189_0-1595769701954.png

 

diego_ezfy
Shopify Partner
2791 526 714
MSOBallard
Excursionist
19 0 3

Hi @diego_ezfy 

Ive been Googling this for a while and the comments sound promising!

 

Quick question, when you say you've added an update where is the link to this? Have you just updated the same links in the original post? Sorry for the 'newbie' question! 🙂

 

Thanks

Mike

diego_ezfy
Shopify Partner
2791 526 714

hope it helps you @MSOBallard!

no problem, yes, the links remain the same, I just update the code in the same link. 

 

 

nikhil0189
New Member
6 0 0
diego_ezfy
Shopify Partner
2791 526 714
diego_ezfy
Shopify Partner
2791 526 714
nirvanashoppe
New Member
1 0 0

Hi Diego,

 

Thanks for this.

When I played around with your demo, I noticed that:

1. When I choose a variant, the corresponding large image is not shown but its corresponding small image is highlighted. The large image that was the last swiped remains to be the image even when you choose a different variant;

2. When I swipe across the images, the variants don't adjust with the large image shown;

3. The zoom-in feature was lost.

 

Are there workarounds for these?

Appreciate your work and reply man!