how to increase the width of a shopify supply theme

hey guys i just wanted to show you one,more thing shopify while it's,still fresh in my head so how to get a,full width,slider in not just maybe this theme but,this is the supply theme but,a lot of themes in shopify the free,things work great,they just have some certain limitations,to what you can do,if if you don't do too much,customizations okay so so what am i,talking about exactly here,i'm talking about the supply theme that,shopify gives you by default,okay and if you look at the you look at,the structure of it and i don't think,you have to be a coder to understand,this,but basically they have the header,right in the full width container and,then they have,the the content or the body of your,website,everything is boxed in into this main,content container and this is really,good actually this,this kind of you know ensures all the,elements are lined up,it just makes things very neat uh,unfortunately,a lot of websites it just looks more,expensive when,when this picture is like a full with,container right,and i found this problem on some other,support forums and some people,did some like kind of hacks to get it or,css to get it but then there were bugs,and then it just wasn't working well,and then the explanation to get it it,was kind of like very,vague and i found it very vague so i'm,just going to go through kind of step by,step,about how i would uh solve this problem,here,um so to give you the end result the end,result should look like,like this now this is not full width,just because the picture the client gave,me was too small but you can see,most of the time uh it would look like,this right it would just look like this,and uh yeah that's it it's full width so,what's the difference here so what's the,difference with this code,and the default shopify code right let's,look into here,here this piece here,loaded above the container,so this is basically if you look at it,here nav bar nav bar okay so this is the,nav bar,container okay and then,if you keep going down you won't find,that old container where it was just,like constraining everything i didn't,delete it,it's still here so if we go down to here,you can see,so this was the kind of like below the,header,wrapper container with the paddings on,the side,and then i i simply moved and moved this,whole thing up,to the header container whatever you,want to call it right,maybe i'm not using a name that people,agree with but it is a container it's,just full with container up ahead,so let's dive right into the actual,coding of what i did,here it's actually quite simple i like,things that are really easy to do,basically,so that way i can't mess up anything,else,so here if you'll notice,here is you know they don't call it a,header but it's essentially the header,when you,you you put the header section,into the body well whatever it is close,enough to be a header,right and then i added my own section,which is a slideshow,right this slideshow what it represents,is here right,here it's called slideshow okay so this,is default out of the theme,right so it's gonna call on this it's,gonna insert this,and remember you cannot insert a,shopify section into another shopify,section,otherwise i would have inserted this,slides show,section right into the header section,but,you can't do that okay you can't do that,in our shopify,so what the proper way of doing it is,from here the theme file the theme,essentially is doing all the work kind,of like a,kind of like a table of contents if you,are calling everything,right the theme file has the header and,it's calling all the,sections here and then you can see so,here's the culprit right here's that,main wrapper right so it's both good and,bad i'm not going to touch it i like it,but for the purposes of making a full,width slider,you need it above the wrapper right,so if you look at the source code so not,this we're going to get rid of this,that's the old one,it's exactly what it's doing i mean we,can close all this stuff,but look this is below this is above,uh really simple when you do it like,that i i wouldn't like i wouldn't go,into here,i wouldn't try to go through css and,then through,to whatever i wouldn't try to go into,sections code and then,and then edit that um because no matter,what you do,you're going to find if you try to work,off of here if you try to like force it,if you try to use some absolute you,might get some bugs and stuff,so i think the right way it was just,simply to move it,right and then there were some there was,some css i needed to do,to make it look even better what was it,there's some css,minimal css i needed to do,i needed to get rid of uh oh yeah there,were left and right arrows,i needed to get rid of right so if you,look at a slider usually there's a left,and right arrow,uh in this case you wouldn't want a left,and right one like the theme has these,ones,they work just fine i think it looks,pretty good like that right so i hit,those and then i,there's another horizontal rule where,whenever there's a section it would,insert it by default,there would be another spacer section,here which,which didn't make sense i i needed it to,be kind of like snuck,right up against it right and if you,look at this design i basically designed,this website,to mimic the style of their packaging,you see their packaging has the white,logo and then and then the gold,trim here that's exactly what we have,here,right so to me you know i don't think,the client,expected this level of this level,of customization to it but to me it was,important to have a really cool looking,website to have a really cohesive,website to the branding package,and uh yeah it was a really simple,solution,i thought to uh otherwise a problem that,you know wasn't very clearly solved,onto some some of the support firms,anyways i hope you found that was useful,thank you so much bye

Congratulation! You bave finally finished reading how to increase the width of a shopify supply theme and believe you bave enougb understending how to increase the width of a shopify supply theme

Come on and read the rest of the article!