Shopify how to create a Featured Product Slider

Рет қаралды 154,981

4 жыл бұрын

We will create a featured collection slideshow for our Shopify homepage. I'm showing you step-by-step how to implement this product carousel within the debut theme.
► Free Help
--------------------------------------------------------------------------
🎯 Get Personal Career Advice for Shopify Developers:
codingwithjan.com/personal-ca...
👨‍💻 Find a qualified Shopify Developer for your next project:
codingwithjan.com/hire-a-deve...
► Contact
--------------------------------------------------------------------------
🌐 Website
codingwithjan.com
🤝 LinkedIn
/ jan-frey
► SEO Description
-------------------------------------------------------------------------
Most themes in Shopify already come with some slideshow functionalities. These themes will probably use a Javascript library. I think these days Slick and Flickity are the two most popular slider libraries you will find across themes in Shopify. In this video, you will also find a brief introduction to these libraries as well.
If you are interested, this is the Slick Config I personally prefer:
{ slidesToShow:num_slides, infinite:true, autoplay:3000, draggable: false }
codingwithjan.com

Пікірлер: 397

@CodingWithJan 2 ай бұрын

🎯 Get Personal Career Advice for Shopify Developers: codingwithjan.com/personal-career-advice 👨‍💻 Find a qualified Shopify Developer for your next project: codingwithjan.com/hire-a-developer

@ThinkTeky 4 жыл бұрын

This is exactly what I was looking for. excellent job Jan ! Keep up the great work.

@tierrarara 2 жыл бұрын

Wow, you are a great teacher -> shopify and programming tutorial at the same time

@martinaquondamatteo1855 3 жыл бұрын

Thank you so much Jan! This is the 3rd tutorial I follow and you make coding really easy! Without your help I wouldn't have been able to implement and improve the outlook of my store!

@mohammadabueid508 3 жыл бұрын

Hi, i followed exact steps but it didn't work. is there any installations required or other steps i missed? Thanks in advance.

@LovedbytheMostHigh9353 4 жыл бұрын

You’re an amazing teacher👍 keep up the great work. Keep the videos coming 🤗

@moz007 3 жыл бұрын

Thank you so much bro

@aypee6274 4 жыл бұрын

THANK YOU!!!! OMG THIS WORKS. Been looking for a video like this

@berkonal3055 3 жыл бұрын

I was looking for it Jan. You are awesome mate

@iLoveTurtlesHaha 3 жыл бұрын

I liked the video before watching because this guy is always good. 👌

@YourFactotum 3 жыл бұрын

Thank you for this tutorial. I broke many things along the way, but finally got it working! So well, in fact, that I created ANOTHER collection slider, set to autoplay. Which is where my question comes in: How would one turn off displaying title and price on the carousel, but just THAT type (meaning only the auto carousel displays product image only.) I suppose, if my coding were better, I could just throw those options into the template, but I'm perfectly happy with having two.

@davidjenkins4453 3 жыл бұрын

Thank you times a million for this video!

@tiagomacedo7702 3 жыл бұрын

What an excellent tutorial! Thank you and keep the good work.

@CodingWithJan 3 жыл бұрын

thank you very much i will do my best 😁

@Manup97 4 жыл бұрын

Thank you for sharing such a great and free content Jan!

@CodingWithJan 4 жыл бұрын

Hey W Hong nice meeting you 😃 Thanks for your awesome feedback :-)

@alvipixels9701 2 жыл бұрын

Thanks for this amazing tutorial, it was a great help

@jaichand7416 3 жыл бұрын

Hi bro, right now working my js Thanks for this great tutorial

@2ntuan 4 жыл бұрын

Thanks for sharing your knowledge. Very love your video! Appreciate it man!

@CodingWithJan 4 жыл бұрын

Fantastic to see you still enjoy the content !! Thank you for the good vibes :-)

@shiktoahmed5746 4 жыл бұрын

It's very helpful tutorial. Thanks

@rolandasgocelkis100 4 жыл бұрын

