how to add testimonials slider app to shopify

what's up guys in this video i'm going,to show you that how you can,create a custom testimonials slider in,shopify store,so basically i was also interested to,solve this issue,for one of my client and i searched a,lot and on shopify community,there are a lot of comments that people,are selling such type of plugins or,maybe apps,through which they are implementing this,specific thing and they are paying 90,dollars,per month so i thought that if i am,trying to solve this problem then,definitely there are a lot of people who,are not,interested to pay that much amount so,they will be using this,free of cost all right so they can do,a little bit of changes and because of,which they could able to customize their,testimonials slider and in tomorrow's,video i will be showing you that how you,can,create a custom slider but in this video,this is a slider but this is,specifically for the,testimonials so currently you can see on,my screen that i have this specific,uh slider here and if you will,click over it then you will be getting,this type of uh,scenario all right so this is the look,and feel,and i have already removed the code from,uh the,files so it would look like this now,all right so if i am refreshing this,page then these testimonials would be,removed,i mean images would be removed so how i,added these images,so i will be showing you in this video,so keep watching this video,till the end and if you are new on this,channel just subscribe this channel and,also,like this video because in the coming,videos i will be exploring a lot of,content,which would be useful for you so first,of all you have to go to,uh the dashboard of the shopify and here,you have to click on online store,and once you are clicking on online,store then you have to click on,customize,and currently i am working on debut,theme so whichever theme you have,we can actually manage this and if you,are thinking that you are not,good enough in all these things so you,can also take the help of mine i will be,adding the link below,contact details below in the description,so currently you can see that this is,the testimonial which is default,and if you will see on the left menu you,will be,getting this specific section which is,testimonials,so i am going to delete this one once,again and,i will be creating in front of you so,that you get to know that how,you can do it so currently you can see,that we have only two sections which are,like,this is the slider and this is the,products featured products and down,below we are interested to add a section,for the,testimonials slider so i clicked on add,section and then i,am going to scroll it down and down,below you will be finding,testimonials so you should click over it,and then after you should,select it so you can see that uh right,here,so you can see that we have on the right,hand side we have,testimonials and,currently this is loading so once this,is loaded,successfully then we will be saving all,these changes,all right so this is super simple to add,the,testimonials onto your shopify homepage,so the important thing is that how we,can manage the,slider with the images so currently you,can see that this is the scenario and,now we are interested to make some,changes,so for example you are interested to,modify its title so you can also do that,like that,so we have this specific uh description,author name,so if you want you can also modify this,one for example i am modifying the,author name,here you can see that this is reflecting,here and then after,i am interested to modify the second,testimonial and you already know that,if we are interested to keep only few of,the,testimonial slides then we can also do,like that,so we have five testimonials slides,so if you are interested to remove each,and every one then you can,remove it or even if you are interested,to add,then you can also add so currently we,have two testimonials,you have to click on add and then,automatically third one would be added,if you are,click on add testimonial then fourth,would be added then if,i am clicking again then fifth,testimonial would be added,so now you can see that this is the,slider and,we are interested to add some images,over it all right,so if you are interested to change the,content you can modify the content and,the author name so you can do according,to your need but for now i am leaving it,as it is,so you can modify according to uh your,convenience all right so now i am going,to save it,and let's move ahead with another part,which is,like how we can add the images here so,i am clicking on exit,and down below first of all i am,interested to add some,images uh i mean upload the images so,click,on the settings on the left bottom,corner,so once you are clicking over there then,you have files you should click over it,then i am going to upload few uh images,so if you are interested you can also,download from the google,so for example profile,images,professional all right so i have already,already downloaded so if you are,interested to download the new,images so you can download from here and,maybe you have the original,customers profile pictures so you should,use those,all right so i'm not going to use it,right now because i have already,downloaded so let me upload all those,files,so you can see that we have this one,for example so i have uploaded that file,now,and here you can see that this is the,file and here this is the url,all right so i'm interested to download,all those,so you should select each and every file,at once and then click on open and all,the files would be uploaded,together all right so finally we end up,with downloading this stuff,so now we are interested to open this in,new tab,and let me go move ahead with the coding,part,so you should click on themes and then,after you have,to go to the customization of the code,so,there are minor customizations so you,have no need to worry about if you are,not,interested in coding so you should click,on this drop down button,and here we have edit code so you have,to click over it,and then we have few folders,and here we have sections so you should,scroll it down,and here we have codes.liquid so this is,the file where we have the,uh slider for the testimonials all right,so here we have so we are interested to,add the image,so basically this is the uh this is the,section inside,of which the slider is showing if you,are thinking that,let's test it that this is over here or,not,so i am going to add here a small,heading,to print the hello world so that i get,to know that,this is working for example i have,written hello,let me save it and i am going to refresh,this page,and now you can see that this is hello,on each of the slide we have hello,so that means this is we are on the,exact place all right,now what we are going to do here is we,are interested to add an image,all right so for that,i am going to write img tag then we have,src,equals to double quotes and inside of it,i am going to paste a url,for example this is the url i have just,copied,and then i am going to paste it over,here all right,and then after let me save it,and let me refresh this page now you can,see that this,is a huge image if you are interested,you can also,reduce its size but for now if you are,thinking that this is good looking good,then you can also keep it as it is,otherwise you can reduce it by adding,some,width so here for example i am writing,width equals to 150 for say,example,inside of double quotes you have to,write width equal to 150,then you have to save it and let me,refresh this page once again,now you can see see that this is little,uh i mean this is looking good now,otherwise you can also increase this is,its size first example i am keeping it,200,and that is also possible,so here you can see that we have 200,and if you are clicking over here then,this would also work so now you can also,see that,we are interested to keep it in the,center so i will be doing that as well,but for now first of all we have to uh,add all the images here so we have added,the single image as you know that,we have multiple slides so we have to,use a counter here,so which will be calculating uh the,values of the,number of slides so i am going to define,a,define a variable here percent,percent and,curly brace so inside of this specific,syntax you have to write,assign count equals to,zero so we are going to initialize the,counter valuable with zero so,we will be incrementing that,and here we need to write if,inside of the same syntax we are writing,here,if count equals to,zero then after this specific image,should be shown,all right and then after we have to,close this one,and and if all right,and again i am going to write the same,syntax down below for the,second image so for that we will be,having,counter equals to 1,all right and inside of it i am going to,write,image tag src,equals 2 then i am going to write here,width equals to,150,and inside of src i will be adding the,source i mean the image source again i,am going to copy again i am going to,copy and paste,and accordingly i will be adding one two,three four and five,so whatever number of uh number of,uh slides you will have uh on,on the slider so accordingly you will,have to write,the number of lines here all right so,let me show you,where we have first of all you should,click on customize so actually we have,generated,five slides over here as you already,know that,we were creating the slides i mean,testimonials,so here we have five number of slides so,three are over here then fourth and then,fifth,so if you will have five slides then,accordingly you will have to write the,write this one five times one two three,four and five,and now we are interested to copy and,paste all these,all these images url so i have copied,this second one,and then i am going to paste it over,here,then we have the third one,i am going to copy it and then paste it,over here,then we have the fourth one so again i,copied,by ctrl c our command c,then we have ctrl v then finally we have,the last image,so now you can see that we have this one,all right and we need to increment the,counter as well,so we have one then we have two,then we have three,then we have four all right so zero one,two three four so accordingly we have,four five images all right and,at last we will have to add here the,increment operator,so the syntax is that assign,you have to write here assign count,equals to count,plus,1 so this is the syntax for incrementing,the value of count in the shopify so let,me save this,these changes and now so we have small,issue here sorry we had one issue that,this is,equals to so double equal to because we,are comparing here the values so we have,to write here double equals,to double equals to 4,and you can also see that we have,incremented the value of the count,over here so let me save this changes,so now you can see that the changes has,been saved successfully,and now let me refresh this page here,and if you will see,you will find out that everything is,looking great right now,all right so let me do some,more changes here first example i am,interested to,keep the size little bit smaller,so for example i have okay i have this,one,200 and other one 150 that's why,we are facing this issue and other than,that we are also interested to keep this,in center so how we will be doing that,is we have this specific,uh class here so we are interested to,write here,one style equals to double quotes,and inside of this style we are going to,write,text align,center all right so this is the syntax i,mean,we are going to text align center the,images,so click on save and then you have to,refresh this page and now you will find,out that,everything is beautiful so now you can,see that we have,successfully implemented the slider and,you can also slide it,and you can also see the images with the,content,and we have the author name and if you,are interested you can modify the images,and modify the things according to the,suggestions,which i explained over here so this is,really simple you have to implement this,one into your website as well for free,you have no need to,give the price for uh to any specific,developer for doing this because this is,really simple i explained you each and,every step,so if you are still facing an issue or,maybe you are thinking that this is,not uh this is not uh,helping you this video is not helping,you then you can also connect me i will,be adding the link below,in the description i mean i will adding,the details in the description so you,can connect me by any means like,skype whatsapp email so i will be,helping you out with that other than,that you can also,do the comment in the comment section,because that is important for me if you,will be asking the questions i will be,able to,help you out with whatever problem you,will be facing so,thank you so much for watching this,videos and,see you in the next one

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

Come on and read the rest of the article!