Shopify How to build a Featured Product Slider

Рет қаралды 35,505

3 жыл бұрын

I'll show you how to implement a featured collection slider or product carousel on your homepage.
► 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
📂 Code file
pastebin.com/vBiVPqyD
► SEO Description
--------------------------------------------------------------------------
Are you wondering how to add a product slider on your home page?
In this Shopify Theme Development tutorial, we are using HTML, CSS, and JavaScript to build a slider from scratch. Further, we use Shopify Liquid and Shopify Sections to create dynamic customizer settings.

Пікірлер: 146

@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

@arunsaklani9890 2 ай бұрын

This man exactly knows what we need in Shopify rather than drag and drop thnku brother ❤❤❤

@thetechdock 2 жыл бұрын

This is what I needed. Thank you so much.

@chorton53 Жыл бұрын

Your videos are so very helpful. Thanks a bunch !

@fernandomunarriz9836 3 жыл бұрын

WOW. You 're the best channel for shopify users. No doubt. THANK YOU

@CodingWithJan 3 жыл бұрын

Hey Fernando, thank you so much 😀

@JanMichaelSullano 3 жыл бұрын

thank you so much! This is much simpler than the slick...

@camilagamarracasalino91 Жыл бұрын

Incredible helpful, you are the best!

@fineartphotographyvietnam 27 күн бұрын

Thank you Jan, you're a star!

@CodingWithJan 26 күн бұрын

☺☺

@teamhaqut3643 2 жыл бұрын

Thank you! It worked for me right off the bat. Just needed a little CSS work and all good!

@CodingWithJan 2 жыл бұрын

Excellent! Glad it woked well for you 🙌🏻

@KHuntie 3 жыл бұрын

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

@charlene6306 2 жыл бұрын

Excellent stuff. Works in debut theme but not in dawn

@mohammedelhamdi4557 2 жыл бұрын

thank you so much this is so much valuable

@ajayrabari433 3 жыл бұрын

Thanks for this video. It is helpful.

@CodingWithJan 3 жыл бұрын

you are welcome 👍

@CuBeAreaFUN 2 жыл бұрын

👍🙏 thanks a lot Jan!!!!

@CodingWithJan 2 жыл бұрын

Welcome!

@sudhirsingh1459 2 жыл бұрын

very nice

@RevitalogicaMedicalTechnology 2 жыл бұрын

Amazing content

@ronn1023 3 жыл бұрын

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.

@CodingWithJan 3 жыл бұрын

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.

@okhmedia 2 жыл бұрын

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 :)

@DeepThinker193 2 жыл бұрын

Like well earned.

@DevilFruitJourney Жыл бұрын

Danke dir.

@sierrariley2244 2 жыл бұрын

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!

@christophohlinger3579 2 жыл бұрын

would be very interesting, got a solution?

@apexflows2202 2 жыл бұрын

Hey Jan, thank you for this, but please how to make an existing collection section to be slided?

@ismailkoskos9609 3 жыл бұрын

Two like from me 👍✌🏻before I watch the video 🤩🎓

@CodingWithJan 3 жыл бұрын

Hey ismail thank you so much.

@maxtanie 2 жыл бұрын

Best tutorial, thank you so much, may God bless you and Jesus loves you :)

@thearttown769 3 жыл бұрын

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

@mahindaperera5995 2 жыл бұрын

Hi Jan, appreciate your guidance with this video. how this is gonna work with shopify 2.0 ?

@daniellasagun7810 2 жыл бұрын

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?

@user-om2bp8tp2v 2 жыл бұрын

same here, any solution?

@waysafe5921 3 жыл бұрын

Hi Jan, How to add product comparison price in this? and how to allign text to center of image?

@Rafail500Saketi 2 жыл бұрын

This doesn't work for me (DAWN theme 6.0.2v)

@namansinha9938 3 жыл бұрын

Can options like compare at price or view all be added to this slider??

@philemon305 2 жыл бұрын

Great video but how do I center collection slider description and pricing?

@iLoveTurtlesHaha 3 жыл бұрын

Where did you get that shirt m8? It's really nice.

@jaimenegrovadillo2206 Жыл бұрын

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!

@SquareMusher Жыл бұрын

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?

@jacobreed2709 2 жыл бұрын

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!

@amrithaindia5192 2 жыл бұрын

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

@ricardomora5565 3 жыл бұрын

Hey Jan this video isn't working for the narrative theme... is there any difference? Thanks in advance

