how to move objects around in shopify

what's up guys today i have another,quick and easy tutorial for you but it,also illustrates a very important,concept and something that you can use,uh in other situations so it's a good,skill for you to have the thing i'm,going to be demonstrating is how you can,move this description to a section below,using dawn theme right in dawn theme we,don't actually have any section that we,can use to add the product description,below so you know we have the,description available in the blocks here,inside the main product information,section,right,and we can disable that description,but if you want to add the description,below as i've done here you're gonna,have to use a custom liquid section,there's no section actually that will,let you output the product description,otherwise,for example,i thought that maybe would be possible,using the,rich text section right and,it would be if that rich text section,had a block type for the product,description but unfortunately it only,allows you to connect something like,a dynamic source like the the vendor or,any other meta fields that you may have,created but not the actual,description of the product meaning this,field here i'm talking about the actual,product description and not using some,kind of meta field in order to output,that okay,so let's get started let me show you how,to actually output the product,description anywhere you want using the,custom liquid section,also i should mention that this is not,only for dawn theme you can do this on,any theme it's just that some other,themes actually give you a section for,the description,anywhere you want it but,in dawn theme you don't have that so,let's use the custom liquid section,and we're just going to move it up so,that i can see what i'm working on right,so it's right here currently outputting,nothing i'll just write the word test so,that you can see where it is okay,so,it's really easy to output the product,description or actually any information,you want about the product you're gonna,open up,double curly braces like that and in,between them you're gonna write product,dot description,that's literally it that's all you need,to do to output the product description,as you can see though it's kind of ugly,right it doesn't have margins or,spacings and and it's not a matter of,adjusting this either,because this only sets the top and,bottom for the section itself but,actually what you need to do is kind of,wrap this output in some html because,currently it's just this raw data right,so we need to at least put it inside a,div or something if you're not familiar,at all with html this might be a little,bit confusing for you,i do have some videos on html coming,soon but for now,just just bear with me,i'm going to walk you through it i'll,remove this test thing as well a div by,itself is not going to actually apply,any styling it's not going to apply,margins or anything like that,we need to use a class right our theme,already has classes,classes are kind of like names that you,or or ids that you apply styles to okay,so why am i talking about classes or why,do we need a class because we already,have all these styles for example we,want,this exact width for our description we,want it to be the same width as this,section here or maybe one at the same,width as this section this is by the way,the page section right,it's this section here,page that lets you output any sort of,page content and the reason i added this,to the page was simply because,i wanted to see what classes were on it,what that was making it look like that,that was making it that width,and that kind of spacing and so,what i've done just now is uh you can,right click,and click inspect,to open up google chrome uh inspector,and then click this arrow here and you,can hover over anything and kind of see,what's going on here so,you can see that the main thing that's,like these orange sections that are that,are keeping it narrow this is kind of,the block or the container that we're,looking for,and so here it's a div with the class of,page width,and it's also got the class of page,width narrow,right,and so i know we're moving a little bit,fast but basically this is a modifier,class and i i can guess with a lot of,certainty that if we remove this it,would become exactly the same as this,one,right because this one above,has the same kind of uh,div with the class of page width on it,so we've got image with text right,uh image with text no overlap and we've,got this page width okay if i was to,remove that they would probably go,the full,width of my screen right,but this page with class keeps it,exactly,that particular width that is used,throughout this theme okay i hope that,explanation wasn't too long,but let's jump back into our custom,liquid that we're adding,sorry that's the one that i already did,okay this one and what class do we want,to add right it's the page width class,that we just found,and that should make everything a little,bit tighter right,the other thing that i would just,recommend adding,is also this,class,called rte,and rte is just a bit of text formatting,you probably won't even notice the,difference at least not in my example,here,but generally whenever something is,output in shopify from like a page or,from the product description you wrap it,in rte and this means like this stands,for rich text element or something like,that,and it just does a little bit of the,adjustment of the font so that it like,looks like the rest of the theme,and yeah that's pretty much all you need,to do if you want you can add a heading,above it you can make like a h2,like this and you can write description,like that,and,you know that would give you a little h2,heading but you can also put that into,your actual description as well so i'm,not sure,why you would do that actually,the point is that you can write any html,you want in here the more html and css,you know obviously the more flexible,this gets and now you know the end,result is that you have,the product description in a custom,liquid section you can move it around,anywhere you want,and you can obviously use it on,different products as well if you want,if you know how to use templates you can,create a separate template for some,products that have the description here,and some products that have the,description below if you don't know how,to use templates you should check out my,templates video and also i just made a,new playlist for coding videos,uh that will be videos kind of like this,one so if you're interested in learning,more,shopify liquid or html and css then,definitely check out this playlist so,yeah guys that's all for today i hope,you found this helpful i hope you're,okay with kind of the speed of this i'm,trying to do more videos,and uh i might be rushing a bit but this,lets me kind of put out daily videos,almost,so i'm going to try this and see if it,works and see if people like it so,let me know in the comments if you,prefer more kind of structured videos or,if you're okay with me just kind of,doing this unscripted style of quick,video right yeah that's it i'll stop,talking and good luck and see you next,time

Congratulation! You bave finally finished reading how to move objects around in shopify and believe you bave enougb understending how to move objects around in shopify

Come on and read the rest of the article!