Bricks Page Builder - How to setup WooCommerce templates with Bricks.

hey guys it's michael here this tutorial is going to cover on how to set up your own ecommerce web shop with bricks builder so basically i've already created one to give you a bit of an idea of what you can actually accomplish so i'll just scroll through and give you a bit of a look at it so we've got our normal hero and then we go into our trending products so we've got a few trending products there and we've got some mini call to actions that will segregate to two different areas and your latest products then kind of like another call to action to another part of the shop and then it refines down into actual areas like niche categories within the shop now this is actually a website that i built in elementor for a client of mine however i wanted to see now that the brics update is out for work commerce if i could accomplish it now i was quite surprised i did accomplish it and it's pretty much a spitting image of the original minus a few details here and there like the paw prints in the background and whatnot so what i'll do is i'll dive straight in so now you've seen the side i'll i'll break it down so i should be able to exit this and i'm going to start on a clean palette so you can see it being built directly from the start so the first thing i'm going to do i'm going to come into bricks and i'm going to go into templates and i'm going to go add new and i'm going to call this the uh product uh archives so basically we're making your inner pages so this will be where all the products are going to fall into when the search is going to come through for the products so we'll create that now we'll go straight in okay so i haven't set up anything or anything like that so first things first what i usually do is i come up into settings i'll come straight into theme styler and i'll create one so we're just going to give this one an ecom i'm just going to hit create now we're going to set conditions we're going to go entire website because we want it to go everywhere and we're going to come down to general in my original one so i'm probably just going to use these base colors here instead of remaking colors so you could i usually don't like to go a white background unless there's a reason but lately i haven't been so i'm just going to set a bit of big gray to just break it up and i might make that a little bit lighter bring the tone up here probably leave it there we probably don't need to change anything in the hue this will be good enough now what i usually do is i'll set the container width to 100 percent and then i'll come down to so we'll just close off general i'll come down to my arm type and i'll set my body font so i'm probably going to go with 14 on this i'm going to set it to i kind of like a darker brown i mean black here i'm going to set this to poppins because it's my favorite font that i like working with i'm probably going to set the body font to 400 and we're not going to worry about anything else then under here i'm probably just going to set this to poppins this is your headings for all headings across the site and i'll probably set this one to 600 so that's basically all i i get i'm just getting a bit of the basis done so it makes it easier in the long run now i'll come into buttons because buttons are important to have preset so what we're going to do here is we're going to set this to 14. we're going to make the text white so that's nearly white so we'll just make that white actually save that in there so we got a white color now the background of the button we're just going to make this uh orange it stands nice stands out a lot so we're not going to worry about the other components because it's basically we just want to get the default styling for the buttons so the main color the type and the text color on the button so you can put a border in the shadow if you want that's up to you now the last thing i do is right down the bottom here we've got a new new widget area i suppose in the theme style it's called woocommerce button i'm going to open this up i'm going to go into the text i'm going to set this to 14. i'm going to change this to orange is actually white because this is our text we're going to change the font family to poppins i'm pretty sure it'll pull from the main font families but i like to have these preset my um 600 for these buttons because i like my buttons being at 600 i don't know if i set it on the other one i'll have a check in a second and we're going to leave it as normal and we're going to set the letter spacing to 1. just breaks it up a little bit better and now under the background color i'm going to change this over to the orange and we're going to leave it at that so before i jump out of here what i'm going to do is i'm going to turn on our hover theme styles i'm going to come down to the buttons again i'm going to change the background colors to a different color so i'm going to make these purple it's going to look a bit funky but actually let's not make it purple because it's just going to look a bit funky we'll make it the lighter orange i think that'll suit it well and we'll come all the way down the bottom here as well and we'll change the uh button to the light orange so now we've set up like our two base plates for two buttons here so the backgrounds change and remember to come out of hover styles because if you stay in hover styles what's gonna happen is you'll design your theme in hover and it just messes things up so we don't want that now you probably should set up your link you can set up your content like there's a lot of things that you can set up in here but this tutorial's not going to cover that so i'm going to jump straight into here as you can see because we're in the actual product archive we've got all these different options here so what we're going to do is we're going to create a container so now i've made this container i'm going to it's already set to my um pre-measurements but for safety i always come in and just set it to 100 now i always put 25 on the uh padding on the outside it's just um it's good for mobile when it goes into responsive mode and what i'll do is i'm just going to label this root so i know which is which there's not very many containers to this one so which is good so we're going to come back into the elements we're on the root container we're going to chuck another container inside it so we'll just actually we're going to put probably two containers here just to break it up so you've got your header area and then you've got your like uh filters inside well sidebar for your filters and then your products so we'll get another container and just chuck that in as well so we've got two containers they're center aligned which is not they're not actually center aligned so as soon as i put 1200 i'm just going to double check that whoa that's twelve thousand so we've got twelve hundred by default i'm gonna set it to center a line yeah see there we go i'm gonna change the other one to center align as well set this one to 1200 now we're not really going to muck around with other settings because we don't really need to not yet anyway now i'm going to jump back to the root container and i'm going to put 100 at the top and 100 at the bottom so that way we've got our padding between our header and our footer now we go back into the very first container we're going to call this the header so we know what it is and the second one is going to be like the product area just so we know where we are when we're making even though there's not many it's still easy to just know so on the header area we're just going to drop in our header and what we're going to do is we're going to come over to click on your header i find it easier to click on the side here on the right hand under the structure and then we're going to go to content and instead of typing it in we're actually going to click on select dynamic dat we're going to scroll all the way down to the bottom i believe it is and we're gonna select product categories so what this will do is we don't have to what we have to do is um delete out that part so it might be easy to delete the word first before you enter the data you can put more words there if you want if you want a stagnant one but yeah what we're doing is we're just creating the um dynamic dat it'll pull from your categories depending on which page it's on if that makes sense so now that we've put that in i usually come over to the style tab i'll come down to typograph i'll go okay i want to set this one to black even though it's preset and i'm going to make this like a 65 actually that's probably too big 55 45 45 so you've got to remember that's roughly about the size we don't have to worry about anything else so that's going to pull the information across now we're going to go back into elements we're going to go breadcrumbs if it drops in the wrong spot just drag it up now we've got our breadcrumbs it's not going to show the full url so it'll have home you can change that to whatever you want and you got your options for your separator and you can or an icon so there's styling options here you can put on before and after prefix and suffix and you can style it up through here if you want to but i'm just going to leave it with the default so that's pretty much that container done but what i'm going to do is i'm just going to click back on the header up here i'm going to go over to layout because now that we're creating a section below it we want to have a bit of margins or padding between it so usually i'll try and stick to padding and we'll put about 50 to keep consistency and before we jump out of this container we're just going to go back to content and i'm going to make everything between the row the row gaps 25. so i've got my 25 row gap and i've got my padding between containers of 50. so now we're going to jump down to the product area now this one's going to be done a little bit differently so we're just going to click on this pencil here and we're going to change this to horizontal and now we're just going to quickly add two containers so we've got two inner containers here so one of them is going to be for the sidebar and the other one's going to be for the product so we'll create the uh sidebar first so we'll just call this one sidebar and i'll call this one products so we've got our sidebar we're going to make it vertical and we'll just leave these for the time being actually we might just put our 25 in now because we want everything to be 25 and we're going to come over to the style layout and we're going to set this to 50 actually now we're going to sit to about 20 yeah 20 is good so now that we've created that we're going to come back over to the elements i'm just going to click the plus sign here and we're going to grab our filters so we're going to put in a product filter we're just going to click on the product filter go over to content click on filters add item and we're going to add a testimonial so there's a lot of different options and i depending on what type of store you are you won't need half the options but for a basic generic store which is what we're making at the moment i'm just going to put in the product categories to show you what it's like and then we want it to be a radio list so when they click on any or pet food because i've only got like uh two two lists i should probably add a few more so you can see it in full length so we've got our two lists here now something that you should do is keep it uh kind of closed in a sense so just to give you an idea if we were to jump onto mobile and we didn't have it collapsed it'd start like this now if you've got about 50 categories in there it's going to just branch out and yeah it's just keep it closed and we're going to rename it too so we're going to go filter title and we're just going to call it categories so we kind of got what we're doing here before i move on out of the sidebar you can style this up to however you want but we're just going to keep it nice and simple you've got your uh title options here you can kind of style up where the title is you can't really style too much on the filters part of it but uh it's pulling from your theme style so it's pretty all right so we'll just jump back onto the sidebar here i'm gonna come over to style layout i'm gonna go okay we want this to be 25 padding from the uh right hand side because we're going to actually put 25 on the products as well so it'll equal 50 same as this one here you can put 50 in this one but i'm just going to leave it 25 because i want a bit of room just in case you have a category that's a bit longer of a name now we'll jump over to the other container so originally we set this container to 20 so we're going to set the product container now to 80 so now we've got our product container and we're going to jump straight into elements again and we're going to add products so you'll notice by default it's grabbed my ugly button that i created and it's kind of just formulated well just kind of like throwing everything down there isn't really much styling to it so we'll jump into the products and we'll come over to the content tab so under here you've got your query so query is basically where what data it's going to be pulling in so you can go through here set it to whatever you want there's quite a few options as you can see i'm just going to leave it all on default because we're not actually changing anything at the moment so you can include if you want to and yeah i just thought i'd show you that but you can set it to a category just say your base one's called all categories oh yeah and products per page so just say you want to have four rows um but for demo purposes we're gonna set eight so it only shows eight out of my ten products that i have added so now we're gonna jump down to layout i'm gonna skip build and come back to it actually so we're going to come down to layout you know you've got amount amount of columns so you can set this to five four however many you want i recommend four for desktops if you've got a sidebar if you have no sidebar go five and we want to change the gap to 25 because we're using the gap 25 between our like assets inside the containers you want to keep that consistency so now that we've got the 25 gap it'll be the same as everywhere else so we got the 25 in you can come down to um the widgets here so you've got your before and after where you can put in like your results you order you yeah you get the drift of it so i i'll just put this in here the pigeon nation so we've got it down the bottom here and you can sort it by however you want here as well so you can style this up so what i'll do is i'll just turn that off for the time being i'll come across here and i'll just click on this one here now you'll notice you can't actually see it don't worry if you once you look on the live site you can actually see it but in here you can actually style it up so you can put it to center and you can change a few of the defaults here and you can come into here and change the typo but for some reason it just doesn't seem to want to show up whenever i'm trying to make something with it so for demo purposes we'll just turn that off and we will turn it on in through here under the content and widgets and we'll go show after content just so we've got a bit of navigation to change pages now i'll go back up to i think we've yep we've covered layout we'll go to fields again so under fields here you've got your product image then you've got your title and you've got your price and then you add cart so what we're going to do here we're going to jump in and we're going to go okay we want to center align it for example just click on here on the uh text topograph set a line to center so it'll align your text to center and usually with text like this i'll bring down to about 14 and i won't bother changing the color because we want to keep it consistent and we'll leave it pretty much how it is and i'll come down to price same again we'll jump on the typograph here we'll set the pixel size to probably about 16. i tend to like my uh price one a little bit bigger you can set it smaller you can do vice versa so actually no we'll just keep it 14 the same as the other one and you can change the color of it it's up to you but honestly don't mind it this way i think it looks fine now the add to cart button we're going to come into here again actually i forgot to do one last thing on the price here i'm going to set the alignment to center so it center aligns it a lot i prefer center a line looks neater under the cart button we're going to do the exact same thing we're going to leave actually no we're going to put this to 12. i don't know if it's going to overwrite it but because we've already got button attributes done and i'll just give it a shot so we're going to center align that so let's see no it's not going to overwrite it that's fine we'll just close that so we've got basically our basic parts done now we're going to add an extra field which is going to be the category so i'm just going to delete this out make sure you delete it out first because as soon as if you add another um dynamic dat it's going to keep the old one there as well so you'll have double up on the images so we're just going to click on the dynamic dart here we're going to scroll right down to the bottom [Music] and we're going to go product category and i'm pretty sure my product categories are over the top nope we just got pet food curl so we're just going to leave that with the family font the way it is we're going to do text align center so we've got it in the center we're going to probably put this to 12 because you don't really need it to be big and i'm going to set the color to like kind of a gray color so it's grayed out probably not the best how i've got it here but for demo purposes i think we can survive now i'm just going to minimize that and i'm going to drag it up and i'm probably going to put it above the title so we've got our product terms here now it hasn't updated so i'm just going to click save here and i'm just going to refresh that so it's updated yeah as you can see we've got it now under our image where our image box is we've got pet food now something you can do is under the fields here for example you've got your margins here so we can probably put that at 10 10's maybe a little bit too much yeah we'll just set it to 10 on both top and bottom actually no we'll leave bottom we'll just set it to five so we'll probably go through and style these all up to be honest so top we'll just make that five we'll just leave them all at five to be honest so we won't worry about the car actually we will just keep it like that now you'll notice how there's no real options to style the container so what i've done is i'll just grab the code off my other screen quickly and show you what i've done so what we want to do is we just want to save this up i'm going to open up a new tab with the actual dashboard again so under bricks you've got your r settings so go to your dashboard click bricks go to settings and then come over to custom code so we're going to work on this container right here now i've already gone through and grabbed all the css classes for the things that i want to do so i'm just going to copy and paste it in and explain it to you and i'll include that in the video's description below so you've got a copy of all this so i'm going to expand that so you can see it so basically the repeater item is the container that this product is in so now if we come into here i've set the background color to white put some padding on it put the border on it made it the border style solid i've given the border a color and i've made the radius so we've got curved edges so this is for my original site that you would have seen and then i've created a hover here as well so when you hover the product you won't be able to see it here but it'll it'll bring a shadow up so what we're going to do is we're just going to go save we're going to save this as well you know i don't think this will no it won't update so you're going to have to refresh that just so it brings in the new data so as you can see we've now created a border around the outside when i hover it you can barely see it there's a subtle subtle um shadow and yeah we've kind of got like our container box now so that that's how you style your container box around it so i'm pretty sure i put padding at 15 yep so the padding will be around the image side here so just keep wary of that when you're putting margins on these under the um where is it fields here just be wary if you put too many margins on there and then you put the padding on the boxes it's going to squash it down real it's going to be a bit intense so now that we've created that pretty much that's done you can go through and style it however you want you know you can make as many different styles and changes like i'll put a link to the i'll just open this up in a new tab so we can see yeah that should be grabbing the product term i might check that because it's not functioning correct just give me a second i'm just going to open up my other screen double check to make sure i've got the right i've done it correctly because i may have told you the wrong way of doing it while we're waiting for my screen to load what we're going to do is something i like to do just to add a bit of flare let's come into here add a separator so we're going to add it to the right i'm going to make it 100. i'm going to make it 2px wide i'm going to make it 25 margin you know keep consistency i'm gonna make it centered probably don't need to do anything here actually and then you just wanna i'm gonna go with dotted i'm gonna add a color of i'll go with the orange so you've got your color there give me a second yep i've done the right thing ah yes this is why it didn't load so under site settings one thing i forgot to do right at the start we've got your page settings so you don't really need to do anything in here then you've got your template settings so it'll self-populate we want to get rid of that we want to go conditions we want to go add conditions we want to go down to where is it the archives and then we want to go categories and tags as well and we can come down to all items in product so you can go through here and you can keep setting it so we're just going to leave it at the base one and we're going to go and add another one so that one's for your archives this one here is going to be for our archives again but we're going to go actually sorry individual individual we're going to set this to the shop page so now it's going to override the internal so under pages here you've got your shop page it'll override it now so we'll just hit save on that now pretty sure if i come into the main site here and i go down visit store there we go so it just must be the preview doesn't show up properly so you've got your pet food here this is your um the category that this page is you got your shop items you got your little hover on the background and then you've got your categories here so the filter works pretty good so i've kind of got every product in the filter so it's not really going to filter them out but it it doesn't change pages which i'm pretty happy with so that's pretty much how you create your um shop page now you can style it up however you want there's many ways that you can go about it and that's just going to come up come back to you in a sense on how you want to do it but this is the basic understanding of how i would create a shop page and then i'd style it up from there depending on what type of theme i built so let's click save on that again i'm just going to close that close this now we're going to come back into bricks we're going to go into templates so we've got our product archives we're going to create a new one called i'm going to call it product try to keep it the same as what they do in here so we're going to call it um product single even though it's single products i'm going to call it product single i'm going to click publish we're going to click edit with bricks so we've already got our theme style so we don't have to remake it so we've already done that before under page templates here i'm going to get rid of probably populate content and i'm going to set conditions um i don't think i need to set the conditions i want to test this first so i'm just going to just give me a second i'm thinking here um archive products no we're just going to leave this as it is so i'm just going to insert a new container call it root like i always do so you know it's your root container i'm just going to leave it i'm not even going to worry about putting 100 i'm going to add my inner element and we're going to style this one up so this one's going to be a horizontal because we want two new containers on the inside so i'll just chuck those in so we've got them in we're going to make this container um 1200 pixels under the style tab and i'm just going to go back to the root container and put my usual 100 25 25 100. so that way i've added my mobile i've added my um so the right and left are for mobile basically it's a downsize for responsive and the top and bottom you'll have to change usually i go from 100 to 50 sometimes i'll do it more upwards of 200 depends on the design and one last thing before we go across you can set it here i think it is which one is it okay it's the third one i always get these mixed up they're new to me not used to it so you can set it here or you can come down to the container and you can set it here as well so you got your alignment container center but i think it might be wise on your route container if you're building a long page you can come through and preset it so every container will fall into that same axis so this container here is just going to be like the product first container is going to be the image second container is going to be the content so i've already pre-labeled them know what goes where we'll jump into the image one we'll put a new element in so we're going to come in here as you can see you've got all your different elements we're going to click on our product gallery so i haven't got any thumbnails so i i don't actually know what it looks like with thumbnails so maybe at some point down the track over the next couple of days i'll investigate it see what it looks like but for demo we're just going to leave it as it is so on the image container now that we've got our image in here i'm going to come over to the style tab i'm going to come to layout and on the right hand side i'm going to put 25 because we want 50 between each column here i'm pretty sure i forgot to put the 25 on the last video on the um i mean the last area on the products page so we got 25 there i'm just going to jump over to this one go to the style tab and go the left hand 25 just so i don't forget and then i'm going to come back to the image one so we've got our 25 that's come across i'm going to click on here i'm going to change this to percent i'm going to set it to 50 and i'm going to come across to the content one and change that to percent make it 50 as well and then i'm going to click on the image not on there click on it here we're going to click on i want it to align in the center i suppose you can choose your alignment because some images are going to be small so you might go stretch but i'll be honest i'll probably set it to center just so if the screen expands to that point usually doesn't but yeah just to be safe now we're going to jump over to our content tab i'm going to click on the plus so make sure you click on it so you've got it highlighted and we're just going to drop in our next part so i'll probably go and type in breadcrumbs because breadcrumbs are handy put our breadcrumbs in put our title in we'll put our price in we'll put our short description where is it short description you got your product stock but i haven't got any stock turned on so i don't have to worry about it i've got a product rating turn off you can put the big description which is your um product content and then you've got your tabs as well product conditionals it's there's quite a lot here that you can play around with but usually for standard i just go with the usual title short description photo price and where is it add to cart and i'll probably chuck in the meta so the product matter so we've got that laid out so we're going to click back onto the content tab now go over to the content i'm going to set this to 25. so it's going to push them all 25 apart and then you can come through and style these however you want but purposes i'm just going to style up a few parts of it and leave the rest so i'm going to put the title style text i'm going to set the where is it transform it to capitalize so it's capitalized i'm not right worried about the size of it and with the price here i'm going to bring this up to probably about 55 some people like it smaller i like it big and thick in your face so we've got 66 here we i mean 55 with 600 weight so here's your basic shop now something you can do if you want to get it better aligned you can come back up to your content tab here go over to the content say content tab wall structure and then content tab here and then you want to align it to the center actually not that one to the center axis so this is container so you can align it so it's lines up better but i think it's fine along the top now i'm just going to close these up so you've kind of got your style here and what we're going to do is we're going to click on the root container again i'm going to click elements and i'm going to add a new container and we'll start styling this container up so i'm going to make it it's going to go vertical we're not and container alignment is going to be center we're going to go across the style layout we're going to set that to 1200 and i'm going to put a margin of like a 50 from the top i mean padding sorry you probably put a margin on this one i don't think it'll really matter so we'll just go 50 on the margin not 550 just so there's a bit of gap between them so we can see it now the only time you don't want to use margins is if you're putting a background in here and you want it to yeah go in that margin area so you use padding so it's up to you which one you use i bounce between them depending on what i'm doing at the time but this one's going to be called related product so under here i'm going to probably just chuck in a title so we'll put in a normal heading and then we're going to drop in the where is it related products we've got related products here as you can see they have no styling to them and i'll get into that in a minute so for some reason it won't grab the same styling as the shop and i think that might be a bug i'm not sure but first we'll come into actually related products content let's set our padding row gaps to 25 and then we'll come back over to heading and we'll just change this to [Music] 55 it's probably too big we'll probably put it at 45. we'll make it i am capitalized again and we'll just come back over to the content tab and i'll just keep the consistency with the divider i had before we won't worry about that one and we'll make it dotted again and we'll just set it to the orange i think we had a light orange and we just i'm just going to give this a label of related products now when you click on this here some reason it's not pulling across that styling that we put in before so just let me check quickly on my other screen what i've done in that regard because i don't think it should be bringing across that information which it's not i'm just going to hit save i'm gonna hit refresh just to make sure i didn't open things too soon or anything like that okay so it's not pulling it across related products okay so this one's kind of holding its own you'd have to style this up individually i do say it's got its own boxes here so what we're going to do is just for purposes of the demo i'm going to come back here and i'm just going to type in products because you don't really need to use related products in products and we're just going to drag that into here so we've got that in we're just going to go delete get rid of that so we've brought in our own product tab here we're going to go into fields we'll leave that as it is um we'll come into here we're going to set this to probably four we're going to come down to layout probably set that to four set this to 25 keep the consistency um where else do we want to do something so let's have a look through here see what we can do you can set it to the category but i don't know what you want to do here so yeah if you want to keep it as related products you're going to have to go through and basically apply the css styling to this one as well so we're not going to worry about lining these up like i did before because you've already seen how that's done so we're just going to hit save on that so we've kind of constructed our page now depending on how what information you want on there you can go a little bit more out all out and you can add some custom sections i honestly i'd go research checkout pages on um dribble or pinterest and just find some designs you like the look of and just replicate them you know learn understand so we've done that we're going to go back to the bricks builder back to the dashboard and we're going to go into pages now so something i'm going to show you is you can edit your cart page and your checkout page and your account page so the account page isn't too much way you just edit with bricks but first what i do is i open up a new tab i'll come into here i'll copy the short code because you want the short code so you copy that we'll go edit with bricks this is the cart page that we're about to design here so we're just going to drop a container in we're going to put another container inside of that then we're going to drop in code and drop in a short code we're going to paste that shortcode into here so now it's going to say return to shop we're going to drop that into the container because apparently i didn't put it inside it like usual i'm going to call this one root this is the main container i'm actually going to drop a heading into that container and i'm going to call this uh put my separator onto it just so we've got some styling there and i probably will bring up the text size to probably about 45 i think that's what i've kept on the others now i'm going to go back to this container here i'm going to go to style layout we're going to set it to 1200 and we're going to center align the container i'm going to click back on the root under style layout we're going to put 25 on the sides 100 top to bottom just so we got that padding away from your header and photo like i said before now when you've got items in your car what i'll do is i'll just go to the shop page go visit store and i'm just going to save this so we've kind of just done a base layout i'll just add some extra padding to the row layout so 25 now this is basically all you need to do for this page so we'll just come across to here we'll add a product now you'll notice this button i'll go into this in a bit on how to configure it it'll go view cart and you'll notice how this it's got no styling on the buttons here so i've gone ahead and styled all those buttons and i'll show you how i've done it so we'll start with this here so how to style this you go back into your this is why i left this open we'll go into bricks go into settings go into custom code just drag this down so i've got some more room okay just make some space there and what i'm going to drag in now is basically just the butt on the website so you've got your button and then you've got your hover so this is just copy and paste the reason for important it overrides the uh defaults that are on here at the moment so on here it's showing that we've done style the button but on here it's not and i'm not sure what's going on there but uh one would assume that it's going to bring this across but it's not so we'll just save this here sorry for flicking through the pages so quickly there we'll come back over to the car we'll just hit refresh and now it's these are the colors that i had on the original site so i'm just going to leave them in there and if you've styled up the button it will grab certain parts of the styling surprising enough just not the colors so you say that's a bug so this is your design here and you can muck around you've got little limitations so you can put a background on here and you know put some border or shadow whatever you want to do in that regard but you don't really need to style up too much it's and it's going to cascade pretty much fluently through the mobile version i believe on this one so that's pretty much it for the cart page you like i said come in here style however you want now we're going to jump into the i'm going to go pages again i'm just going to close both these down now we're going to edit the checkout page now the checkout page before i go into detail better grab that code so make sure you grab the shortcode because you're going to need it come into here i'll do my same thing again i'll just add the whoops we don't want two containers i want to add a container inside the container and then put a code in then in there we want to check our code so before we even start styling so it'll drop it in that code we put in before with css will actually come across to this form as well so basically the same with the account page as well so that's kind of handy now i'm just going to hit save on that and then i'm just going to come back up with me here i'm just going to add in a header drag that header and put it in the container and put this into the container as well and change this one to 1200 now you don't need to do exactly how i do things here it's just a habit i've started to give myself here just so it makes it easier long run when i'm doing the mobile version and whatnot so i know the root container is going to hold this certain part this is going to hold that part i'll just style this up and we'll call it uh check out add the separator again it's nice and simple nice and quick here because i've already got my browser pre-configured for it dotted at the orange and under typo we're going to set that to 45 might be worth putting your um header or headers to start at 45 just keep consistency throughout it but i'm pretty sure it might affect these you might have to check what cs tag they are they probably see us header two or head three one of the two now you can come through and style this all up if you wanted to just by grabbing it out of like just going right click inspect and just grabbing the css for it and one last thing before i move on because i'm using actually container content 25 so once again we've got our 25 gap just going to click save on that and i'm going to jump back to here because something you'll notice is when you go over to mobile this is the mobile form it's kind of like squashed in so what i've done is i've grabbed the css code for the form here and the css code for the review that's like the review product area so we'll go back into settings under custom code i'll just drag this down again so we can see it drop that down and basically i'm going to chuck into media queries so when they go below into the mobile query because the other ones don't really matter your landscape seems to be fine your tablet seems to be fine and your desktop seems to be fine it's just the mobile version so what i've done is this is going to call media query screen size so i've set it same size as the mobile on here and then it's going to call this function here well this css class and it's going to go okay get rid of that margin that it had to the right which was 2 and it's going to set it to 100 width and it's going to do the same with the reviews part so if we save that we come into here we refresh we go over to mobile you'll notice how the forms come in so now it's all laying out nicely and it's got rid of that two percent margin on the top part here so i'll include that all of this css in the description so you've got a copy of it so you don't have to go through and find it yourself and now i'm just going to go back to one of the pages or another part of css that we're going to add so if we go back to sorry we're going to have to go into bricks let's go into templates we're gonna go to um archive products i'm gonna click edit with bricks so when you click a product you probably can't see it on here i'll just go into the front view okay it doesn't want to work there either yeah here we are you'll notice how it pulls up the button below and there's no real way to style that so what i've done is i've already grabbed the css for it and we're just going to add it in css so custom code again drag it down drop it in below so basically the button's called add cart i mean added cart so i'm not going to worry about that one there get rid of that so it's called added cart you can add drone hover if you want to but i didn't worry about it and basically you've got to set these to important i noticed when i didn't it didn't pull this information across so i got rid of the padding i've got rid of the margins i've kind of really narrowed it down so now if i hit save on that we come back over to we'll just close these checkouts down come back over to here and we just go refresh we click on this here you'll notice how this is the pink from the other website and it's kind of shrunk it down you can play around with that put it however you want i suppose but um things to keep in mind with this i'll just give you an idea for people that are new the important part is block it'll drop it below and the background color and the color of the text so don't have to worry about margins too much of the line height you can if you don't set them it'll just put more spacing there that's all so that that's pretty much covering most of the areas on here in terms of um your product shop so you shouldn't be viewing it from this direction the way i've been doing it so we'll come back into here go visit site and we got our pet shop so what we've done is we've created our page we've changed a few of the background components that aren't yet in bricks which i assume they will come in due time so we can view our cart we've done a bit of customization on the cart page here and proceed to check out we've got our checkout done a little bit of customization here as well if we go back we can go into the product we've got some basic functionality going on in here now you can set this so it's like a little magnifying glass that when you hover over it highlights up and yeah you set your basic functionality in here as well so it's got all the components that you need to make a good looking website you just got to go in and style it so that's pretty much it i think it's i've kept this tutorial basic as possible for people who are trying to get into it and just remember there's these are the functions here that are going to help you style out the other areas and yeah that's pretty much it if you have any questions feel free to leave a message on the bricks community and i'll try and get back to you as soon as possible and thanks for watching

Channel: MKSCreatives

Views: 1,054

Keywords: #buildwithbricks, #creatives, #design, #bricks, #awesomedesigns, #mkscreatives, #wordpress, #pagebuilder, #webdesign

Id: QzFN87xIDno

Length: 47min 38sec (2858 seconds)

Published: Sat Jul 03 2021