@lolgags1605 2 жыл бұрын

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

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

will it work on dawn theme as well ?

@obinnaikoku6110 2 жыл бұрын

my slide show is vertical without the . how do i fix that?

@arvylynogoy9341 2 жыл бұрын

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 🎉🎉😊

@CodingWithJan 2 жыл бұрын

Hey Arvy, yes you can apply it on Dawn theme! It would be even easier since you can use the section everywhere 😉

@almogcohen2696 4 ай бұрын

it didnt work at dawn theme any reason ?

@JohnBYoutube 3 жыл бұрын

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

@CodingWithJan 3 жыл бұрын

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 :-)

@JohnBYoutube 3 жыл бұрын

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

@MoeShayTV Жыл бұрын

Hi! i just did this but everytime I add a section. I get two sections. any way to fix this?

@snehakhan6355 Жыл бұрын

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.

@crazygames416 3 жыл бұрын

Hi, jan. Thanks for another great tutorial. Could you please share how to speed up shopify website?

@CodingWithJan 3 жыл бұрын

Working on it :-)

@crazygames416 3 жыл бұрын

@@CodingWithJan wow! Eagerly waiting for that. Thanks a lot.

@rizvireaction1475 3 жыл бұрын

@@CodingWithJan Thanks for working on my suggestion, Love from Pakistan

@NecaBae Жыл бұрын

Hi jan, the collection isnt sliding for me.

@user-qe6ed2zk3e 2 жыл бұрын

How to the slider in the collection list, please.

@AtifAli-re3io 3 жыл бұрын

Thanks Jan can you please make a video how to apply count down on the products thanks in advance

@CodingWithJan 3 жыл бұрын

Not planned in the near future but I'll put it on my list. Thanks for the suggestion 👌

@damienbutterworth6374 3 жыл бұрын

@@CodingWithJan Yeah i think this would be a good one!

@Trainwhrek Жыл бұрын

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

@ceciliaercole3499 3 жыл бұрын

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

@ctrlskin 2 жыл бұрын

I'd love this too!

@ameermuslim870 2 жыл бұрын

Slider is not working on Brooklyn theme

@yuga9847 2 жыл бұрын

Is it possible to use an image slider instead of a product?

@achernar2724 Жыл бұрын

can you make autoplay?

@billys8148 3 жыл бұрын

Hello Jan!

@CodingWithJan 3 жыл бұрын

Hello Hello 😃

@woutervdmeer2233 2 жыл бұрын

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

@jossdown4102 Жыл бұрын

How can I add the reviews´ products under the price?

@aris8949 2 жыл бұрын

Thanks for the tutorial, but I think it won't work on CRAFT theme 2.0

@alensamuelvillasenor7637 3 жыл бұрын

Hij Jan, the code its not working, the codefile, can you fix it ?

@vishalbhawsar207 2 жыл бұрын

hii Jan how I can create blog slider from this

@letsexplorerealislam 2 жыл бұрын

Link of code is not working why??

@raqibnur 2 жыл бұрын

make a video on ajax cart drawer

@CodingWithJan 2 жыл бұрын

Hey, thanks for the suggestion, it's noted😃

@rizvireaction1475 3 жыл бұрын

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 3 жыл бұрын

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.

@rizvireaction1475 3 жыл бұрын

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

@jjankoj Жыл бұрын

Hello it unfortunately doesnt work for me in debut could someone help me out?

@RevitalogicaMedicalTechnology 2 жыл бұрын

the code file link is broken

@joshbete9743 3 жыл бұрын

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

@CodingWithJan 3 жыл бұрын

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 :-)

@superiorbeing95 2 жыл бұрын

@@CodingWithJan Works flawlessly, I just made this alteration also, many thanks

@flowuru 3 жыл бұрын

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.

@CodingWithJan 3 жыл бұрын

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 :-)

@flowuru 3 жыл бұрын

@@CodingWithJan Thanks! it worked perfect :)

@anastagiadeleon84 2 жыл бұрын

I'm having trouble with JSON errors on schema. Can you pls help on what to do now?

@CodingWithJan 2 жыл бұрын

Copy everything inbetween the schema tag to a "json validator" (easy to find on Google)

@carlacarvajal8063 Жыл бұрын

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

@heliofarias8380 2 жыл бұрын

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 2 жыл бұрын

Hey Hélio, You can change the font size in your theme > customize > theme settings > typography Have a nice day! :-)

