how to add slider in shopify

hello everyone,hope you are doing well,in this video i will show you how to add,sliding shopify,this will be your image slider product,slider a banner swiper icon slider,you can use this simple format to what,type of slider you want,it will be free and without any app,and,i will make a feature icon slider,so as you can see uh,that is a,icon feature i can draw i have it,and i will make to become a slider,so,guys let's start,what i need to make that,in desktop version it will be,same like as right now,but when we go on the mobile,so,it become a vertical and i will make,that to become a,become a slider one by one become slide,so i will not use any app,and it's very simple code you can,follow this step and you can make,any kind of slider you want,so let's start guys,so,what will we do first of all we will,copy and duplicate that theme,so we will not work on the live theme,and we will work on the,duplicate theme so we will,save our code and we will not,destroy,our website,so first of all we will go on that,back end and what we will use uh we will,use the slick slider,it's a pre-made uh code of jquery,and you can use,in your shopify in any way you want,so free and very easy to install and use,so,let's start it so first of all i will,show you some structure what we have,right now,in this you can see that is a main div,and in this if we have a four columns,first column second third and fourth and,we will make when we will own them while,so first column,and every column will become a slide,so we will save our space of the mobile,so,let's start we will go on the google,and search silk slider,that will be up,first,link we will,click on it and when we click on demos,here you can see some already built it,demos and what we will use we will use,responsive display,as you can see and that is a code when,the,height will be become less than 600,so,the slide will become two,so we will use this so,what we will do,we will install it we will click on,getting now,and v1 github,and scroll down a little bit more and i,will copy these two links,click on this icon that is copied and i,will go on the my,uh,it's a themed or liquid file,even for themes,and edit the code,in the beginning of this video you can,see,become the theme.liquid and you need to,paste this link,under the head,so where i will paste i will paste the,space and i put these two links again i,will go there and i will,get this third link,and paste here,also i need a fourth link this will be a,jquery link type on j,curie cdn on google,and,get this link that is very simple in,w3school link,and i will come here and i will copy,this link,and again i will go here and i will,paste this link here,that is our four links i pasted on the,head of the our theme,and save it,now i will go the theme customization,and that is already built by the custom,icons,so go that there and here you will see,the,this code and that is uh,you can also check it out on,when you click on inspect,and you will find that the main date we,need a main days,class and that is the main thing you can,see the feature icon is amended,and under this feature i can take that,we have four blocks,so,each block will become a slide,so,we need to remember this,and,we go again the github,and go back and demos,and,we will copy that entire code,and paste it here you can also paste,everywhere but we will face with this,because i need this specific,slideshow of this section,so i will go to bottom,of this code and i paste it here,before and after i will add subscript,tab,it's refreshed,script,and here we go that up close,that's the strip tag,thank you zachary and,what is the here you can see,that is dot responsive that is a class,of main div,so we need to replace this and in our,case it is the classes feature icons,we copy this and,paste after that dot,and we will save it,so let's check that it's working not yes,it's work as you can see that is the,dots are added here now it's worked,when i go on the mobile,here you can see,it has a four slides,we also see on these,yeah in,this become third,what,on why it's become,this,that is perfectly working and you can,easily do this method you need to just,find the,main tip,class and you can paste that javascript,on this section and,add some,script tags and css tag on the head so,that is will be work,and now i will customize something about,this,but i will customize i don't need to,show,the dots,on the,desktop version so i will delete this,and,i will also delete this entire section,but you can keep that it's totally up to,you i also will keep that i will want to,do i will do that,so,i also,delete,this entire,code,i just delete,this third code,and i will make this to 767,and make one,let's go one,and,i will add some more thing will be a,autoplay,i need to auto play,so i will find that,okay,yeah as you can see that is,auto player,here,we'll copy,these,add some comma,blind,the time of,autoplay,and,i also want to show,copy these through,here,i will copy these two above,so let's see it's working here there is,any problem in this code,so let's check,yeah it's working fine,it is autoplay you know just wait a,little time yes it's autoplay,now,and i will refresh that page,and check it on this page yes that is,three slides on,tablet,and,one slide on mobile and these all is,autoplay,when we win on the texture,no slide,and,it's perfectly working as you can see,so,you just need to,find the main diff,class,and add,some,links jquery links and slick slider,properties links,asset links to your head,and,you need to add a script tag of,specific slider,configuration tag to the add a section,so your slider will be work and in this,way you can make very simple of any,slider,you can also that is a white background,you can't see there is a also is arrows,on the left and right,so that arrow color is also white that's,why it's not showing right now but,when the color is different the arrow,will be show,so it's also is this,so arrow will be also add,and,you can make this type of slider for,images products and banners,it's very responsive and you can easily,use any demo from the,slick slider,website,i will show you there is a,i will add a background color,that convince section background color,as you can see there is a arrows on left,and right,and you can easily adjust these arrows,by a css,any,kind of you have any question in your,mind,just ask in the comments,so i will definitely reply you,so you can solve your problems what you,facing,thank you guys uh that is a video hope,you will like that please subscribe the,channel,and,share that video,of your,you like that thank you very much

Congratulation! You bave finally finished reading how to add slider in shopify and believe you bave enougb understending how to add slider in shopify

Come on and read the rest of the article!