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

Solved

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

diego_ezfy
Shopify Partner
2969 571 915

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)
diego_ezfy
Shopify Partner
2969 571 915

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)
mimsie92
Visitor
1 0 0

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
Tourist
10 0 1

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
Excursionist
21 1 1

Hi Can you please help me out to do that ?

 

diego_ezfy
Shopify Partner
2969 571 915

@Gaarbi 

Hi! Please send me an email:

diego.boarutto.fortes@gmail.com

Thanks!

Gaarbi
Excursionist
21 1 1

Hi Thanks, i have already sent to you from houseofgaarbi@outlook.com

Gaarbi
Excursionist
21 1 1

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
Shopify Partner
2969 571 915

@Gaarbi 

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

diego.boarutto.fortes@gmail.com

Thanks!

Gaarbi
Excursionist
21 1 1

Hi Please check the below,

 

Gaarbi_0-1608297882427.png

email address 

 

houseofgaarbi@outlook.com

Alexos
Shopify Partner
6 1 1

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:

Capture d’écran 2020-08-28 à 14.02.01.png

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

Cheers from France! 

Alex

MSOBallard
Excursionist
19 0 3

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
Tourist
3 0 2

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
Visitor
1 0 0

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
Visitor
2 0 0

@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
Tourist
10 0 0

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

alexialo
Visitor
2 0 0

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
Visitor
1 0 0

I got the same problem.

bellenbloom
Tourist
4 0 2

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
Visitor
2 0 0

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
Tourist
3 0 1

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

diego_ezfy
Shopify Partner
2969 571 915

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
Tourist
3 0 1

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

diego_ezfy
Shopify Partner
2969 571 915

@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
Excursionist
18 0 3

Works perfect , many thanks.

victoria98
Tourist
4 0 1

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!

Screen Shot 2021-01-14 at 10.47.10 AM.png

diego_ezfy
Shopify Partner
2969 571 915

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

diego_ezfy_0-1610670293641.png


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

diego_ezfy_1-1610670317475.png

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

Thanks! 

Kind regards,
Diego

victoria98
Tourist
4 0 1

@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
Shopify Partner
2969 571 915

@victoria98 

Please reach me out via email:

diego.boarutto.fortes@gmail.com

I'll fix it

yashsaini
Tourist
10 0 1

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
Shopify Partner
2969 571 915

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
New Member
6 0 0

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
Shopify Partner
2969 571 915

@Klforres 

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

ezfycode@gmail.com

Thank you!

GiraffeSports
Tourist
3 0 2

hello, any updates to this?

AGM_ND
Tourist
29 0 2

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

jvh5528
Tourist
14 0 2

Hi, is this file still available?

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

This is what I got.

Screen Shot 2021-01-20 at 11.15.10 AM.png

diego_ezfy
Shopify Partner
2969 571 915

@jvh5528 

Hello,

Unfortunately the simple version is not available at the moment.

Kind regards,
Diego

Huda-HN
Tourist
24 0 3

@diego_ezfy 

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

diego_ezfy
Shopify Partner
2969 571 915

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

Huda-HN
Tourist
24 0 3

@diego_ezfy 

Yes , now if perfect thanks 

AGM_ND
Tourist
29 0 2

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
Shopify Partner
2969 571 915

Hi @AGM_ND,

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

ezfycode@gmail.com

akshay202
Excursionist
13 0 2

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
Shopify Partner
2969 571 915

Hi @akshay202 ,

unfortunately this solution works exclusively for the Debut theme, but please do message me at ezfycode@gmail.com so I can help you out. 

Thank you!

Luvita
Excursionist
55 0 9

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
Excursionist
19 0 3

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
Visitor
1 0 0

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
Visitor
3 0 0

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

alignedmerch
Tourist
10 1 4

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

alex_141
Tourist
4 0 2

@diego_ezfy this works perfect. thank you

SamChannon
Visitor
1 0 0

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