how to refer to shopify asset in folder

in this video i'm going to show you how,to make your very own custom section in,shopify 2.0 on the dawn theme here's,what i made um it's just an example you,could make something totally different i,review how you can add your own section,how you can make all the text and all,the photos completely customizable and,add however many as you want so if that,interests you,go ahead and continue to watch the rest,of this video this is a pretty technical,video so you're going to have to be,comfortable working with a little bit of,code,thanks for watching if you need help,with anything feel free to reach out to,me martin martinclayson.net and i can,help you with your shopify store,also please leave a like comment and,subscribe thanks so here i am in my,shopify store dashboard this is just a,brand new development store so nothing,has been changed in it at all and i have,the dawn theme so this is a shopify 2.0,theme it's just the default theme first,thing i'm going to want to do is go,ahead and make a copy of this,and so where this load is located is if,you just logged in you need to click,online store and then this sub menu will,appear in click themes and then you'll,see this,but i'm going to go ahead and duplicate,this,and this is what you'll always want to,do you're not going to want to work on,the live theme and mess with,people who might be on your page at the,time of editing code,duplicating it will allow you to,preview make whatever changes you need,without affecting any end users quick,note on that though if somebody makes,any changes to the live theme and then,you change themes then any changes that,the other person made are not going to,be applied so just keep that in mind,anyways so,if i preview this,i'm going to open this in a new tab,let's see,you can see that there is nothing there,and then if i go into customize,we have all the typical sections,but i'm limited to what shopify is,going to give me and,they have some great stuff right out of,the box,but a lot of times you're going to want,to make something for yourself or for a,customer so i'm going to show you how to,do that,so let's exit out of this and start,editing the code if we go to the top,right here i can exit,and then on my duplicate theme right,here copy of dawn i can click actions,and then i can click edit code,and i'm going to open that in a separate,tab just to keep moving back and forth a,little bit easier and now it is going to,load up all the liquid files and i'm,going to minimize templates because the,section we want to work on,is sections so i'm just going to click,add a new section and let's call this,slick,slider,and then it's going to automatically add,the dot liquid and it's going to give us,some boiler boiler plate settings right,here it's going to give us section name,and then settings so,if i give this a section name let's call,this slide slick slider,and then i'm going to add some text here,that's a markup actually,my very,first,custom,section,and i'm going to go ahead and save that,so now if we go back into our theme,editor so where that's found is back on,the dashboard,actions,and or not actions sorry customize i'm,going to open this in a new tab,as well,and now if i go down to add a section,it's still not going to be there there's,one more thing that we have to do before,it's going to show up here there's see,there's slideshow but there's no,slick slideshow so i'm going to go back,to the code,and there's another setting i have to,add right here,so i'm going to go ahead and add a comma,right in front of settings,and then in double quotes i'm going to,call this,presets,and,colon and then an empty array,and then we have to give this,some curly brackets double quotes again,name,colon and once again slick slider,and let's see if saving it works,it took it,and if it did not work for you,you can actually copy everything that's,in here,and you can go over to,jsonlint.com i'll leave that link,and you can validate the json oh,something's not right,oh i had actually copied in the schema i,just want the json so whatever is in,between the schema tags is what you,would paste in here and there we go so,at least you got a demonstration of what,happens when you don't have the json,right,so now that we have this this section,should now be available from any page in,our shopify store and when we add it we,should see these h1 tags so let's go to,our store and give that a try so i,refresh my store and i'm going to go,down to add section,and then show more and hopefully it's at,the bottom here,and there it is slick slider so i added,that and you can see that those h1 tags,or that what h1 tag did show up and now,i can save that and that will be part of,the theme now obviously that's just a,static h1 tag that's,there would be easier ways to add that,to the store you want to be able to,change what that says you're going to,want images you're going to want,a lot more markup than that so,um now that we have this established um,i will put this template,um in a github link so that you can use,this and just play around with it but in,the next part of this video i'm going to,show you how to add some dynamic content,so i removed the h1 tags and now we want,to make some text that is dynamic for,our header so let's create a header and,where we're going to put that is inside,of the settings array right here we're,going to pass in an object and we're,going to make it a type,of,text,and so let's put in a comma there and,we're going to have to give it an id,and we'll,label it,heading,and that's what we'll use to reference,it later,and then we will give this a label i,think,a label yep a label and this is what's,going to show up as what we can,customize and we'll say it,we'll give it a,heading make it capitalize there and,then let's do a default,this is what will show by default and,we'll call just say,my,custom,heading,let's see if it takes that,and asset save so that's a good sign,once again just use that,json validator if it didn't work so,let's add our h1 tag,back in,and then inside there,we're going to do two sets of curly,brackets,and then we're going to call,section,dot settings,and then the id dot,heading,so let's think about that quick so we,are in the section so we're referencing,oops i see a typo should just be section,we're in this section and then we're,looking into settings,so this array right here and then the,heading,and it should actually be,id i believe,no i think we want to keep that as,heading so i'm gonna have to refresh i'm,gonna click save and now let's see if,that is showing up correctly on our,store,and did not so i'm looking back and i,see that there's another type of,settings,now let's try it again,and now we see we have my custom heading,so i must have had a typo in there yep,so there's the default in action,save and refresh,and there it is there's the default,message that we put in so now if i go to,this slick slider and we see the heading,over here on the right side,and if i start typing this it's going to,update in real time,my first,custom,section,okay,so i'm going to save that and now if we,go to the store that is going to show up,so that's still not terribly exciting,but now you can see how you can add,dynamic content to your site even if it,is just text so for the next section i'm,going to make things a little bit more,exciting i'll show you how to actually,loop through let's say,you know uh,you know products or something else that,you want to create a gallery out of or,whatever and you can loop through those,and add that markup to the page,and that's where things start to get a,little bit more interesting,and i will save each stage of this and i,will add that to the github repository,i'll link with this video,okay so i made a little bit of markup,with some styling just so we can,demonstrate things so i'm going to copy,that and paste it into my file i will,provide this as well,but i don't need any of these body tags,i just need,these divs,and the styling,so i'm going to copy that and paste that,in,so i'm going to put this right below the,h1 tag,so there is the markup i'm just going to,save that,and,looks like,the markup isn't all aligned perfectly,this is actually a lot more fun when you,do it on your local environment which,there's a way to do that but just for,the simplicity of this,video i'm not going to do that,but this is just a container and then it,has a title an image and then just a,little blurb so there's the markup i,also need to add the styling to that,so i'm just going to copy this styling,right here and just put it right in the,same file as the html,right below,and right above the schema,okay so now we should have a static,um,element on the page,so i'm going to go over to my page and,take a look at that,and here it is so you can see,my static html is there but,this is all just static the photo label,and the image and everything else is,just stacked so i'm going to add some,code to allow us to change that,okay so under the settings object i'm,going to create another object,called blocks,and that is going to be an array,i'll just add the comma now,and inside of blocks,we are going to have,another object and we have to set the,type,and it is going to be a column this is,going to hold a couple other,settings that we can change,so we'll set the type to column,and then we need to set the name,we'll call it,slide so it's going to be a slide,containing the title,image and description,and then we're going to have some,settings,which will also be an array,holding some more json and the type,for the first one is going to be text,we'll make this the title,so the id for that text,will be naturally title,and then the label that will show up on,the screen,in the editor,will be title,with a capital t so it looks nice and,professional,so let's save that and see if it takes,our json,and it did,so this is what we will use to have a,custom title for each slide that we add,to our new custom section so let's go,back up to our markup and what we want,to do is for each slide we add we just,want to repeat the markup that we have,right here so we're going to end or wrap,this in a loop,and,we will just go ahead and,put in,the loop and we'll say,for,block,in,section dot blocks,so for each block we add it's going to,return,this code so we'll wrap this entire,markup right here,in this for loop,and then we'll end it right here,and four,and that should be good let's see if it,takes it,and it took it so that's good now here,in this h2,we want our dynamic text to be shown,there so,this is what we just created,down here with the id of title,so we want to add code to reference that,between these curly braces,and so that is going to be,referencing the block,and then the setting settings object,that we created and then we gave it an,id of title so we're going to do block,dot settings dot title,and save,and i have one two minute curly,bra um braces there so i'm gonna get rid,of that and save again,so i refreshed the customizer and now,under slick slider over here i'm gonna,click add slide,and there's my burger and if i click on,this,you can see that title is up here and if,i start typing that's going to appear so,i'm going to go ahead,and give this a title let's go ahead and,go big call it burger and you can see it,appears now one thing,you're probably going to want a default,there so i think we can go back into our,code,and right here i believe we can add a,default,so i add a default of title right here,and so then i deleted what we had and i,added another one and as you can see now,there is title and if i click on this,i can,change that,so at least there's not just a blank,white space sitting there until you add,that so i'll go ahead and click save,and i think i made another mistake that,i'm going to have to fix,right here i ended my for loop,i think,one div too many,and if i add a second block i believe it,is going to,add a whole container so,let's just see,yep,yeah that's not great so i'm going to,see if i can get that fixed,okay and i move the n4 in the correct,div spot,so that each block is just returning,one single div with a title image in,text,instead of an entire container which,results in this so now we have a,container and i can,give these,each different names now so title,i'll change this one to,hot dog,so that's great,and we can just keep adding these,if we want let me just add another one,now and i can just keep adding as many,as i want so,next thing we want to do is we want to,be able to change images so i will show,you how to do that next and then we're,also going to want to change the,description,so i'm going to use the slick javascript,library,and i'll provide the link for that but,if you go to usage from the page,you'll see that there are some links and,you can use get it now which is what i'm,actually going to do i want to add it,right into my code which is kind of,a good idea rather than importing it,from an external library where it could,change at any point,so i did that and i extracted it and i'm,going to go ahead and upload those into,shopify now and i see that it wants you,to add the css the slick css and slick,theme dot,css at the top so i'm going to go ahead,and do that first,and i this is what the folder looks like,when it's extracted hopefully you can,see that but here are the files right,here so i'm going to go ahead and go,over to,my files over here and add these to the,assets folder,and click add a new asset,and i'll put the slick in there,looks like that is actually in there,i guess,not sure why,and then i'm going to add the second one,the slick theme,and,oh it wasn't already in there i could,just replace the file i chose so both of,those are in there i now need to add,jquery and the other two javascript,libraries as well,and if we look at the documentation it,wants,the,slick.min.js which is,in the same,path so let me add that one as well add,a new asset and slick and,then these two i'm just going to copy,these,and then i'm going to save as,and i download it you can see at the,bottom it says jquery 1.11 so i'm going,to do the other one too,copy link address,save that one as well,and then let's just go ahead and upload,those,okay so some of that legwork is done now,we need to import those from our assets,folder into our liquid file,so above everything here,i'm going to import those css files,and you can see how i did that so the,double curly braces,and then you can see there's a filter,filter of asset url and stylesheet tag,so just copy exactly what i did here and,you can see those are the names of the,files that i just imported so we have,our css scripts up at the top,as you can see these are what they,wanted there is slick css and slick,theme dot css,oh it's not quite right,and if you,look,down here on the left it should not have,that mint on it so i'm just gonna go,ahead and,remove that min so that it matches,then you can see it wants me below all,of our markup to import the javascript,libraries,so i'm gonna go ahead and do that and i,will put those right,here,don't need that one,but the same type of thing the curly,braces,and,the file name,coming from assets except this time it's,not a style tag it is a little bit,different up here is a style sheet tag,down here it is a script tag,so i'm going to go ahead and save that,now,and everything still looks good here so,now let's see how to implement all those,libraries we just imported,and you can see here some demo code and,let's do one where it shows uh four of,these slides at a time and we can click,back and forth this one looks nice so,i'm to go ahead and copy this,and you can see our selector we just,need to select the div that is holding,all of our elements so i'm going to,select that flex container,and i'm going to paste this code in,there and i'll show you,back in our liquid file i'm going to put,this right above schema and for now i'm,just going to add some script tags,and then i'm going to paste in what we,had before,or what i just copied,from the official documentation and this,is what i need to replace right here so,let's go ahead and look at our markup so,it's selecting a class,let's look at,our class so here it is it's custom,container,so i think,if we,replace this,it should work,so where is,the selector okay so here's the selector,so i'm going to select,custom container,all right let's see what happens,save,okay and check that out,i refreshed and we now have a little,slider,just a thing to maybe fix is,it doesn't there's no space in between,now our shadow box is all screwed up so,maybe i can add a little padding in,between them,okay i messed around with the css and i,got looking alright i would probably,play around with it a little bit more,but for the purposes of this video i,think it is good enough so in this video,you learned how to create your own,sections and then,play around with blocks so that you can,make them fully customizable whatever,text whatever images you want however,many of them you want and there's a lot,more you can research it's in the,documentation,i will put all these files that i used,in the github with a link that i will,put in the description and i'll add a,readme to that github so hopefully you,can replicate this in practice with,whatever you're working on,if you like this video please leave a,comment please like please subscribe i,hope to make many more in the future,thank you for watching and have a great,day

Congratulation! You bave finally finished reading how to refer to shopify asset in folder and believe you bave enougb understending how to refer to shopify asset in folder

Come on and read the rest of the article!