Solved

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

diego_ezfy
Shopify Partner
2934 562 883

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!

◦ I can help you further! Top #4 Shopify Expert, 24h reply. Click here to hire me.
◦ Follow my blog & youtube for more free coding tips.
Download copy/paste code snippets that can replace most apps.

Accepted Solution (1)
diego_ezfy
Shopify Partner
2934 562 883

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 

◦ I can help you further! Top #4 Shopify Expert, 24h reply. Click here to hire me.
◦ Follow my blog & youtube for more free coding tips.
Download copy/paste code snippets that can replace most apps.

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
2934 562 883

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

◦ I can help you further! Top #4 Shopify Expert, 24h reply. Click here to hire me.
◦ Follow my blog & youtube for more free coding tips.
Download copy/paste code snippets that can replace most apps.

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?

yiotti
Visitor
2 0 0

Can someone help, I've done this all correctly and the images swipe on mobile but when on desktop the image doesnt change when a variant is chosen. It works perfectly on mobile so im a bit confused why it doesnt work on desktop?

diego_ezfy
Shopify Partner
2934 562 883

Hey @yiotti 

This feature is still under development. It should be working within the next few days, I will update this thread once I implement the code.

Thanks

◦ I can help you further! Top #4 Shopify Expert, 24h reply. Click here to hire me.
◦ Follow my blog & youtube for more free coding tips.
Download copy/paste code snippets that can replace most apps.

yiotti
Visitor
2 0 0

Perfect! If you need anyone to test it out I would happily help!

yashsaini
Tourist
10 0 1

hi Thank you so much.

I have implemented this... work so fine..

But the only problem is that image take so much time to load..... at the first time the image don't even appear inproduct page . after refreaching or clicking on the another image make it work

Please consider this issue.

All The Best

Yash saini

diego_ezfy
Shopify Partner
2934 562 883

@yashsaini 

Can you send a screenshot please?

◦ I can help you further! Top #4 Shopify Expert, 24h reply. Click here to hire me.
◦ Follow my blog & youtube for more free coding tips.
Download copy/paste code snippets that can replace most apps.

yashsaini
Tourist
10 0 1

This was the problem i was taking about, at first time product load image don't appear, you will have to reload it or click to anyother image to work it properly... if you again go to some another product this happen again .. again have to follow same step to make it work......

Thank you so much 

Slider Error PS.jpg

diego_ezfy
Shopify Partner
2934 562 883

@yashsaini thanks for the heads up, I'll get it fixed now.

◦ I can help you further! Top #4 Shopify Expert, 24h reply. Click here to hire me.
◦ Follow my blog & youtube for more free coding tips.
Download copy/paste code snippets that can replace most apps.

yashsaini
Tourist
10 0 1

So i have just checked with new Updated Code , Problem is still there... & i'm using Debut Theme

 

yuum
Excursionist
17 0 7

Hi guys. Just updated with the new codes (thank you, @diego_ezfy !). I was experiencing a similar issue as @yashsaini is saying and it was on my homepage banner slide too but now all seems to be working just fine. I'm using Debut too.

diego_ezfy
Shopify Partner
2934 562 883

Hey guys,

Thank you for the feedback. Can you confirm whether it happens only on Desktop? I fixed it for desktop devices but could not reproduce bug on mobile. 

I just updated the code again right now, please download this new version and let me know whether the bug persists.

Thank you

◦ I can help you further! Top #4 Shopify Expert, 24h reply. Click here to hire me.
◦ Follow my blog & youtube for more free coding tips.
Download copy/paste code snippets that can replace most apps.

yashsaini
Tourist
10 0 1

Hi

i have check on both mobile and destop... problem was on both.

diego_ezfy
Shopify Partner
2934 562 883

@yashsaini 

Can you send your website's URL via private message or e-mail, please?

◦ I can help you further! Top #4 Shopify Expert, 24h reply. Click here to hire me.
◦ Follow my blog & youtube for more free coding tips.
Download copy/paste code snippets that can replace most apps.

yashsaini
Tourist
10 0 1

is this the right email : diego.boarutto.fortes@gmail.com

diego_ezfy
Shopify Partner
2934 562 883

yes, that is it

◦ I can help you further! Top #4 Shopify Expert, 24h reply. Click here to hire me.
◦ Follow my blog & youtube for more free coding tips.
Download copy/paste code snippets that can replace most apps.

Lefta
New Member
4 0 0

Hi @diego_ezfy ,

first at all, great work! The function is very important, especially on the mobile version, thanks for your contribution.

But i have two comments:

1. At product page on mobile there is under the main picture a slide bar. When i slide with the finger over the slider, then the next picture is chosen. Maybe it´s better, when this behavior is only, when slide over the main picture. When i slide in the image bar, in my opinion, it should just show which pictures will follow. And with a tap on a picture in the bar, the picture will chosen.

2. Is it possible in desktop version, to add an arrow to chose next picture? Maybe we can also add a zoom icon, which plops when the mouse is moving above the main picture.

 

Don´t forget, thats only suggestions for improvement. You did still a great job!

emil2099
Visitor
1 0 1

@diego_ezfy Awesome work! Really good addition to the theme. Wondering if you have any plans to work on this in the future? Key bits to make it just perfect:

- Return zoom on pinch on mobile

- Return zoom on desktop