@heliofarias8380 2 жыл бұрын

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

@CodingWithJan 2 жыл бұрын

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 😁

@heliofarias8380 2 жыл бұрын

@@CodingWithJan Great thanks a lot ✌

@uviziolive974 2 жыл бұрын

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

@matthewreed6824 2 жыл бұрын

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

@CodingWithJan 2 жыл бұрын

Hey Matthew, You can try to add some margin between the images: .your-image-class{ margin-right:10px }

@matthewreed6824 2 жыл бұрын

@@CodingWithJan HI Jan, Thanks for coming back to me so quickly, where would this need to be added?

@thedreamer447 Жыл бұрын

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

@ramilcarcamo1587 2 жыл бұрын

I don't know what I did wrong but when i tried it, the collection is positioned vertically instead of horizontal :(

@imaginenation5158 2 жыл бұрын

Same! If you know what's going on, pleeeaase tell me I'm desperate

@imaginenation5158 2 жыл бұрын

Ok, I think it might have to do with not using Debut, if you still need that info

@davidsprawski5910 3 жыл бұрын

hey nice vid! :) Can you tell me how I can do a Product Slider on the Cart Page?

@CodingWithJan 3 жыл бұрын

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.

@davidsprawski5910 3 жыл бұрын

@@CodingWithJan okay thanks !

@vvss958 3 жыл бұрын

@@CodingWithJan Hey Jan please make video on this

@Aerotk 3 жыл бұрын

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?

@CodingWithJan 3 жыл бұрын

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.

@Aerotk 3 жыл бұрын

@@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 3 жыл бұрын

Maybe this could help to get started, haven't used it yet but looks quite interesting actually: fancyproductdesigner.com/jquery/

@Aerotk 3 жыл бұрын

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

@Aerotk 3 жыл бұрын

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

@kevinfagerliljah4712 Жыл бұрын

it dont work for me i dont know what i do wrong

@user-un5nm7rc5f 10 күн бұрын

code link is not working plz give a new link

@terriemarie8836 4 ай бұрын

Can you explain us howto do this type of slides on single product pages this is what i really want to know

@CodingWithJan 3 ай бұрын

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. :-)

@achiles6928 3 жыл бұрын

Hello Jan! I have a question. Flickity slider doesn't work until I refresh. do you have any solution of it??

@Aerotk 3 жыл бұрын

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.

@achiles6928 3 жыл бұрын

@@Aerotk I tried that but it has no error. it just you need to refresh the page to activate the flickity

@CodingWithJan 3 жыл бұрын

Hey AchiLes, try to load the page withut the customizer.

@jonasdegener660 3 жыл бұрын

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

@CodingWithJan 3 жыл бұрын

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.

@andrewrico8321 3 жыл бұрын

isn't better to use SwiperJS?

@CodingWithJan 3 жыл бұрын

Hey Andrew, could also work thanks for the tip.

@thecapsule5439 9 ай бұрын

completely not worked on dawn them

@rdarktemplar1989 21 күн бұрын

Error parsing data-flickity on products-carousel js-flickity: SyntaxError: Expected property name or '}' in JSON at position 4 (line 2 column 3)

@CodingWithJan 21 күн бұрын

Syntax error means there's probably a mismatching bracket or comma. ChatGTP can help you correct this.

@BECKSBLOG Жыл бұрын

Didnt work images to big ... i want to cry :(

@kartikayjalan7050 2 жыл бұрын

not working

@numannusrullah4838 2 жыл бұрын

resource link is not working i want this code please give me this code

@CodingWithJan 2 жыл бұрын

still works. just double checked

@hammadasad7600 2 жыл бұрын

Open with VPN

@86-nishantsinha73 3 жыл бұрын

works in brooklyn?

@CodingWithJan 3 жыл бұрын

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.

@86-nishantsinha73 3 жыл бұрын

@@CodingWithJan Thank You Jan, this works just fine in the brooklyn theme

@deniss.3661 3 жыл бұрын

Hello! Check the email with a letter of cooperation (ConveyThis)

@evinlewis6690 3 жыл бұрын

The rural banker causally provide because swan unequivocally amuse among a black-and-white haircut. helpless, tested chive

@UnicornLaunching 2 жыл бұрын

Worked like a charm! I changed a line of code so that it would swipe to 100+ options kzfaq.info/get/bejne/oJdiq9ie05eYqYk.html 22 : 36