how to enable sticky sidebar brooklyn shopify

all right what's going on guys in this,video we are,going to be customizing the brooklyn,theme,within shopify so this is one of the,more popular themes and it's a free,theme so i figured i'd go ahead and make,a dedicated video,just for setting up this particular,theme here so,getting started here if you don't,already have a shopify store,uh set up and you're not already able to,get into the back end you can go ahead,and click the first link in the,description to start your,14 day free trial and then once you go,ahead and do that you can come down here,to explore free themes,and select brooklyn from this list right,here to go ahead and follow along with,the video,now that said let's go ahead and jump,right into it so,first off we're going to go ahead and,open up the customize section,and take a look at the actual theme,so this is what the theme looks like,when you first install it so you're,pretty much given a complete,skeleton here so we can see that this is,a pretty visual theme from the jump we,have a very huge,um banner right here comes with a blank,announcement bar,this is where our logo would be here is,our menu we come down here we have a,message,then we have some collections right here,we have a feature collection and then a,featured,product as well as a newsletter sign up,so in this video what i'm going to be,doing is we're going to just go ahead,and be,filling out the brooklyn theme,completely based on how it comes out of,the box so i'm not going to be making,uh many changes to the theme layout,itself,we're just going to go ahead and fill it,in the way it is,so before we get started there's a,couple of things that you're probably,going to want to have in order to make,this process a lot easier so i'm going,to pull up this notepad here,so the first thing you want to make sure,that you have ahead of time,is a logo so you want to make sure you,have your branding set up so your logo,and color,scheme because this is the type of stuff,you're going to need to go ahead,and design your store so if you don't,have a logo,i would recommend getting one or making,one yourself so if you want to make one,yourself in photoshop,or with a site like canva that's fine,or if you want to have one made i would,recommend going to,fiverr.com so f-i-v-e-r-r,dot com and you can get logo designs,there for around fifty dollars,and then selecting your color scheme so,the color scheme that you want your site,based around so this is essentially,going to be,based off the colors from your logo to,keep it simple,and then for this particular theme here,we're going to need,one or two wallpaper photos for this,banner image right here,and then we're going to need some,smaller photos that are going to serve,as collections,so brooklyn is a very product focused,theme so this theme works best for,stores that have a lot of different,products so if you have like one or two,products this might not be the ideal,theme because we can see here we're,trying to showcase off,multiple different collections of,products so ideally you would have at,least five collections right here,to go ahead and show off so you're going,to want to go ahead and have photos,that represent your collections,right here and then of course you're,going to want to make sure that you have,all of your product photos and product,details,when we fill out the product pages so,once you have all this,information we can go ahead and get,started so the first thing,we're going to do here is open up the,header,and we're going to get started by,putting in our logo here so once we,click header we can click select image,right here,and we can go ahead and upload an image,so i'm going to go ahead and do that,now and in this example we're going to,be making this sample store,a candy store so i'm going to go ahead,and,click select on this and then right here,we can choose to make the logo,smaller or we can choose to make the,logo bigger,in this case i'm going to go ahead and,just make it big and then right here we,can go ahead and change,the color of these links and icons right,here but we can see right now we have,transparent header enabled,so what this means is is that this,header is going to be,transparent whenever we are on the home,screen with,this hero banner in the background so if,i were to get rid of this,we can see that it would make this a,non-transparent header right here and,it would actually be a header standalone,and then you can see now the text is,actually black,and this is what our header is going to,look like on,every other page so whether it's a,product page or anything else this is,what our header is going to look like,but typically on the home page,it's going to look like this and it's,going to be transparent so you can,choose whether or not,you want the header to be transparent or,not,by enabling or just disabling it right,here,i'm going to keep it as the fault i'm,going to go ahead and keep the rest,of the links and icons for the other,pages as default black,as well and then right here you can,choose to upload a,separate logo when the transparent,header is enabled so,if your base logo doesn't look good on,the,um hero banner that we upload here in a,second you can upload a transparent one,instead which could be like an,all white logo or something like that,but in this case i'm going to go ahead,and keep it as default and everything,else down here we can pretty much,keep is the same we can see that the,transparent,header links right here this is where we,can change this color so if we wanted to,make,the colors red we could but in this case,white typically is going to be,looking better on the background so,we're going to keep it as that,and then down here we can go ahead and,edit this announcement bar right here,so this is where we can type in pretty,much anything that has to do,with the store so in this case we could,just be like you could put like a sales,notification up here and then we can,choose to show this announcement bar,only on the home page or we can get rid,of this and that would mean,that this announcement bar will show up,on every single page,so in this case i'm going to make it,show up on every single page so the next,thing we want to do here,is now we can go ahead and choose if we,want to link this announcement bar,to something so if you were selling a,particular,deal on one product here you could go,ahead and link to that right here but in,this case i'm going to just go ahead and,have it just be an announcement it,doesn't link to anything,and then right here we can actually edit,the color,of our announcement bar and this is,where i was talking about the colors,coming in earlier where you want to make,sure that you have an actual color,scheme,set up so in this case here we could,try and match it manually to,our logo but we don't want to do that,what we want to make sure we do,is actually match up the color scheme,exactly so in this case what we need to,do is find,the actual hex color code of our image,and we can of our logo and if you don't,already have that information there's,two ways you can do it one,is you can go ahead and pull up your,logo in photoshop,and two if you can go ahead and use,a site called hex color finder which you,can find by googling hex color finder,and then clicking on html,color codes.info and then if we open,this up we can upload our logo here,and then if we just click the color on,it right here we can see it gives us,this color code,right here and then we can copy this,come over here,paste it in and then we can see now that,these,colors match up perfectly and you want,to keep this code handy because you're,going to be using the same color scheme,throughout the rest of the actual design,so at this point we've set up the header,so i'm going to just go ahead and click,save,and you're going to want to save,periodically,to ensure that you don't lose any,progress so i'm going to go ahead and,click,back and before we actually get to,customizing the rest of this what i want,to do first is go down to,theme settings right here and we want to,change a couple,baseline settings now that we have,colors and everything decided on,so first off we're going to click on,colors right here and what we want to do,is change up a couple of these colors to,match our branding so,most notably if we scroll down here we,want we don't want this,link color to be this random brown,because that has nothing to do with our,branding and then we don't want the,buttons to be black because that has,nothing to do with our branding either,so we're gonna come down here and first,off come to buttons,and we're going to make the buttons the,same color that we used earlier,and then we're also going to change the,links and accents,here to the same color as well,so now our links are going to be,the same reddish pink that we've been,using throughout the rest,of the store and i'm going to come down,here and change sale,tags to completely red,just because red is typically a color,that is associated with sales and then,we come down here to the drawers section,as well,and we're going to change the button,color to the same color scheme of our,store,as well and at this point now our color,scheme,is set up store wide so we're going to,go ahead and click save,and i'm going to go ahead and go back,once again and the next thing i want to,edit here,is the typography so we can see here,that this font,looks fine but it doesn't really fit,with the branding of the,candy store so maybe you want to choose,a different font,that actually fits with the branding of,your store so if i go ahead and click,change we can see here we can look,through,a bunch of different fonts and you can,choose one that you think,fits well with your actual branding so,in this case i'm going to go with the,beefcakes font,for the headings as this looks a little,bit,more like a fun type of font that is,befitting,of an actual handy brand here and then,what i'm going to go ahead and do,is click select and then we can see,right here that is for the headings font,and we can go ahead and change our,accent text as well so this is going to,be,menus buttons and slide show,headings so for this one i'm going to,use something more basic i'm going to,just go with cabin,and i would recommend not using too many,different fonts,because it can definitely slow down,your website if you have a bunch of,different fonts going on so the last one,here is the body text here and for the,body text i'm,actually just going to go ahead and use,cabin as well,and then i'm just going to click select,and,click save so at this point we went,ahead and customized our,typography so at this point now what i'm,going to go ahead and do,is go back and we're going to start,actually setting up this actual theme,so when it comes to editing any theme,within shopify,there's always going to be an element,over here that corresponds,with the actual element on the page so,if i were to click on the collection,list that would take us down here to,this collection list,then if i click back on the slideshow,it'll take us back,up here so we're going to go ahead and,work away from the top down and first,i'm going to customize,the slideshow so we can see by default,that this slideshow comes with two,slides,now to make it easier normally you,really only need to have,one slide so i'm gonna go ahead and,click on the second slide,come down here and just click remove,block,so now we're just gonna have one static,image showing as our home page slide so,in order to fill this in i'm gonna click,on slide,and then i'm gonna click select image,and we're gonna go ahead and upload an,image right now so now that i've,uploaded that image i'm going to go,ahead and click,select but now we can see that it is,kind of difficult,to see the rest of the stuff on top of,this home page slide,and that is because the opacity here is,too low so if i take the overlay opacity,and raise it to,say 45 we can see that now it makes the,image darker and it makes everything,else on top,pop a little bit more so if i raise it,up to,50 we can try 60,and you can play with this to see what,you think looks best,now this is why like when we were,looking at earlier why you can have,a separate logo here for the transparent,header because if you had an all-white,logo up here,it would stand out a little bit more but,in this case,since we've put the opacity up to 60 we,can see our logo on the menu and,everything,and everything looks fine so now what we,can also do is we can edit the image,position,so right now it's essentially centered,but you can make it,the bottom right of the image or the top,left of the image,but in this case i'm going to keep it as,center because normally that's going to,be the most common thing you do,and then we can edit our text alignment,here so we can make this text on the,left,on the right or in the center in this,case i'm just going to keep it default,and we can edit our heading right here,and we can edit the subheading right,here that is on top,and we can edit customize this to fit,our branding right here so the next,thing we can also do is add in a button,right here,so we can see by default there is a shop,now button label,but there is no button showing up and,that's because we don't have a link to,anything so if i click on this button,link,and let's say i just want to have it,link to all products,we can see that this button is now,showing up,but this button is not the same color of,our other buttons so we want to go ahead,and change,this button color to the same,pink that we've been using and go ahead,and click,save and just like that we've went ahead,and designed,our first slideshow so at this point now,we can come down here,to the rich text section so in this,section here we would just go ahead and,open it up and in this section we can go,ahead and put anything we want so in,this particular stage,case we could put something like,our story and we could go ahead and type,a little bit about,our store and how we got started how the,business got started,and you can put any type of text here,you want so in this case i'm not gonna,actually type something out to keep the,video short so i'm just going to go,ahead and,put in some example text right here,and we can go ahead and change this size,from small to medium,to large so in this case i'm going to go,ahead and just,keep it as large but then we can go,ahead and check,wide display if we want to make it wider,and i think that looks a little bit,better because if it's not wide this,text,is too blocky so i'm going to go ahead,and keep this on,wide display go back and click save,now unlike with a lot of other shopify,themes here,like i said brooklyn is very product,focused,meaning that a lot of the stuff that's,going to be on this home page is,actually going to come from different,products and collections that we have,so at this point we can see we have the,collections list,so in order to fill this out we need to,actually create some product collections,and then we have a featured collection,here which means we actually need to,create a collection with six,products in it and then we have our,example product right here,so in order to go ahead and fill the,rest of this stuff out,we're gonna have to go ahead and,actually start creating products and,collections,so let's go ahead and leave this right,here and,come back to the shopify home page here,and what i'm going to go ahead and do is,head over to,products so the first thing we're going,to do is actually add our,products into our store so we can do,this by coming over to all,products clicking on add products here,and i'm going to go ahead and add a,product and now,so let's say the first thing i'm going,to go ahead and add is going to be,a milky way candy bar,and we can see we just put the title of,our product in right here and then right,here we can go ahead and do,a brief description of our product in,this case i'm gonna just use some dummy,text but we can go ahead and put in,our product description right here this,is where you want that information from,earlier,and then as well we want to go ahead and,be able to upload product photos so i'm,going to go ahead and do that right now,so you're typically going to want more,than one product photo depending on what,you're selling so if you have more,photos definitely,be sure to upload multiple and then we,can come over here,and we can change our product type so in,this case the product type is going to,just be candy bar,and then we can change a we can put in,the vendor,of the product if we want to in this,case i'm just going to keep it blank,and then we can go ahead and add this,product to a collection if we want but,we haven't created collections yet we're,going to be doing that next,so i'm going to just leave that blank,and then we can add some tags if we want,as well so,in this case i'm going to do candy bar,and milky way so you just want to put a,couple tags,related to what this particular product,is that way people search for,products on your store this will show up,and then we can go ahead and just put,the price of the product right here and,then if we wanted to make it on sale we,could just make,the compare at price a bit higher and,down here you don't actually have to,put in the cost per item this is just,something that helps you calculate,profit margins you don't have to do this,so i'm not going to do it right now and,then down here we can just go ahead and,put in how many we have in stock really,quick,put in the item weight and,at this point we can add any variance,but in this case we don't have any,variance,and i'm just going to go ahead and put,this as active,and click save so now what i'm going to,go ahead,and do is i'm going to do the same,process,once again and i'm going to add in some,more products,so that way we can go ahead and fill out,the store so i'm going to add these,products in,really quickly and i would recommend you,do the same,and i'll be right back alright guys so i,went ahead and added some products,and now as you can see right here so,once you've went ahead and added,your products in like this the next,thing we need to do is go ahead and,create our collections,so that way we can go ahead and finish,this home page so i'm going to go ahead,and go here,to collections now and what i'm going to,go ahead and do is click,create a collection so collections are,essentially just going to be,groups of your products so different,categories that,uh products that have shared,characteristics can go into a collection,so in this case i'll make a collection,called candy bars,and we can go ahead and fill out a,description of the collection if we want,in this case i won't but i am going to,ensure that i add,a collection image because that's what's,going to end up showing up,right here so i'm going to go ahead and,upload an image for the candy bar,collection,really quickly and then what we can do,now,is we can select the collection type so,we can first either add products to this,collection,one by one manually so if you only have,you know five or ten products in your,store this is probably the easiest thing,to do,but if you do have like hundreds of,products and you're going to be adding a,bunch of new products in the future,then using automated rules is going to,be a lot easier,so in this case i'm going to show you,how to do it using automated rules,first so we can go ahead and create,a collection that's going to have all,products that meet a specific condition,so in this case we can make the,condition based off of the product title,the products type vendor price tag,weight etc,the easiest one to use is a product tag,so any product,whose tag equals candy bar,is going to be in this collection,and then i'm going to go ahead and click,save,and once this saves here we can see that,it went ahead and added,all of our candy bar products,inside of this collection automatically,because each one of these products had,the candy bar,tag so i'm going to go ahead and go to,create another collection real quick,and in this case i will make one for,candy canes,and this time i'll show you how you can,do it manually so if i go ahead and,upload,the collection image for candy canes,really quick and then i click on manual,and then i click save we'll see here in,just one second we will be prompted to,be able to add,products manually into this collection,once this loads so now we can see here,we can go ahead and browse,all of our products and we can add all,of our candy cane products to this,collection which i'm going to go ahead,and do,right now so this is added in here,it's automatically saved and we can go,ahead and go back and we can see that,now we have two collections,so i'm gonna go ahead and do is i'm,gonna create a couple more collections,to make sure that we have the necessary,five,to fill out the rest of the theme so i'm,gonna create three more collections and,i'll be right back,all right so i went ahead and created,the other three collections and now we,are all set to go ahead and finish,our design on the brooklyn theme so i'm,gonna go ahead and go back over here,to the editor real quick and since it's,saved i'm gonna click refresh just to,make sure it has all,of the updated information that we,have just added and i'm going to come,down here to the collection list,and this is where we can go ahead and,start selecting our collection so we can,see right here we can go ahead and click,on this collection,and we can go ahead and select,collection right here,and i'm going to go ahead and select,candy bars and then we can click,select and then we can go back and we,can click the second collection,we're going to go ahead and add another,collection in here so in this case,can kane's and,for the last three collections we're,just going to do the exact same thing,we're going to put in every one of our,collections once again and we can see,that just like that we have went ahead,and filled out the collection list,because pretty much all of the legwork,was already done by creating the,collection so once the collections are,created we just go ahead,and put them in right here and we could,change this heading to something else,to our favorite categories,or anything like this and then we can go,ahead and go back,and click save to update this so now at,this point,we need to go ahead and put in our,feature collection so this would be,uh like our most popular collection or,just whatever collection we want to,feature right now,so in this case i'm going to go ahead,and open this up i'm going to click,select collection,and i'm going to feature candy bars this,time,and we can see right here if i click,select,we can change the grid style from grid,to collage if we want but in this case i,think,grid looks better so we're going to go,ahead and we can edit,this title right here or we can just,keep it as feature collection which i'm,going to,keep it as right now and i'm going to,click save,and we can see right here that now the,home page is,looking a lot more complete and we can,see that all of our products from the,collection are going to auto populate,right,here and the last thing we need to do,now is pick a,product here to showcase so i'm going to,go ahead and click on,featured product here and we can click,select product,so in this case i'm going to go ahead,and use the,lollipop as the one to showcase,and maybe want to showcase something,that's on sale or showcase a new product,or whatever,we can go ahead and do that here so i'm,going to go ahead and click select,on that and these options right here we,can choose to,show variant labels if we want we can,choose to get rid of these social,sharing buttons,or we can keep them there in this case,i'll keep them there,and i'm going to go ahead and go back,and click,save so now at this point the last,section that we have here is this,subscribe,to our newsletter section so you can go,ahead and leave this default,or you can go ahead and try and give,some incentive to get people to sign up,to your newsletter,um for example like giving them 20 off,their first order,you can put something like get 20 off,your first order by signing up,and this is something that you would,want to make sure that once they sign up,to,your newsletter that they actually do,get a 20,off discount code so you wouldn't want,to lie of course you want to make sure,that they actually get the 20,discount code here and that's one way,you can get,incentivize people to go ahead and go,ahead and sign up for your newsletter so,with that said,at this point we went ahead and edited,the entire home page i'm going to click,save,and we're going to go ahead and run,through this again actually what i'm,going to go ahead and do,is come over here and open up the online,store on a fresh page without the editor,and we're going to take a look at what,we've essentially created,so we can see here that in just under 30,minutes we've went ahead,and filled out the entire,brooklyn theme just as it is out of the,box and the store already,looks pretty good so at this point if,you wanted to do,further customization you could so we,can see right here,that we can go ahead and add sections if,we want so we can see how each one of,these,different things like the newsletter the,product and the featured collection are,all sections,we could add more sections right here by,adding in images with text,slideshows adding in a map or anything,like this,by default the default setup looks,pretty good but if you do want to add in,sections you can,so let's say i just wanted to add in a,video section,we could go ahead and link a video right,in here,if we had like a demo showcase of some,of our products we can go ahead and add,in the video section here so let's say,i went ahead and selected this and,i wanted to say put this video up higher,i could drag it up here and put it right,there,and let's say i changed my mind and i,didn't want the video i can just open it,up,and click remove section and it's gone,so with that said that's how you can go,ahead and customize,and completely design your brooklyn,theme within your shopify store so if,you did enjoy this video be sure to,leave it a thumbs up,and to subscribe to this channel for,more tutorials,thank you for watching i'll see you guys,in another video

Congratulation! You bave finally finished reading how to enable sticky sidebar brooklyn shopify and believe you bave enougb understending how to enable sticky sidebar brooklyn shopify

Come on and read the rest of the article!