- Prevent from swiping behaviour when interacting with thumbnails (only an issue where lots of images exist and 'long' tumbnail bar is shown

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
2934 562 883

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

 

◦ I can help you further! Top #4 Shopify Expert, 24h reply. Click here to hire me.
◦ Follow my blog & youtube for more free coding tips.
Download copy/paste code snippets that can replace most apps.

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
2934 562 883

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

◦ I can help you further! Top #4 Shopify Expert, 24h reply. Click here to hire me.
◦ Follow my blog & youtube for more free coding tips.
Download copy/paste code snippets that can replace most apps.

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
2934 562 883

Can you share your website URL so I can debug it?

◦ I can help you further! Top #4 Shopify Expert, 24h reply. Click here to hire me.
◦ Follow my blog & youtube for more free coding tips.
Download copy/paste code snippets that can replace most apps.

nikhil0189
New Member
6 0 0

@diego_ezfy here's the URL

https://quoteunquoteshop.com/products/copy-of-iridescent-reflective-casual-leggings

I made a copy for you to debug.
Issues in safari.
Using iPhone X

diego_ezfy
Shopify Partner
2934 562 883

@nikhil0189 I was able to reproduce the bug and fix it; Please let me know whether it works for you now.

Click here for the live example.

 
 
Regards,
Diego

◦ I can help you further! Top #4 Shopify Expert, 24h reply. Click here to hire me.
◦ Follow my blog & youtube for more free coding tips.
Download copy/paste code snippets that can replace most apps.

diego_ezfy
Shopify Partner
2934 562 883

@nikhil0189 also keep in mind you should try this on an incognito page to avoid cache issues.

◦ I can help you further! Top #4 Shopify Expert, 24h reply. Click here to hire me.
◦ Follow my blog & youtube for more free coding tips.
Download copy/paste code snippets that can replace most apps.

nikhil0189
New Member
6 0 0

@diego_ezfy  you are a lifesaver!

Ladies & Gentlemen, if you are reading this, don't think twice about hiring him!
If he can be so helpful & pro-active to someone who is not going to pay him, I cannot even imagine the level of support he will provide to people who hire him!

diego_ezfy
Shopify Partner
2934 562 883

Thank you very much!

◦ I can help you further! Top #4 Shopify Expert, 24h reply. Click here to hire me.
◦ Follow my blog & youtube for more free coding tips.
Download copy/paste code snippets that can replace most apps.

SHERYLL1477
Visitor
1 0 0

This did not work on mine. Do you think you can take a look?

 

Thanks!

Sheryl

alaw2k
Visitor
1 0 1

Same here, they seemed to have updated / changed the theme.js file on the debut theme and removed the theme.init section completely but not the other themes... I wonder if the old codes still work... can someone post their theme.js so I can give it a try please? 

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
2934 562 883

hope it helps you @MSOBallard!

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

 

 

◦ I can help you further! Top #4 Shopify Expert, 24h reply. Click here to hire me.
◦ Follow my blog & youtube for more free coding tips.
Download copy/paste code snippets that can replace most apps.

nirvanashoppe
Visitor
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! 

diego_ezfy
Shopify Partner
2934 562 883

@nirvanashoppe  Hey,

These are still under development. There should be an update fixing all those issues within the next few weeks.

Thank you

Regards,
Diego

◦ I can help you further! Top #4 Shopify Expert, 24h reply. Click here to hire me.
◦ Follow my blog & youtube for more free coding tips.
Download copy/paste code snippets that can replace most apps.

AlexanderDuus
Tourist
7 0 2

Hey dante,

Not sure what I am doing wrong but the thumbnails shows up vertically and slightly enlarged on desktop. Otherwise the app works perfekt.

AlexanderDuus_0-1596562410171.png

 

limberlux
Visitor
1 0 0

How did you end up solving this?

VLMontoro
Shopify Partner
6 0 0

Hello @diego_ezfy and thanks a lot for sharing this! I had been trying it for a while when I found your post.

Sorry to bother you but, is there a chance you have a version of this for the featured-product.liquid section instead? 

 

Sekaja
Visitor
2 1 0

Hi @VLMontoro, I am also trying to do this! Did you have any luck adding this functionality to featured product?

Huge thanks @diego_ezfy this is an awesome addition to my site! Just really really want it implemented on my home page too.

I've tried adding in the extra bits of code that you added to the product.template-liquid, but the main image disappears leaving just the thumbnails really far down below.

Any help would be hugely appreciated!

yuum
Excursionist
17 0 7

@diego_ezfy  This is fantastic!! It works perfectly! Thank you soooo much for sharing this!!

klau
Shopify Partner
6 1 0

@diego_ezfy   Thank you so much for sharing this code snippet.  Tremendous help on a client site I am working on.  By any chance, do you have the javascript and liquid markup stored somewhere in github?  Instead of bothering you with additional features, I was wondering on keeping the slider (like mobile) but for desktop and also having the ability to have the slider on the side of the image vs bottom of the image

Do lmk if you have this stored somewhere in git, thanks again!

diego_ezfy
Shopify Partner
2934 562 883

@klau 

You're welcome! Unfortunately I don't have anything like that. 

Kind regards,
Diego

◦ I can help you further! Top #4 Shopify Expert, 24h reply. Click here to hire me.
◦ Follow my blog & youtube for more free coding tips.
Download copy/paste code snippets that can replace most apps.

diego_ezfy
Shopify Partner
2934 562 883

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 

◦ I can help you further! Top #4 Shopify Expert, 24h reply. Click here to hire me.
◦ Follow my blog & youtube for more free coding tips.
Download copy/paste code snippets that can replace most apps.

yashsaini
Tourist
10 0 1

This was the problem i was taking about, at first time product load image don't appear, you will have to reload it or click to anyother image to work it properly... if you again go to some another product this happen again .. again have to follow same step to make it work...... let me check with this new updated code and i'll Update you

Thank you so much 

Slider Error PS.jpg