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

[diego_ezfy]

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.

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

5. You're all set!

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


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

[mimsie92]

This was happening to me on mobile, until I unchecked "Enable adaptive height for images" at the bottom of the "Product Pages" editor. Have you played with that to see if that changes anything?

[yashsaini]

Hi

A Good news , that after disable "adaptive height for images" at the bottom of the "Product Pages" editor.

Yes now everthing work fine...

Thank you All , All the best

Yash

[Gaarbi]

Hi Can you please help me out to do that ?

[diego_ezfy]

@Gaarbi 

Hi! Please send me an email:

[email protected]

Thanks!

[Gaarbi]

Hi Thanks, i have already sent to you from [email protected]

[Gaarbi]

Hi Diego,

Did you get a chance to look for my request, please check my store i wanted to add products after that. 

Thank you

[diego_ezfy]

@Gaarbi 

I did not receive any emails from you - did you send it to the correct address?

[email protected]

Thanks!

[Gaarbi]

Hi Please check the below,

email address 

[email protected]

[Alexos]

Hey @diego_ezfy, I've been searching to do that for a while and really happy to see your post, great work thank you!

Anyway, I have some troubles because my "product-template.liquid" has already been modified for multiple variant images (with this video which works perfectly: https://www.youtube.com/watch?v=ARpSIscriYA&t=119s) and I can't figure out how to adapt your code to my product-template.liquid...

Here is my product-template.liquid code if it helps: https://gist.github.com/alexisthieb/b0eb2da14181c035505feef0abd477bf

I've tried to compare it to yours and insert the missing parts but it results in a product slider with all the images (not only the variant ones) which comes on top of the first one:

If anyone have an idea how to implement this would be really appreciated,

Cheers from France! 

Alex

[MSOBallard]

Amazing! Thanks so much for all the bug fixes. This now works for me. I was having the same issue on initial load for main image.

If you ever sort the zoom functionality, you'll go down in history!

Great work and thanks for sharing! 🙂

[Twobeers89]

Hey Diego,

the Debut Theme is updated now and I don't have a "theme.init" in my "theme.js". So where do I drop the code?

Thanks in advance!

[KW2]

Thank you so much for this!

Everyone is so appreciative of you and your awesome programming skills helping us all out. 

Its worked really well for my site but I was wondering if would be possible to make it so when you swipe across the variants, the selection in the drop down list changes to the same as the item viewed.

I.e. We have 1 item with 10 different variants but when you swipe through the images theres no way of knowing what the variant is called. Ideally if the variant changes with the image it will be easier for the customer to add to cart immediately and also so they can see the name related to what theyre seeing.

Thanks again. 

[Kevin95BS]

@diego_ezfy Really thank you for the nice solution. It worked fine but when I click on a product and go to the product page the product photos are closed. Only when I click on a product photo the photo will open and show in big.
Hope you can help me.

Best regards

Kevin

[Balboshy]

Great work!, is there anyway to make slideshow thumbnail swipe instead of the buttons ? 

[alexialo]

Hello

It's not working on the actual code, the product image are completely on the bottom on the page and on mobile it's not working too. Anyone has a solution ?

thank you

[philipdawo]

I got the same problem.

[bellenbloom]

Hi Diego and everyone.

I can't find the theme.init in theme.js. Has debut theme changed since the last update of this code?

Thank you.

[thomasthrr]

Hello, thanks for sharing your code to swipe through images.

I applied the codes on my website, unfortunately, it hasn't changed anything, do you know why it is the case?

[BuryCZECH]

I can not find this file $(theme.init) has changed anything since then? Thank you for your reply.

[diego_ezfy]

Hey everyone! 

I'm happy to announce that I have released a new update for this solution. Please click here to read the tutorial and get the download files.

Kind regards,
Diego.

@Kevin95BS 
@Balboshy 
@alexialo 
@philipdawo 

[BuryCZECH]

Can I have arrows in the introductory photos? (Large photos, arrows are now below - confusing)

[diego_ezfy]

@BuryCZECH 

Yes, absolutely. This is in the pro version of the debut slider as you can see here.

You also have full control to turn the arrows on/off at the customize page on the pro version.

Live example in store here: https://debut-theme-slider.myshopify.com/products/blue-silk-tuxedo

[thorohead]

Works perfect , many thanks.

[victoria98]

Hi Diego @diego_ezfy !

Thank you so much for creating a solution for the image slider!

I just recently downloaded it but I am having some problems with how it displays and functions on my site. Instead of displaying as a slider, the images just show underneath the featured image.

Any assistance would be greatly appreciated!

[diego_ezfy]

@victoria98 

Hey!

Did you download the Simple or Pro version?

With the Pro version you can go to customize > products page > product page to customize the slider on mobile and desktop.

Additionally, please ensure you're using the version 16.0.0 or above of the debut theme. 

Send me your website URL via email so I can take a look, please.

Thanks! 

Kind regards,
Diego

[victoria98]

@diego_ezfy 

Hi!

I am using the simple version and the debut version 17.7.0.

My store URL is https://victorias-test-theme.myshopify.com/ and the password is "zeikos".

Thank you so much for your help!

[diego_ezfy]

@victoria98 

Please reach me out via email:

[email protected]

I'll fix it

[yashsaini]

Hi,

I'm using your swipe images  functionality from last 8 months. but recently i have noticed that , people were trying to make images Zoom, but they unable to zoom the images.

i have also unabled the zoom feature from setting but it still don't work. could you please advice. Even i check your sample store (On Mobile), there also i'm unable to Zoom Images.

Please advice

Thank you 🙂

Yash

[diego_ezfy]

Hi @yashsaini ,

The old version does not have zoom enabled, only this new version has the option to enable/disable zoom!

Thank you.

Kind regards,
Diego

[Klforres]

Hi Diego,

Is there a way this can be customized to suit my already customized code? I have a code that include product description tabs; however, I'm really needing to add the swipe images.

Thank you,

Katherine

[diego_ezfy]

@Klforres 

Yes, absolutely. Please reach me out via email for further details:

[email protected]

Thank you!

[GiraffeSports]

hello, any updates to this?

[AGM_ND]

Can i use this debut customization on my boundless theme ? I would like to do this on my boundless theme

[jvh5528]

Hi, is this file still available?

I clicked on the link, but there weren't any downloadable links.

This is what I got.

[diego_ezfy]

@jvh5528 

Hello,

Unfortunately the simple version is not available at the moment.

Kind regards,
Diego

[Huda-HN]

@diego_ezfy 

Main image doesn't change when variants are changed. Can you help!

[diego_ezfy]

@Huda-HN  Yup, helped and fixed via email!

[Huda-HN]

@diego_ezfy 

Yes , now if perfect thanks 

[AGM_ND]

Can i use this debut customization code for images to slide on products page on my boundless theme ? I would like to do this on my boundless theme

[diego_ezfy]

Hi @AGM_ND,

This specific code unfortunately doesn't work on Boundless, but please reach me out via email for more info:

[email protected]

[akshay202]

Hey Diego,

I am using the Venture theme and facing the same issue of slider for the products.

Can I use the same solution for my theme?

Or do you have any other solution ?

My store url: https://the-pursee-outlet.myshopify.com/

[diego_ezfy]

Hi @akshay202 ,

unfortunately this solution works exclusively for the Debut theme, but please do message me at [email protected] so I can help you out. 

Thank you!

[Luvita]

Hi There

Please could you send us the code for each file? we can't seem to be able to access it on the links you posted. It says the code is outdated.

thanks!

[MSOBallard]

Hi @diego_ezfy 

I updated my product pages with your code a while ago now (thanks!).

However I wondered if you have a solution to pinch and zoom on mobile yet? I believe at the time that functionality wasn't included.

My website for reference is: https://lulludolls.co.uk/

Any help would be great! Thanks for all your great work!

[Sue21]

hi Diego,

do you take personal clients? sorry Im new to this forum and Shopify told me to contact you. I have Debut theme and im stuck on some coding so ill need someone to do it.

[ChrisA]

Thank you for this great feature.  Currently there seems to be a bug that swiping is not possible on iPhone. Could you check?

[alignedmerch]

It looks like the code was removed from github, can you please provide an unpaid link?

[alex_141]

@diego_ezfy this works perfect. thank you

[SamChannon]

Is there a bit of code I can copy paste into my current product templates as I already have custom code with text boxes and custom photo slots