shopify how to and tent images or video to the front page

hi everyone in this tutorial we're going,to create a custom slideshow this is,what we're creating right here this one,i haven't created in a dawn team but i,also have it on the debut team and it,does work the same as the dawn team,you can use any team you want it should,work most of the shopify team,i'm gonna show you the slides right here,um this is the first light with the blur,so every design have their own,badge on title they're on subtitle,bottom label on the bottom link and also,you can have different um design i have,12 in here,but i have um a normal and also one,design one and two are quite the same,but they're just an opposite to each,other and you can also have an image,filter which is uh normal blur contrast,grayscale hue brightness invert opacity,and saturate and also sepia so you can,play on those image,filter and you can also have different,description placement you can have,center center center left,top right top left bottom right and,bottom left i do want to let you know,that not all the signs have this,application that you can manipulate the,description placement it really depends,on the design,so in here this is the design one,design two,design three,design four,uh design five,sign six,design seven,sign eight,you sign nine,you sign ten,design 11,and design 12. so design 12 is a video,you can upload an internal,video from your,desktop or you can also have a youtube,but you have to set the slide design,into a design tool to be able to have,this design so even though you put a,link in here on the design one it's not,gonna work so only for design tool,and you have an option to have it on,autoplay and the pause button should,show here,this also works with the,smartphones or the mobile view,and it should not have a problem,okay and then also for the video,you have to have it on mute when you,want it on autoplay so i did have it on,autoplay and let's start on creating,this custom slideshow so to start we,have to go to our online store,so right here online store and then you,go to teams and you can edit your lab,team but i do advise you to duplicate,your code so to duplicate your code you,go click actions,and then edit code and then work on the,duplicated code but for me i'm gonna,start with a fresh dawn here i'm gonna,click actions and then edit code,and then let's expand our screen right,here by clicking this button,and then we're gonna work on the section,folder so we're gonna open the sections,folder and then we're going to create a,new section so this one i'm going to,name,custom,slideshow,and then create a section,and then we're going to go to our,website,and we're gonna copy this code right,here,all the way to uh n schema,so ctrl c to copy,and then we're gonna highlight this one,and delete it and then ctrl v to paste,and click save,next we're gonna go to our asset folder,we're gonna,create a file for our style sheet so add,a new asset and create the blank file,and this one we're gonna name custom,dash slideshow,and then add a new asset,and let's open our newly created um,custom slideshow.css and then open that,and we're going to go to our website,again,and we're going to go,copy this code,ctrl c,and then we're going to paste it here,ctrl b to paste and click save,so your custom dash slideshow should,match on,this,custom.css because this is the way of,calling the asset,and in here if you read some of the code,you will figure out that there is an,animation duration requirement so every,designs have their own animation,duration so if you decide to,just use the sign with one second then i,would suggest you go all the way to this,schema,so look for schema right here and then,look for this interval,and then i do set it in the,minimum of five seconds but you can,change it to one and then the maximum is,nine,but in the range the maximum you can,have i believe is hundred one so you can,change those,and also on the design 10 if we go on,our,design right here so if we go to design,10,our design 10 is,so this is first um let's go to our,design tent so the sign tin is this one,the circle has its own placement so i,did put a comment here on how to adjust,it so this is the one from left to right,so you can adjust the top and left up,and down so you can work on those and,then also,i do have,a code that you can change here,the,so if you go to the top,let me see so this one so if you go in,here you can change the colors that,we've been using in this design so,this is the variable that i use in the,code you just have to change it right,here but you can always change the,design so i have it numbered and then it,should be easy to read um you can change,those um colors right here the variable,color and whatever you want,and i believe that's it so let's go and,customize our team so,click this customize team button right,here i'm just gonna right click this one,and create a new tab,and i'm gonna just remove this sections,right here,so add a new section so we're gonna look,for custom slideshow,custom slideshow right here,so i'm gonna add a new slide so this one,i'm gonna try to add a video so,in here we have to have an internal or a,youtube video url,so to add a video from straight from,your desktop we have to go to our online,store so let's go back,so in here on under the settings so,let's go out in here so in here in under,the settings uh the bot on the left,bottom corner,click on that one and then open the,files,and then you can upload a video that you,want in here so,you can just have upload file and find,the video you want to upload and then,click open and for me i already have a,video right here,so this one,so i have this coding sequence and you,just have to click this copy link and,then we'll go to our team,ctrl v to paste it here,and then we'll have to have design tool,here so we can see,so,yes that's how you add it from your,desktop but if you want a youtube uh,video you just have to go to youtube and,then and click the video you want so,right click and then copy the video url,and then we're going to go back to our,teams again,and then you can,control a to delete this one and then,ctrl v to paste and it should work just,the same way and um i believe,that's it let me know if you do have any,question,um you can always reach me at chat with,us,and thank you so much for watching but,don't forget to subscribe

Congratulation! You bave finally finished reading shopify how to and tent images or video to the front page and believe you bave enougb understending shopify how to and tent images or video to the front page

Come on and read the rest of the article!