🌟Learn the JavaScript side of Shopify Development: codingwithjan.com/javascript?src=product-slider-yt 👨💻Find a reliable Developer for your project: www.codingwithjan.com/hire-a-developer
Hello! It dosent work for me at all :( the slide dosent slide, and my product pictures are too big, and the slider isnt one row at all. It is just messed up.. can you please help me.. what am i doing wrong? Im using the theme: Envy, is that the problem?
Hi jan thank you for this tuturial. I was implimenting the same code but my slider images are differnt sizes and slider also not working can you help me out from this
following the video exactly and copy pasting the code the slide show ends up almost taking up the whole page with the product images HUGE. what am i missing here? lol. using the dawn theme if that matters. and i implemented it in theme.liquid after the last script before the body
Thank you once again Jan! Without you I would have been very stuck! If possible I have two simple ish ideas for tutorials. One, for a shipping deadline clock for product pages that can be custom set to desired time and can skip Sundays. Second, very similar to how to add custom product options with added cost, without the use of an App
Thank you Jan for the video! I have a quick doubt. When implementing the solution for the Narrative Theme, the prices and title of the products appear underlined in a not very pretty way. Do you know where this settings are stored? Its the only place on my store where prices and titles appear in such a way which i find odd. Thanks!
Hello I have pasted the file as u said but it still does not adjust on my homepage. Its taking too mich space of the homepage and is not showing as in your video at the. Could u please help.
Hi Jan, been a while :) curious, why didnt you use the slick slider being utilized in the debut theme already? Also any chance you will make a slider option for the product images :)? I had a question about developing overall. I've been developing for clients for a while now. Sometimes I noticed when developing new elements such as the footer/buttons. When the page loads, itll show the base element, before the css takes effect. for example. the ul in the footer shows as a list for a split second before the css loads. or a button I develop shows a basic button before css loads. How do you solve the preload of the element so it doesnt show the base look before the css loads
Hey John, welcome back, hope you're doing great 😁 Had an older video like this where I used slick, but apparently it was removed from debut and people struggled to add the library so here I went for a different route. :-) Regarding your questions, it sounds like your CSS loads after the elements. Are you including it in your head-tag or rather right before the body-tag closes? Also, for testing you may want to disable your browser cache. Hope one helps and have an awesome weekend :-)
@@CodingWithJan Hi Jan, thanks for the reply and ahh I see! I guess time to move on to flickity. Which do you suggest is better swiper.js or flickity? On the second note, I am using the debut theme, and ahh is it because of the preload cache?
Hello Jan Thank you so much for your help, i have a question about Texte fonts and Price color, how can i change them for product slider ? Waiting for your answer Thak you Again
Hi Jan, I have bought the commercial license because I thought that I needed it to launch my slideshow publicly. Do you know how to install this? Gr Wouter
Hi Jan, I am looking to replace the product image slider with a carousel slider; my Shopify Theme is the 'Simple' theme. In my product-template.liquid file; what content do I need to replace to change the product image slider to a new carousel slider? Thank you!
great vid! Does the content in the slider have to be a collection? I want to add a size chart for canvasses as a slider just jpgs, preferably in a popup. I could make a dummy product and just have the pictures of sizes in there but then would I be able to hide that dummy product from the rest of the site?
Hi Jan! Thank you so much for this tutorial! I was wondering how to adjust the number of product images displaying on the slide, so that on mobile version it would be 3 images/products (1 in the middle, and the two other images on the left and right are only showing half) instead of just one product image showing. Thanks you!
Excellent video! I would like to ask for help, how do I increase the font size of the product title product?? on mobile, on mine, the font was too small! I don't know much about codes so I would like to know. Thanks!
@@CodingWithJan Hello dear, thank you very much for your help it worked! do you have a video on your channel on how to make this same product slider carousel, with the featured collections that are below the banner, just like the warehouse theme?? Hugs from Brazil!
Unfortunatly I don't have a tutorial for a section like this. I would recommend hiring a developer who will build it for you. We can help you get in touch with one codingwithjan.com/developers Cheers 😁
Hi jan, can you tell me how I can make the slider endless? I mean that it should be like a endless loop, the slider stops at the last product but i don't want that. Great video
You are the best Jan! Keep up the good work! On a slightly different note, in your Freemote course, any chance you go into creating mega menus? Thank you.
Hey Ronn, thanks much :-) As for mega menus, we don't cover those specifically yet. However, after completing the HTML, CSS and JS Sections, you'd be able to set these up, as they only require general web development knowledge and not soo much platform-specific knowlege.
Hi jan, it seems to be working for me but I do seem to have a problem with my image sizes on the carousel. Some of the images are overlapping others? I am new to working CSS and i am sure it will be an easy fix but i would really appreciate your help. 😊
Hi Jan I love your videos, check! I want to make this same slider, but with collections not with products ... can you give me a clue? I think I should change in the loop for the part of products by collections and generate blocks in the front to select which collections I want to see
Hi Jan! thanks for shearing your knowledge :) is it possible to make the slider infinite? Like when i get to product 12 then it starts again with the first.
Do you have any videos on a slide-show style hero section with Stick Nav, I want the nav to be translucent on the slider, but opaque or its original color of #FFFFFF when its scrolls pass hero section how can I achieve this can I email you or can you do a video on this feature. Please and thanks
Hey there, it's super hard to create a drag-and-drop customizer or a live rendering of a customized product. Would probably take me several days as well to come up with a good solution. Regarding technology, I'd say becoming really good at JavaScript would help. I'd start by researching 3rd party software first.
@@CodingWithJan Agreed with you. its hard but the most demanding thing for merchants right now. like i know it involves css canvas + js. but still there is no any tutorial or info about them on the internet anywhere that is the main hurdle for me right now to learn about them. What is the specific term i could search to learn about them?
@@CodingWithJan i will try to find more about these plugins and eagerly waiting for your tuts on this side. Because none of the app dev in my circle knows about it. So it would be a very helpful discovery. Thanks alot again Jan.
Thank you Jan for an amazing lesson! :) If I would like to style the arrows - can you guide me through that? Etc make the arrows white - with a 35% transperent black background :)
Hello Jan, your videos are just great and have brought me further! Now a question, is there a way to translate products and all associated fields without plugin? About an ERP system, for example, or an API? Do you have a solution? Best regards Jonas
Hey Jonas, You'd definitely want to go for a plugin. I'd recommend langify. Otherwise you'd need some custom coded solution, but that will exceed the costs by far.
Hey David that would require to tweak the code a bit. If one is familiar with html and css it's actually not too difficult, but otherwise you might consider seeking a bit of help here.
Maybe issue with js or maybe you didn't linked files propetly of flickity. One solution is to Press f12 on chrome and click on console tab where you clearly see the error of flickity in red.
Hi, the process is kinda similar. Unfortunately, the video pipeline is quite busy with other topics right now. The fastest I could do is help you find a developer: www.codingwithjan.com/hire-a-developer Let me know if interested. :-)
Hello Jan good to see you again, You always help me a lot, I have a question THat I always want to ask. What is the best way to learn javascript, Can you suggest to me,the best source to learn complete javascript or at least 70% . I am sure you can help me.Please
@@CodingWithJan You are right But I have already jumped into Shopify and I am earning 1000+ $ per month but I can make any feature using HTML CSS JS AND LIQUID on free themes But When I worked on premium themes I stuck there. I just want some guideline
🌟Learn the JavaScript side of Shopify Development: codingwithjan.com/javascript?src=product-slider-yt
👨💻Find a reliable Developer for your project: www.codingwithjan.com/hire-a-developer
This man exactly knows what we need in Shopify rather than drag and drop thnku brother ❤❤❤
WOW. You 're the best channel for shopify users. No doubt. THANK YOU
Hey Fernando, thank you so much 😀
Excellent stuff. Works in debut theme but not in dawn
Thank you Jan, you're a star!
☺☺
thank you so much! This is much simpler than the slick...
Thank you! It worked for me right off the bat. Just needed a little CSS work and all good!
Excellent! Glad it woked well for you 🙌🏻
Your videos are so very helpful. Thanks a bunch !
Hello! It dosent work for me at all :( the slide dosent slide, and my product pictures are too big, and the slider isnt one row at all. It is just messed up.. can you please help me.. what am i doing wrong? Im using the theme: Envy, is that the problem?
same here, any solution?
This is what I needed. Thank you so much.
it didnt work at dawn theme any reason ?
Incredible helpful, you are the best!
Hi jan
thank you for this tuturial. I was implimenting the same code but my slider images are differnt sizes and slider also not working can you help me out from this
following the video exactly and copy pasting the code the slide show ends up almost taking up the whole page with the product images HUGE. what am i missing here? lol. using the dawn theme if that matters. and i implemented it in theme.liquid after the last script before the body
Can options like compare at price or view all be added to this slider??
Thank you once again Jan! Without you I would have been very stuck! If possible I have two simple ish ideas for tutorials. One, for a shipping deadline clock for product pages that can be custom set to desired time and can skip Sundays. Second, very similar to how to add custom product options with added cost, without the use of an App
Thanks for this video. It is helpful.
you are welcome 👍
my slide show is vertical without the . how do i fix that?
Hi! i just did this but everytime I add a section. I get two sections. any way to fix this?
This doesn't work for me (DAWN theme 6.0.2v)
Thank you Jan for the video!
I have a quick doubt. When implementing the solution for the Narrative Theme, the prices and title of the products appear underlined in a not very pretty way. Do you know where this settings are stored? Its the only place on my store where prices and titles appear in such a way which i find odd.
Thanks!
Hello I have pasted the file as u said but it still does not adjust on my homepage. Its taking too mich space of the homepage and is not showing as in your video at the. Could u please help.
Hi Jan, been a while :) curious, why didnt you use the slick slider being utilized in the debut theme already? Also any chance you will make a slider option for the product images :)?
I had a question about developing overall. I've been developing for clients for a while now. Sometimes I noticed when developing new elements such as the footer/buttons. When the page loads, itll show the base element, before the css takes effect. for example. the ul in the footer shows as a list for a split second before the css loads. or a button I develop shows a basic button before css loads.
How do you solve the preload of the element so it doesnt show the base look before the css loads
Hey John, welcome back, hope you're doing great 😁
Had an older video like this where I used slick, but apparently it was removed from debut and people struggled to add the library so here I went for a different route. :-)
Regarding your questions, it sounds like your CSS loads after the elements.
Are you including it in your head-tag or rather right before the body-tag closes?
Also, for testing you may want to disable your browser cache.
Hope one helps and have an awesome weekend :-)
@@CodingWithJan Hi Jan, thanks for the reply and ahh I see! I guess time to move on to flickity. Which do you suggest is better swiper.js or flickity?
On the second note, I am using the debut theme, and ahh is it because of the preload cache?
Hi Jan, appreciate your guidance with this video. how this is gonna work with shopify 2.0 ?
Hello Jan Thank you so much for your help, i have a question about Texte fonts and Price color, how can i change them for product slider ?
Waiting for your answer
Thak you Again
How can I add the reviews´ products under the price?
thank you so much this is so much valuable
Thanks a lot for the video.
Hello! I am Carla ... I am having trouble with the size of the image. Any want that can help me??
will it work on dawn theme as well ?
Hi Jan, I have bought the commercial license because I thought that I needed it to launch my slideshow publicly. Do you know how to install this? Gr Wouter
Hey Jan this video isn't working for the narrative theme... is there any difference? Thanks in advance
Hi jan, the collection isnt sliding for me.
Hi Jan, I am looking to replace the product image slider with a carousel slider; my Shopify Theme is the 'Simple' theme. In my product-template.liquid file; what content do I need to replace to change the product image slider to a new carousel slider? Thank you!
great vid! Does the content in the slider have to be a collection? I want to add a size chart for canvasses as a slider just jpgs, preferably in a popup. I could make a dummy product and just have the pictures of sizes in there but then would I be able to hide that dummy product from the rest of the site?
👍🙏 thanks a lot Jan!!!!
Welcome!
Where did you get that shirt m8? It's really nice.
Hi Jan,
How to add product comparison price in this?
and how to allign text to center of image?
Hi, jan. Thanks for another great tutorial. Could you please share how to speed up shopify website?
Working on it :-)
@@CodingWithJan wow! Eagerly waiting for that. Thanks a lot.
@@CodingWithJan Thanks for working on my suggestion, Love from Pakistan
Hey Jan, thank you for this, but please how to make an existing collection section to be slided?
Thanks for the tutorial, but I think it won't work on CRAFT theme 2.0
Hi Jan!
Thank you so much for this tutorial! I was wondering how to adjust the number of product images displaying on the slide, so that on mobile version it would be 3 images/products (1 in the middle, and the two other images on the left and right are only showing half) instead of just one product image showing.
Thanks you!
would be very interesting, got a solution?
Great video but how do I center collection slider description and pricing?
Danke dir.
Two like from me 👍✌🏻before I watch the video 🤩🎓
Hey ismail thank you so much.
How to the slider in the collection list, please.
Hello it unfortunately doesnt work for me in debut could someone help me out?
can you make autoplay?
Good day Mr. Jan! ✨ Is it also possible to apply it on dawn theme? Btw, thank you so much for all of your content, I've learned a lot 🎉🎉😊
Hey Arvy, yes you can apply it on Dawn theme!
It would be even easier since you can use the section everywhere 😉
I don't get it . Am I an Idiot cause seriously I don't get it. I did everything to the letter and yet still my images are LARGE
I'm having trouble with JSON errors on schema. Can you pls help on what to do now?
Copy everything inbetween the schema tag to a "json validator"
(easy to find on Google)
Excellent video! I would like to ask for help, how do I increase the font size of the product title product?? on mobile, on mine, the font was too small! I don't know much about codes so I would like to know. Thanks!
Hey Hélio,
You can change the font size in your theme > customize > theme settings > typography
Have a nice day! :-)
@@CodingWithJan Hello dear, thank you very much for your help it worked! do you have a video on your channel on how to make this same product slider carousel, with the featured collections that are below the banner, just like the warehouse theme?? Hugs from Brazil!
Unfortunatly I don't have a tutorial for a section like this.
I would recommend hiring a developer who will build it for you.
We can help you get in touch with one codingwithjan.com/developers
Cheers 😁
@@CodingWithJan Great thanks a lot ✌
hii Jan
how I can create blog slider from this
Best tutorial, thank you so much, may God bless you and Jesus loves you :)
Is it possible to use an image slider instead of a product?
Hi jan, can you tell me how I can make the slider endless? I mean that it should be like a endless loop, the slider stops at the last product but i don't want that. Great video
I think the option is called
"wrapAround": true ,
You can just add it on top of the others and don't forget the comma at the end of the line
:-)
@@CodingWithJan Works flawlessly, I just made this alteration also, many thanks
You are the best Jan! Keep up the good work! On a slightly different note, in your Freemote course, any chance you go into creating mega menus? Thank you.
Hey Ronn, thanks much :-)
As for mega menus, we don't cover those specifically yet.
However, after completing the HTML, CSS and JS Sections, you'd be able to set these up, as they only require general web development knowledge and not soo much platform-specific knowlege.
Hi jan, it seems to be working for me but I do seem to have a problem with my image sizes on the carousel. Some of the images are overlapping others? I am new to working CSS and i am sure it will be an easy fix but i would really appreciate your help. 😊
Hey Matthew,
You can try to add some margin between the images:
.your-image-class{
margin-right:10px
}
@@CodingWithJan HI Jan, Thanks for coming back to me so quickly, where would this need to be added?
very nice
Hij Jan, the code its not working, the codefile, can you fix it ?
Hi Jan I love your videos, check! I want to make this same slider, but with collections not with products ... can you give me a clue? I think I should change in the loop for the part of products by collections and generate blocks in the front to select which collections I want to see
I'd love this too!
Slider is not working on Brooklyn theme
Amazing content
Hi Jan thanks for the tutorial. Can you please create a tutorial about to remove cart item using ajax call. Not using line=1& quantity=0.
🙏
Thanks Jan can you please make a video how to apply count down on the products thanks in advance
Not planned in the near future but I'll put it on my list. Thanks for the suggestion 👌
@@CodingWithJan Yeah i think this would be a good one!
Hi Jan! thanks for shearing your knowledge :) is it possible to make the slider infinite? Like when i get to product 12 then it starts again with the first.
Yes, I think the option is called
"wrapAround": true ,
You can just add it on top of the others and don't forget the comma at the end of the line
:-)
@@CodingWithJan Thanks! it worked perfect :)
Do you have any videos on a slide-show style hero section with Stick Nav, I want the nav to be translucent on the slider, but opaque or its original color of #FFFFFF when its scrolls pass hero section how can I achieve this can I email you or can you do a video on this feature. Please and thanks
I don't know what I did wrong but when i tried it, the collection is positioned vertically instead of horizontal :(
Same! If you know what's going on, pleeeaase tell me I'm desperate
Ok, I think it might have to do with not using Debut, if you still need that info
please make a guide which technology i need to learn to make that product customizer canvas? is there any special tutorial you can recommend me?
Hey there, it's super hard to create a drag-and-drop customizer or a live rendering of a customized product.
Would probably take me several days as well to come up with a good solution. Regarding technology, I'd say becoming really good at JavaScript would help. I'd start by researching 3rd party software first.
@@CodingWithJan Agreed with you. its hard but the most demanding thing for merchants right now. like i know it involves css canvas + js. but still there is no any tutorial or info about them on the internet anywhere that is the main hurdle for me right now to learn about them. What is the specific term i could search to learn about them?
Maybe this could help to get started, haven't used it yet but looks quite interesting actually:
fancyproductdesigner.com/jquery/
@@CodingWithJan thanks alot Jan for your help. I already subscribed you and you are the best person out here to help sopify merchants as well as devs.
@@CodingWithJan i will try to find more about these plugins and eagerly waiting for your tuts on this side. Because none of the app dev in my circle knows about it. So it would be a very helpful discovery. Thanks alot again Jan.
make a video on ajax cart drawer
Hey, thanks for the suggestion, it's noted😃
Link of code is not working why??
Thank you Jan for an amazing lesson! :)
If I would like to style the arrows - can you guide me through that? Etc make the arrows white - with a 35% transperent black background :)
Hello Jan, your videos are just great and have brought me further!
Now a question, is there a way to translate products and all associated fields without plugin? About an ERP system, for example, or an API? Do you have a solution?
Best regards
Jonas
Hey Jonas,
You'd definitely want to go for a plugin. I'd recommend langify.
Otherwise you'd need some custom coded solution, but that will exceed the costs by far.
hey nice vid! :) Can you tell me how I can do a Product Slider on the Cart Page?
Hey David that would require to tweak the code a bit. If one is familiar with html and css it's actually not too difficult, but otherwise you might consider seeking a bit of help here.
@@CodingWithJan okay thanks !
@@CodingWithJan Hey Jan please make video on this
Hello Jan! I have a question. Flickity slider doesn't work until I refresh. do you have any solution of it??
Maybe issue with js or maybe you didn't linked files propetly of flickity. One solution is to Press f12 on chrome and click on console tab where you clearly see the error of flickity in red.
@@Aerotk I tried that but it has no error. it just you need to refresh the page to activate the flickity
Hey AchiLes, try to load the page withut the customizer.
Like well earned.
Error parsing data-flickity on products-carousel js-flickity: SyntaxError: Expected property name or '}' in JSON at position 4 (line 2 column 3)
Syntax error means there's probably a mismatching bracket or comma.
ChatGTP can help you correct this.
code link is not working plz give a new link
Can you explain us howto do this type of slides on single product pages this is what i really want to know
Hi, the process is kinda similar.
Unfortunately, the video pipeline is quite busy with other topics right now.
The fastest I could do is help you find a developer:
www.codingwithjan.com/hire-a-developer
Let me know if interested. :-)
Hello Jan good to see you again, You always help me a lot, I have a question THat I always want to ask. What is the best way to learn javascript, Can you suggest to me,the best source to learn complete javascript or at least 70% . I am sure you can help me.Please
Hey Rizvi, once you understand the basics of JS, I'd say the best way to level up is by solving smaller exercises and challenges.
@@CodingWithJan You are right But I have already jumped into Shopify and I am earning 1000+ $ per month but I can make any feature using HTML CSS JS AND LIQUID on free themes But When I worked on premium themes I stuck there. I just want some guideline
Hello Jan!
Hello Hello 😃
the code file link is broken
it dont work for me i dont know what i do wrong
resource link is not working i want this code please give me this code
still works. just double checked
Open with VPN
isn't better to use SwiperJS?
Hey Andrew, could also work thanks for the tip.
completely not worked on dawn them
works in brooklyn?
As far as NYC goes, yes. As for the theme, I'd say yes too, but I'm only 95% sure if the styling will hold. So you would have to test that quickly.
@@CodingWithJan Thank You Jan, this works just fine in the brooklyn theme
Didnt work images to big ... i want to cry :(
not working
Hello! Check the email with a letter of cooperation (ConveyThis)
The rural banker causally provide because swan unequivocally amuse among a black-and-white haircut. helpless, tested chive
Worked like a charm! I changed a line of code so that it would swipe to 100+ options ruclips.net/video/j12xumn14yU/видео.html 22 : 36