Shopify themes, liquid, logos, and UX
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!
Solved! Go to the solution
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
@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!
@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.
Which browser are you in? Could you please record a video of it?
@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.
@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.
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?
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
Perfect! If you need anyone to test it out I would happily help!
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
@yashsaini
Can you send a screenshot please?
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
@yashsaini thanks for the heads up, I'll get it fixed now.
So i have just checked with new Updated Code , Problem is still there... & i'm using Debut Theme
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.
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
Hi
i have check on both mobile and destop... problem was on both.
@yashsaini
Can you send your website's URL via private message or e-mail, please?
is this the right email : diego.boarutto.fortes@gmail.com
yes, that is it
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!
@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
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
@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.
Video Support! Yayyy!
Appreciate it brother!
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!
@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.
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.
Can you share your website URL so I can debug it?
@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
@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
@nikhil0189 also keep in mind you should try this on an incognito page to avoid cache issues.
@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!
Thank you very much!
This did not work on mine. Do you think you can take a look?
Thanks!
Sheryl
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?
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
hope it helps you @MSOBallard!
no problem, yes, the links remain the same, I just update the code in the same link.
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!
@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
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.
How did you end up solving this?
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?
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!
@diego_ezfy This is fantastic!! It works perfectly! Thank you soooo much for sharing this!!
@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!
@klau
You're welcome! Unfortunately I don't have anything like that.
Kind regards,
Diego
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
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
As 2024 wraps up, the dropshipping landscape is already shifting towards 2025's trends....
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024