This is amazing, man! All your videos are freakin value bombs. Your tutorials are not boring, super practical and straitgh to the point. Love it! Learning from you a lot. PLEASE KEEP GOING, BRO!

@rolandasgocelkis100 4 жыл бұрын

By the way, there is no image slider on product page in Debut (end user needs to click on thumbnails to change an image on all screen sizes) It would be amazing if you could teach us, how to do product page inages slideable.

@dmitrybkv 4 жыл бұрын

@@rolandasgocelkis100 There is a discussion on this topic with steb-by-step instructions on the Shopify Community forum community.shopify.com/c/Shopify-Design/Turn-thumbnails-into-a-slider-Debut-Theme/m-p/400018/highlight/true#M104038 I tested that approach on one of the older Debut themes, about a year ago, it worked fine.

@CodingWithJan 4 жыл бұрын

Hi @@rolandasgocelkis100 , nice to meet you :-) It´s a little bit tricky, but the product gallery is also built with slick. The slider is just not draggable and the thumbnails are then set as the slider-navigation. When some clicks on a thumbnail, the slider would jump to that slide. That tutorial from Dmitry looks pretty promising. If you test it, let me know if it works for you as well. Also thank you for your amazing feedback :-)

@CodingWithJan 4 жыл бұрын

Hey@@dmitrybkv , thank you for sharing. Didn´t know this exists and it looks very promising and in-depth. :-)

@samuelthomas7345 3 жыл бұрын

Hey Jan, thanks for the incredible tutorial - not the first of your videos that I have benefitted from. I am having trouble getting the slick to work though? Even in the Chrome Console it wouldn't work. I wondered what I was doing wrong? Do I have to add slick files to my shopify theme? Thanks again!

@jeanmorrison6422 3 жыл бұрын

😲 this is what i am looking for.. great job..

@ankushkumar6113 4 жыл бұрын

Hello Jan, Thanks for creating this tutorial, this helped me much. As of now, my store is already linked with slick library and slick slider is working fine. The only thing is not showing are L/R Arrows. In my theme even option is available to display/hide arrows, but arrows are not visible. What could be possible reason of this..please let me know.

@juankrov1612 3 жыл бұрын

Hi Jan, great videos. I have just a quick question. I was wondering how you can modify the code to have in one raw 2 images side by side of a product in mobile view. I noticed that 2, 3 , 4 images can be appear side by side on desktop, but in mobile they appear one below the other. How can you edit the theme (I have impulse) to show 2 images of a product side by side on mobile view

@kdancer510 4 жыл бұрын

Hi Jan - Thank you so much for this video! I followed your instructions and it worked perfectly just as described. However, since then we've had issues with our homepage slideshow banner not showing up on all web browsers and the javascript from your tutorial not working for the featured collection carousel on Firefox browser. Any ideas on why this is happening? Thank you in advance!

@ankewonder1514 3 жыл бұрын

Hi Jan, thank you for the video. I am trying to also add such a slider for my product pages. It would be great if you could a video about that as well!

@jugorun 4 жыл бұрын

It was very useful, thank you! I just noticed that there's no other function in the theme js using this document ready method, but I did see some functions starting with something like 'theme.Slideshow`. So I'm wondering if theres a way to run a function only when X section is loaded. I did some research and I couldn't find something. Does anyone know if it's possible?

@backbeatbooksandmusic9967 4 жыл бұрын

Hello Jan, Great video and instructions are nice and clear but I've now watched it 4 times over the past month and am still stuck. Just getting a big blank space where the slideshow should be. Doesn't seem to keep it to one row and not showing anything. Shoot, I was hopeful this would work for me as it is exactly what I'd like and haven't seen another solution to achieve this type of featured product slider. Not sure where to go for help at this point, any advise?

@brianamakes 3 жыл бұрын

Hi Jan, thank you for providing this tutorial. Unfortunately, I’ve been unable to make this work on my site. I’m using Debut and have followed this video step-by-step, and it does not create a slider. Any advice?

@bularistech110 Жыл бұрын

very usefull tutorial thanks

@debchan5048 4 жыл бұрын

Thank you so much, i have spent 2 days digging into this topic, but in vain. My slider has finally built after watching your video. Wish i found your video earlier.. btw.. do you know how to upload html file (made with dreamwaver/photoshop) to shopify? Thanks a lot!

@zaxariasghadienski9756 2 жыл бұрын

Jan du bist der Beste !

@bizstories2023 4 жыл бұрын

Great Video..You are soooo amazing ...Thank you for sharing the knowledge, it's a great help to us.

@CodingWithJan 4 жыл бұрын

Super welcome :-)

@emmanuelehinomen8266 2 жыл бұрын

This is really Amazing

@ppaul0612 3 жыл бұрын

Hello Jan. I would like to see a video on how to create a carousel slider under the product page, as most of the themes doesn't have these feature. xD

@muhammadshahidiqbal3331 3 ай бұрын

Hey Jan ! Thank you for such an amazing content.Please make a video on how we can add a slider in product cards.because I want to show product second image by slide not by hover .Thank you again

@mcleanalley 4 жыл бұрын

What a great video! Thank you so much! Could you please help with the mobile view you mention at minute marker 17:36? I placed the code as you described, but when I load it, the slider function goes away on desktop and mobile. Can you offer any solutions? Thank you!

@leveenanderson4400 4 жыл бұрын

Hi Jan , congratulation on the great responses toward this immensely helpful video , I tried implementing the same for collection lists as I want to list the categories of my site in the form of a carousel unfortunately came out short any tips would be immensely helpful

@Stoneandquartzsurfaces 4 жыл бұрын

Thank you so much for your tutorial is super good. I need help with slideshow homepage debut text overlay. question: do you know that in Debut theme in the Slideshow text overlay in DESKTOP goes inside the picture and looks super nice BUT in MOBILE is on the bottom almost outside of the slideshow and looks super BAD on the mobile website. Can you please help us to fix that problem. Thank you

@Jacob-ly1wr 4 жыл бұрын

Hello Jan, thanks for a great video - it worked great for me. Is it possible to apply slick and this method to the recommended items on the product page? That would be a cool modification!

@gustavodutra9267 3 жыл бұрын

This is amazing! Jan do you know how to change the arrows?

@mihirrathod1537 3 жыл бұрын

Thank you for this video. It's Working.

@icywrath5384 3 жыл бұрын

Hi, I just followed the steps, but it didn't work for me. How did you get it to work?

@elbekart4359 4 жыл бұрын

Awesome Tutorial bro

@daycarekart1504 4 жыл бұрын

Omg, You have created this on my demand, Here's the biggest thanks from my side, You are just amazing 🤩🤩

@CodingWithJan 4 жыл бұрын

Hey, great to see you back here :-) Really liked your idea! Hope you enjoy 😃

@daycarekart1504 4 жыл бұрын

It's very useful video, really liked it. Actually I'm using Brooklyn and unfortunately it is not working on brooklyn theme but It's very video for many others

@CodingWithJan 4 жыл бұрын

@@daycarekart1504 yes, the Brooklyn theme has a very different "featured-product-section". Building a slider from there wouldn´t make to much sense :D I think in that case you´d need to create the section from scratch. This would probably require some experience in HTML, CSS, and Liquid though. :-)

@RiderDe74 4 жыл бұрын

@@CodingWithJan Aaah too bad, I was following your tutorial until I realised you were not on brooklyn theme ! :/

@kilianramirezelias3642 4 жыл бұрын

Hi! The channel is fantastic, well describe and easy to follow. I have a problem because you have changed a featured list in a particular theme but not all of them are the same. In brooklyn for example the featured collections are only avaliable in collage or normal, I cannot select how many products or rows.

@jahmyire66 4 жыл бұрын

Hi Jan. Love the vid! How do you change the arrow icons?

@antoanetadudova4188 2 жыл бұрын

Hi Jan, excellent work. Do you have something similar for the Brooklyn theme?

@likklemiss87 4 жыл бұрын

Thank you so much, great video! New subbie 😊

@CodingWithJan 4 жыл бұрын

Welcome :-)

@likklemiss87 4 жыл бұрын

@@CodingWithJanCan I ask you a question please? I'm trying to recreate something like this - trackstore.qodeinteractive.com/dual-carousel-home/ I am following your video, so have chosen to use slick slider. Would the "Data attribute settings" be the correct one? Or maybe "Slider syncing"? I'm new to Shopify but eager to learn

@DJsingh92 3 жыл бұрын

Hello Jan, thanks for the tutorial. The minimal theme in Shopify is using the flex alider. I tried creating a product slider in minimal theme using flex slider but it just doesn't work. You have any idea why it isn't working.

@lapreghierasemplice 4 ай бұрын

great!!! Thanks

@nataliabrown4417 3 жыл бұрын

Anyone who is having issues calling the .slick() function in the latest version of Debut, you have to add slick.js to your theme.liquid file either add the cdn or download the files and upload to your assets folder. There are instructions on the website: kenwheeler.github.io/slick/. Then make sure you write the CSS in the correct format e.g .collection-slider .product-card {} instead of .collection-slider { .product-card {} } as SCSS and CSS are written slightly differently. Hope this helps anyone struggling! Worked for me and looks awesome thank you so much Jan. I have watched so many of your videos for help!

@unaizakhan6729 3 жыл бұрын

Umm hey, I'm still having the problem even after uploading the files. If you could please help?

@mohammadabueid508 3 жыл бұрын

Hello Nat, is there a video for this? i downloaded from slick, but what should i do next?

@nataliabrown4417 3 жыл бұрын

@@mohammadabueid508 You have to reference it in your theme.liquid. There are l videos on KZfaq that should help and it gives you the code to reference files on the slick js website, look at the bottom of the page. Hope that helps.

@elinamakeva2270 3 жыл бұрын

Hey great work looks great...Just a few questions..is there any way to make the slides scroll over more than one product, so to give it a free scroll (especially important for touch screen devices) and secondly..is there a way to make the arrows bigger and appear on the side (more higher up) than on the bottom of the slideshow? Please let me know, if anyone has an answer :)....

@ezaldeenshoqairy8796 4 жыл бұрын

Hello Jan, Is it possible to add a slider like this one into another page of my website not the home page? If yes can you tell us how so Thanks a lot for all of your videos great work man!

@JaSon-ex3zu 3 жыл бұрын

Hi Jan, Do you know how to remove the arrow buttons at the bottom of the slideshow? I hate how they look and they are not necessary for most sites. Using Debut theme, if that matters. Thanks!

@sesumivan 2 жыл бұрын

Hi Jan, Is there a way to show product categories ( bracelets, rings...) not a single collection in the slider?

@supernova4760 2 жыл бұрын

Very well presented and professional.

@CodingWithJan 2 жыл бұрын

Thanks for your kind words 😁

@rohitparakh4 4 жыл бұрын

Great Video! Worked pretty well! I also want a similar things for colletion list...i have tried but can't get the results...help would be appreciated!

@madmanga64 4 жыл бұрын

Great video !

@muneebshoukat4793 2 жыл бұрын

your teaching style is awesome. I love it. you got new subscriber. Thank you.

@CodingWithJan 2 жыл бұрын

Welcome aboard Muneeb! 🎉

@muneebshoukat4793 2 жыл бұрын

@@CodingWithJan I just customised my theme.. which is totally different with your theme. But thankfuly I can understand liquid. So I implemented the slider.

@adalidaborip1726 4 жыл бұрын

How can I put the arrows on the main product photo on the product page? I am using Debut theme and I already changed the file theme.js - settings - arrows: true, but I still don't see results. can you help me? You are making a great job. Thanks.

@hacinemichael3220 3 жыл бұрын

Hi Jan, First of all, thanks a million for your tutorial a real treasure and a pleasure to watch. I have been trying to create a product thumbnail slider Shopify but been stuck on it for a week! Can you help please? All the best and please keep up the good work

@angelajackson3273 3 жыл бұрын

Thanks a lot Jan

@CodingWithJan 3 жыл бұрын

you are welcome :)

@AmanpreetSinghCHD 3 жыл бұрын

hi thanks for this how to make the product gallery where the there is a featured image and then the in bottom is thumbnails

@adhpkarlo6452 3 жыл бұрын

Hi sir is this applicable on supply theme? by the way your tutorial are so amazing

@MegaPapoy 4 жыл бұрын

nice tutorial !

@Robert.ohhdez 3 жыл бұрын

Hi could you do a video on how to change a side menu to a header menu please? The theme im using i love, but i hate the side menu i would love to put it on the header

@user-fh4eg7it3z Жыл бұрын

I had some really difficult time trying to make my slider work properly. It just would clone each slider item , scaled it up and place as a second row. BTW I worked in Debut theme. So what really was helpful is that I set property infinite:false in JS. And then the pesty row disappered!! Yohooo!

@jeanaguilar5 3 жыл бұрын

Hello Jan! Thank you so much for this video! Can you please make a video of how to implement this slick slider on the Logo List section of the Debut theme? I've been trying to figure it out myself but no luck. Thank you so much!!!

@rakshyabista7731 3 жыл бұрын

did you make it?

@daniastaburuagafenner7035 3 жыл бұрын

Hi !! Great tutorial ! But in my shopify session I don't have the code, could you give it to me to be able to do the slider? thanks !

@fahadrais9415 4 жыл бұрын

Hi Jan, can we apply this slider on supply theme feature product collection?

@mania7927 3 жыл бұрын

@Coding with Jan - Shopify Developer Thanks, Do you have also a video which shows how to add a photo slider on the product page with little three points under the main photo instead of showing all the other photos under the main photo?

@dukeyvee 3 жыл бұрын

Hey Jan do you have a video that talks about vertical scrolling thumbnails.

@shoaibkarim Жыл бұрын

Love you Brother

@stayorganised5431 4 жыл бұрын

I did everything in Minimum theme, exactly how you did. But it doesnt show any slide, it keeps stuck on showing 12 products in different rows. Did I do something wrong with installing slick?

@hemantbabbar1 3 жыл бұрын

Nice Video, But Please create the blog also which we can step follow in one by one...Great Info Keep posting.

@flowerloversaccs6715 3 жыл бұрын

Help! I have Brooklyn template, but I couldn't manager to find the same code. Is it possible to do for Brooklyn template? Thanks

@matthewcoleman9606 4 жыл бұрын

Thanks for the Great Video! It was very detailed and simple to use. Is there anyway to center the prev and next arrows on the icon rather than being at the bottom.

@CodingWithJan 4 жыл бұрын

Hey Matthew, super welcome :-) What you describe is very possible but would require some CSS-knowledge. Unfortunately implementing this myself for everyone is slightly beyond what I can offer on this channel. Here you might consider to reach out to a Freelancer / Developer. I´m pretty sure you can find a very cheap Deal on Fiverr for that. Hope this still helps :-)

@robbumbieris 3 жыл бұрын

How can I change the arrows? mine are super small on the bottom of the slider, anyway to get them to be more professional clean looking , or just have dots?

@elenael8958 4 жыл бұрын

For some reason once i copied the snippet to the new collection slider, changed the name and checked on the site, there are no slides itself. Just a name Featured collection and that is all.

@md.habiburrahman1378 3 жыл бұрын

THANK YOU!!!!

@CodingWithJan 3 жыл бұрын

you are welcome :)

@Zafri_ShaH 2 жыл бұрын

that's really awesome can you please make a video for color swatches of variants that auto pick variants image in color swatches that will be help a lot thanks jan :)

@giorgoslavrentiou4296 3 жыл бұрын

Can this work for blogs also? I mean to have a featured blog post slider on the home page?

@anhqui19822011 3 жыл бұрын

Thanks, Jan. I think you forgot telling us how to implement slick library to the Shopify. I know how to do it. But it seems that there are so many newbies who don't know how to do it.

@CodingWithJan 3 жыл бұрын

Hi Qui, Slick was natively included in the debut theme back then. The easiest way should be to add a CDN script to the theme.liquid head. Working on an updated video aswell :-)

@JanMichaelSullano 3 жыл бұрын

@@CodingWithJan I did this and not sure if it matters which part of the head to place it but it did not work on mine.

@Lorenn2210 2 жыл бұрын

@@JanMichaelSullano same. I use CDN and the browser doesn't recognize the slick() function

@dontbeproudofme 3 жыл бұрын

Can you do this on the Brooklyn theme?

@arvylynogoy6214 Жыл бұрын

is it possible that under the product recommendation section be a slider? With the dawn theme? Hope u notice this. Thanks Sir Jan

@olivialorrach9244 3 жыл бұрын

HI! Thank you so much for this video, it helped me a lot !!!!! Quick question, I have a big space between the bottom of my collection-slider and my other sections. Do you know how to reduce that? And when I am trying to add "view all button" it changed everything... Thanks a lot in advance for your help and your time :)

@islacassamo6921 3 жыл бұрын

its the padding

@pragathij958 3 жыл бұрын

Is there a code to add only image sliders with links (to redirect to product page)?

@ponchogaitan4339 2 жыл бұрын

Hello Jan, doesn’t it only work with debut theme? I’m using Brooklyn theme and doesn’t work. Thanks

@sotmarios 4 жыл бұрын

Hi, your videos are great. Very explanatory and easy to follow. Do you have any "code" suggestions in creating a multilingual store? Will you ever do a video about that?

@CodingWithJan 4 жыл бұрын

Hey there, thank you for the positive feedback :-) Multilanguage is probably interesting to others as well. I´d suggest you use an app for that. Weglot and Langify are the most used. I might make a video comparing both in the future, but you can already get started. Hope this helps :-)

@enversdudecor 3 жыл бұрын

Nice work dude. Too bad you don't show where to put slick library, and the way its loaded. In section, or entire website in theme.liquid ? Same question about your custom javascript section, you add it for your entire store in your js main file and not only in your section.liquid file ?

@kiarareyes4337 3 жыл бұрын

Hello I am following along on this tutorial but ai got lost in minute 9:14 where you have the html/tools page. Where do I find this page?

@rtmroadtomillion5197 3 жыл бұрын

Hi Jan, I keep getting slick is not a function error on the console?

@just.some.wheels 3 жыл бұрын

hye Jan could you help my out i keep on getting Uncaught TypeError: $(...).slick is not a function at :1:27 this. What can i do about it. i copied everything you said but my slideshow does not work it keeps on being the 12 locked pictures like normal

@aahouseholds6854 Жыл бұрын

Hello, I have created a custom index page that is related to the homepage and I need to add three different columns and use different collection sliders in different columns please tell me how can show a collection slider in a different columns.

@prasadbandawar9564 4 жыл бұрын

your are gr8 bro thanks for video

@CodingWithJan 4 жыл бұрын

Thank you :-)

@brenycamp 4 жыл бұрын

best tutorial! super well explained thank you so much!!

@gunasekaranm4157 4 жыл бұрын

All are working good. But navigation arrow not showing in minimal theme

@andrewchekhman6532 4 жыл бұрын

Hey Jan! I'm not sure how much you charge for services but i was wondering if you could help with installing owl carousel on my site? How else can I reach out to you?

@mauricesoetsane8516 4 жыл бұрын

great video, i was so close but i think i must have done something wrong within the process. are u able to assist with this.

@debduttomajumdar9661 3 жыл бұрын

Does these codes apply on booster theme?

@clementjaw8903 3 жыл бұрын

This method is no longer working for the current Debut version, wonder can advise the latest working method?

@mahiruddin9543 4 жыл бұрын

Thanks for your good video. if possible give next video on debut theme products size and color swatches

@CodingWithJan 4 жыл бұрын

Hey great to see you back here :-) A few weeks ago I already created a video on color swatches. The tutorial is a little bit more advanced and you can find it right here: kzfaq.info/get/bejne/gNOphLF7udqYl4U.html Hope that helps :-)