Kadence Tutorial: How to Create an E-commerce Website in WordPress with Kadence.

hey what's up everybody clifton here with clifton wp welcome to the channel in this tutorial we're going to be learning how to create an ecommerce website and we're going to be using the free version of the cadence theme and we're going to be using cadence gutenberg blocks as well this is going to be a wordpress website and we're gonna be merging it with woocommerce and basically creating a great ecommerce website and you can use this for your business or even for a client okay so if you guys are ready to learn some cool tips and tricks when you're creating an ecommerce website using cadence and wordpress and woocommerce and let's go ahead and jump right into the tutorial [Music] so let's go over what it is that we're going to be building this is an e-commerce website completely custom built from scratch this is not built from a template and actually doesn't exist anywhere one of the things that's going to be great about this tutorial is that all the images that i use to build this or that i created to build this are going to be linked in the description below so feel free to download that download those they are completely free and you're more than welcome to use them to follow along or use them in your own projects if you like so let's go ahead and take a look at what we're building right here so this is using the free version of cadence and we're going to build a website that looks just like this so you can have a section here where you can have your logo i'm just using some text you have your navigation here with the categories of products and then there's an icon here for the cart and then we have this beautiful featured area right here with a model on the right and an offering on the left and as you scroll through you'll notice that we have this benefits section this four column benefits section right here and then below that we have these images with some text overlaying the images that all link to the different categories of products and then we'll feature some of the popular products on the front end of the website and then we'll have this standout area right here where people can click through and see more of those products as they scroll through if you scroll all the way down to the bottom of the website we have a beautiful opt-in section right here offering an additional 25 off for joining the email list and then it rounds out with the footer with a fat footer which we're going to learn how to create as well in this tutorial one of the things that you'll notice about this tutorial is as you move through the different pages we have a beautiful category area where we can show the categories of products that we have and then if you drill down into each product we have just a nice simple layout for each product we have a beautiful image on the left and then the product details on the right and then we're going to talk about how we created this section right here and have this guaranteed safe checkout trust factor right here as well and then the descriptions and related products so you're gonna learn how to build all these things and how to style it really nicely everything here is just nice clean and completely usable if you ever wanted to use this as an actual e-commerce store so without any further ado let's go ahead and dive in to building out our website before we do that though i do want to say hey if you are new to the channel please go ahead and subscribe and hit that notification bell so that you can get notified when i release other tutorials that are just like this one we really focus a lot on gutenberg and wordpress and the cadence theme here but we also focus on other tools and plugins that also can benefit you in your wordpress journey so i would really love it if you subscribe to the channel and you stay tuned and feel free to leave a comment and ask me any questions that you want about cadence wordpress or any other tool that you're working on i would love to hear from you let's go ahead and dive right into the tutorial okay so to get started we have a fresh install of wordpress here and so there is nothing in this site other than the default theme and if we go to plugins we don't even have any plugins installed so the first thing we're going to do here is we're going to install the theme that we want to use which is the cadence theme we're going to install the free version and then we're also going to install cadence blocks and then we will install the woocommerce free plugin which is the ecommerce plugin of choice for us to build out our ecommerce website so let's go ahead and get started with that right now so i'm going to go to appearance go to themes and we're going to click on add new then you can do a search for cadence all right it should come up right away there's a cadence theme right here i'm going to click on install and i'm going to click on activate and now this is activated i no longer need this default theme so i'm going to go ahead and delete that so that i have a clean install here of cadence then i'm going to install the plugin so we're going to go to plugins add new and the first one we're going to install is the cadence blocks plugin which is the gutenberg blocks page builder from cadence so we're going to install that it's this one right here click on activate and that is now installed for us to be able to use now cadence does have a lot of starter templates and a few of them are ecommerce templates we're going to be using any of these in this specific tutorial i really want to teach you how to build everything from scratch and then later on if you ever want to use a template then you will be able to extend that template very well knowing some of the principles and core concepts behind building an e-commerce website so for now we're just going to ignore the cadence starter templates and just work with the default so if i look at the website right now you can see that everything here is just pretty much the default so now just a few key housekeeping items really quickly first we're going to go to our settings and let's just make sure that our permalinks are set up correctly so right now you can kind of see this is uh not set up correctly i really want the post name setting for my permalink so that everything is nice and clean i'm gonna go ahead and save my changes there and then just make sure that in the general tab that you have your site title in place and you have your tagline so we just call this a fashion site and then uh i want to set my time zone to an actual time zone which is a los angeles specific time and then i'm gonna go ahead and save that okay so now that that's done then i'm gonna go to the post here all posts and i'm gonna delete all this default content so i don't want any of this content here let's go ahead and just move that to the trash and i'm going to empty the trash and then if we go to pages all pages here's some default content here as well i'm going to delete this sample page i'm going to leave the privacy policy in place i mean i may need that later okay all right so now i know that i have a completely clean install here now the next thing that i want to do so i have my i have my theme in place right so we have that cadence theme and as far as plugins go i only have the cadence blocks plug-in so now we need an e-commerce plug-in which is woocommerce now woocommerce is a free plug-in it's been around for many years and is what majority of the websites that have ecommerce websites and wordpress use to run their e-commerce so to install woocommerce on your site just go ahead and click on add new under the plugins tab then we're going to search for woocommerce and here is the woocommerce e-commerce solution i'm going to click on install now now when you install woocommerce for the first time it is going to run you through this wizard so that you can go ahead and set up the plug-in you can go ahead and skip that if you want to but for the benefit of the people who may be looking seeing this for the first time or maybe not very familiar with woocommerce we're gonna actually go through the wizard and then uh we'll get into the more uh deeper details uh for woocommerce a little bit later so for now this is a fictional e-commerce company so we're just going to use some fictional information for our address okay the country is going to be the united states and our city will be let's make the city san francisco and i'm going to choose not to get product updates because this is just not a real it's not a real thing so and we're going to say no thanks to the tracking the ecommerce website is a fashionable parallel website and we only want physical products we're not doing downloads or subscriptions or any of these other things so just leave this the way that it is continue how many products i don't know yet and currently selling elsewhere is no and continue so here are in this part of the wizard here here are some free features that woocommerce offers i typically don't select any of these things i like to install each thing myself as i need it to prevent any bloat in my site so we can always install any of these later so i'm just going to uncheck that so i don't want any of these installed and go ahead and click continue then it's going to ask you to choose a theme we already have our theme in place so i'm just going to click on continue with my active theme and that's it for installing woocommerce so right here is what we call woocommerce hq and you can see you can always get to all those different areas where they were asking us to make some selections okay so and you can always find this under the woocommerce tab which is right here now one thing i want to point out when you install woocommerce you're gonna get this section right here under the woocommerce which is more about the settings uh for running your ecommerce store but there are three additional uh links that show up in your admin one is the products this is where you create the products that you're going to be selling analytics is basically your reporting on what happens when people buy and your your stock management taxes and coupons and things like that this is the analytics for all those items and then marketing where you basically can take a look at coupons uh and anything that you're doing from a marketing perspective so those are the only things that are added on once you've installed woocommerce but once you've done this now you're technically ready to go ahead and start building out your store so if we go to the front front of the website right now you'll you'll see something like this so the first thing we want to do though is we want to create our home page so that we can assign that home page to the front end of the website and then we're ready to start creating our products so what i'm going to do is i'm going to go back to the dashboard here i'm going to go to pages and click on add new and we're going to create our home page so we'll just call this home and for now all we're going to do is set up the page so it's home and then on the right here we're going to disable the page title we're going to set this to full width the content style will be unboxed and the content vertical padding will be disabled because we're going to be building this with gutenberg blocks specifically cadence blocks we want it to be set up for page building experience and this is these are the settings that i use to be able to do that once that's done go ahead and click on publish and then we have one more step which is to set this page as the home page so i'm going to go ahead and get back to my dashboard i'm going to go to settings go to reading and then right here where it says a static page the new your your home page displays click on a static page and we want to select that home page we just created click on save changes and when you go to the front of the website you now will have this blank canvas to go ahead and start building out your home page we're not going to do that yet so one of the strategies i like to use to build out ecommerce website and most websites that we build is we build it from the inside out meaning you have to populate your content first and then build your design around your content so in the next step here what we're going to do is we're going to go ahead and start adding our products and the content for those products to the website so we can actually have a shop and cat product categories and so on okay so let's go ahead and do that right now so we're gonna go back to the dashboard and in our newly installed woocommerce sections here we're gonna go ahead and go to products now i have four types of products that i wanna create and the first thing i'm going to do before i start creating those products is i'm going to create the categories for those products so that i can go ahead and place those products in those categories so i'm going to come here to products go to categories and the first uh default category that you're always gonna get in woocommerce or even in wordpress a lot of times is the uncategorized this is just a default so i'm gonna use this one but i'm just gonna rename it and we're gonna call this one new arrivals okay this way any default products that we add automatically go into this category let's go ahead and update that and then now i'm going to go back to the categories and add the actual categories that i want so the first one is going to be called watches and the second category will be t-shirts third category will be handbags and the fourth one will be shoes okay so now that the categories are created i can then proceed to start creating my products so i'm going to go here to the product section of the admin and i'm going to click on add new and let's create our first product so this is the product creation section in woocommerce here so if you notice this isn't gutenberg activated there are some uh times or some plugins that will allow you to make this into a goodenberg one but we're just using this plain vanilla as it is right now so i'm going to be creating a watch product so i'm going to go ahead to my product categories and select watches then i'm gonna name my product so let's call this product black and gold watch okay very simple and then here is where you would put that product description so i'm just gonna grab some dummy text from the lorem ipsum website so this is just a placeholder text for now and we're going to put that in there then as you scroll down you'll get to the product data section this is where you're going to put in the details about your product so the pricing any sale pricing any inventory the shipping things like that so this is just going to be a simple product meaning it's just a product there are no variations on this product meaning it's not there's no large size or medium or so on it's just a straight product here under product data there are different types of product that you can set up in woocommerce you can set up a group product or an affiliate product or variable product we're only doing a simple product for this specific tutorial so simple product the price i'm just going to put an arbitrary price here so let's just say 125 dollars for this watch okay for the shipping here one of the things that woocommerce requires is that in your shipping you need to have the sizing of it the weight the length the width and height so that if you integrate this with some kind of shipping provider this information will be very helpful in terms of determining the pricing so just for the purposes of this tutorial i'm just going to make up some dimensions right so we just want to make sure that you always have this filled out if you're going to be creating shipping physical products and that's really all i need to do here just the pricing and the shipping here then in the product short description i'm just going to repeat the description here but maybe make it shorter okay and then the only thing that we need now is an image for our watch so i'm going to come over here click on set product image select files and inside of my folder here for this tutorial i'm going to go ahead and grab a watch okay so here's our watch so now i've now set that as the product image okay so now that we've done that i'm going to go ahead and publish this and we can go ahead and take a look at our product on the front end just click on view product and this is the product page uh from cadence so you can see it's actually even though we're using the default version of cadence meaning we haven't done any styling or designing or anything like that this is just a default install it's still a very presentable product page so you have your image here and it magnifies when you hover over it you have the image title the pricing the description you'll you have the quantity and the add to cart button is already there and the description is right here below and then additional information is also over here as well so this is a very very simple straightforward product page and if you were selling products right now and you wanted to create a simple e-commerce website this would actually be enough all you need to do now is just connect your payment gateway and do the rest of the setup which we'll cover in a little bit here and you are ready to go okay but we are actually going to style this because there are additional options that are available and we're going to explore those additional options with the free version of cadence and we're going to go as far as we can with the free version once we've done that then i'm going to go ahead and install the pro version of the cadence theme and cadence blocks and you'll see some of the options that are available to you there so let's take a look at some of the options that are available for you to customize your products using uh the cadence theme okay so this is the products page that comes with cadence and already this is a very nice and clean uh products page it has everything that you need so the product is there on the left and you have all the information here on the right and they add to cart button so then the descriptions are down there below it so everything that you need is here and it presents in a very clean way so this is great but there are some additional elements that can be added to this to make it even much nicer and much more dynamic so let's take a look at that so to customize the product page you'll need to go to customize and then scroll down here to the woocommerce section click that and here you'll notice all the customization capabilities or all the things that you can customize with the free version of cadence of the cadence theme right so there's a store notice where you can put a notice about your store uh if you have something that you want to announce and then we have the product catalog single product layouts product images checkout and the my account layout the one we're interested in is the single product layout so go ahead and click on that and here is where you can make some changes you can make design changes if you want so if you want to change any of the colors or fonts you can go ahead and do that here we're doing it globally so we won't be doing anything in here the general area is where we're really going to be doing some work so here's where you can make some choices you can choose to have an extra title area right so if i wanted to have the title at the very top i could do that or you can choose not to you can choose to have breadcrumbs instead which is what i think it's better actually because it helps with navigation or you can choose to have nothing at all it's entirely up to you i like to have the breadcrumbs you can choose your product layout so we can either have this be the normal layout or you can have it be narrow like that you can have it be completely full width or if you have a sidebar you could include a sidebar by selecting one of these left or right we're going to keep that at the normal one because that that presents the best for this specific website then as you scroll down we have the content style and uh we have the option of having it be boxed like so right so this is the box version of it and this actually looks nice as well or you can have it be unboxed which is what i prefer just kind of gives it a much more open feel you can choose to have your content vertical padding enabled or disabled but where we're really interested here is going to be the product elements so this is kind of what separates cadence from some of the others that are out there that support e-commerce so here you have the option to turn on and off elements on the product page but you can also add elements as well and by to turn it off all you need to do is just click on the eyeball here and it will turn off whatever element so i just turned off the titles and it does it across the board for all your products of course we don't want to turn off our titles we want to have a title for our products but if you look further down in some of these options here one of the ones that you'll see is actually two items that you'll see there's the extras and the payments if you turn on the extras then you get a chance to add additional information which is right over here to your products right so and it's always best to kind of have more generalized information right so some people if you're selling just one product and maybe you want to talk about the workmanship right so you might want to say your first your first feature here maybe you might say excellent workmanship okay and that would work obviously for a watch however it may not work for a t-shirt so so you want to make sure that you have something that's applicable across the board for all your products and that's why having something like satisfaction guaranteed is great of course you can put anything in here that you want over here where it says free shipping on orders over one hundred dollars you can change that text you can make it uh fifty dollars or forty dollars or fifty dollars if you want or you can change the entire text uh in entirely so you might say get a free gift or something like that right so it's entirely up to you i prefer to have some kind of benefit uh highlighted there it's entirely up to you and you get the opportunity so there's four items here you can have as little as three or uh or as many as five right so allow for even a fifth feature so if i wanted to add an extra feature here like easy returns and refunds or something like that right so you can put that there as well if you wanted to and then you can also change the icon that's next to it so by adding that already this page is a lot more informative and it's a lot more dynamic okay the other thing that you can add is a trust factor in terms of the payments right so the kind of payments that you accept if i turn this on if i toggle this on then there is a payment badge and a guaranteed safe checkout so this is improving the trust factor of your product page and it shows all the credit cards that you accept right and you can conf configure this further if you want to so if you want this to be a grayed out version of it right so that looks pretty good like that and then you can also choose the items that you want to hide to highlight so if you want to show the visa or mastercard amex and show on or you want to toggle those off you can so say for instance i don't accept paypal then i can toggle off paypal and paypal won't be there right and also you can add up to i believe up to five other custom icons as well right so if you have images that you're using you can go ahead and toggle one of these on and upload that image and add that to this guaranteed safe checkout section right here and i think that's a very very useful tool to have all right let's go ahead and show stripe because we also we also accept stripes so there's stripe right there as well you can also do the same thing okay uh let's and i also like the colored version better it's just much more colorful and then as you scroll down there are two more things that that actually three more things that you can customize here so we can toggle on uh to use a custom quantity plus and minus so right now with the quantities you can move them up and down to select how much of the quantity of the product that you want another option for doing that is to turn on the custom quantity plus and minus and if you do that then you'll have this minus sign and plus sign there where people can just use the plus sign or minus sign to navigate that versus having the up and down arrows you can also change the tab style of the description right here so you see how we have these three tabs which is pretty standard in woocommerce but under each tab you have some information and then you have the title of that topic listed again sometimes you might not want that so there is a toggle here that will allow you to turn that off so right here where it says um show default headings and tab content you can toggle that off and when you do that then that extra heading disappears okay and then the actual tab style here so we have this sort of traditional tab style you can change that by center it center it and this just gives you a much cleaner look so now your product page just looks much more dynamic looks more full and offers you know way more conversion elements than when it was there by itself okay so a matter of fact i really like this so i think i'm just going to leave it like this and have it flow through all the other products and that is how you customize the product page in cadent okay so now that you can see how we've created a product and how simple it was what i'm going to do next is i'm going to go ahead and create the rest of the products so i'm gonna bring in all the products into this uh into this install and then we're gonna go ahead and progress through learning the rest of the options that we have with woocommerce and cadence and so as not to waste your time i'm going to go ahead and do that behind the scenes and by the time i uh flip back to this all those products will be installed all right so i've gone ahead and created additional products so now we have about 32 products in the shop and now what we need to do is now let's start applying our design to the website right so right now this looks fairly plain and everything is in its default default state so the first thing we need to do is we need to create a menu right so a proper menu for the site and then we're going to build out the home page with all the different e-commerce sections that you'll find in the home page so let's go ahead and start with the menu to create that menu just go to the dashboard go to appearance click on menu and we're going to call this one our main menu so this is where we create the menu so click on main menu create menu all right now we're ready to start adding some pages to this menu so i'm going to click here to do view all so i can see all the items i have access to i definitely want a home menu item and then what i'm going to do is i'm going to put all the categories as menu items so to be able to do that let's go ahead and open up the screen options here and i just want to make sure that product categories is selected so when i do that then what that allows me to do is basically be able to add the product categories that i created initially i have four products actually i have five product categories so but i just want the main ones so i'm going to select the handbags shirts shoes t-shirts and watches and we're going to go ahead and add that in that place then the next thing i'm going to do is i'm going to create a custom link here until i can build a page for this for contact add new and uh yeah so far this looks good you know what let's go ahead and add the product category of new arrivals we don't have any items in there yet but it's kind of nice to have that so we'll have new arrivals all right so this is a plenty uh menu items for us for this portion i'm going to click set save menu and when we go actually let's assign this to be the primary menu and i also want this to be the mobile menu and then just save the work i'm now going to go to the home page and you'll see now that our menu items are better arranged and organized correctly great then the next thing we need to do is let's go ahead and customize this a little bit so that the fonts look a little bit better so i'm gonna go to customize we're gonna go to header then primary navigation and i can also go over here and select the navigation as well and still bring me to the same place so i can go ahead and make these design changes so the thing that i want to actually change is i want to change these size of this this is really big font here so i'm going to go to design and we're going to go to the navigational font and i want to select size i want to set this to 15 actually let's set it to 14 and then i'm going to transform it to all be capitalized which makes it a little bit bigger okay that looks good then next thing i'm going to do i'm going to go back to the general here and i'm going to increase the spacing between the items so let's get this so there's plenty of spacing so everything kind of stands on its own we can see it so let's go with 2.25 m that looks great i'm going to publish and now the header is pretty much done now there is one other thing that i want to do in the header so when you go back out here let's go to the editor items you have these items these available items in the header so cadence has a header that you can build out with additional widgets so one of these widgets is the cards so i'm going to go ahead and drag that cart over here right after our navigation all right so then our cart's over there now this is looking more like an e-commerce header i'm gonna go ahead and publish my changes and now our heading is pretty much done next we're going to start working on the home page sections so let's go ahead and get into that right now all right so to build out our homepage we're going to go ahead and edit the home page that we have here so this blank one right here and we're going to start adding our sections to the home page so the first thing that i want to do is i want to add a row block and i can do that by either clicking this plus sign here doing a forward slash and typing row to give me the cadence row layout or i can click on the plus sign right here and drag a layout in there as well all that would work for me to be able to pull in gutenberg blocks into the page so i'm going to go ahead and select row layout this this is the one that i want i'm going to select a one column row and then within this row i'm going to add a two column row as well that way i have an outer container and an intersection to build out the featured area so we're going to start off with the featured area of the home page first where we're going to feature the main call to action and some kind of an image or a model there to open up the page so go ahead and select the outermost row here so i'm going to select this outermost row and if you're trying to get to this and you can't open up the list tree and you can select that row layout like this right here okay so now that i have that i'm going to go over here to the right and i'm going to go down to structure settings and what i want to do here is i want to set set the content max width to inherit from the theme so it's about 1290 pixels and that's going to go ahead and bring in the internal container area there to be centered in the middle of the page all right then the next thing that i want to do is i want to add a background to that outer container so i'm going to go here to the background settings i'm going to select click on select image and i already have an image prepared and for those of you who may be following along with this tutorial if you are the links to the images that i use in this tutorial are going to be in the description below so feel free to download those totally free and you can use them to follow along with this tutorial so i'm going to go ahead and insert that into the page here so you can kind of see it here and then what i want to do over here in the preview of the image i'm going to go ahead and grab this circle so i'm just clicking down on this and i'm going to move it straight up so that it's at a 50 percent left to the left and at the top zero right so that's going to go ahead and align the image to the very top of this container right here then i do want to see more of this container so what i'm going to do is i'm going to scroll back down to the structure settings and i'm going to increase the minimum height here to 800 pixels and that's going to go ahead and open that up for me nicely so that i can see what i'm working on then i'll i can also see that this inner container here is aligned to the top we're gonna go ahead and vertical align that to the middle by selecting the vertical alignment option here and we're gonna select align middle and that's gonna bring it to the middle now we're ready to start adding in the content for this section right here so we're going to add some heading text to this and some regular text and and the button so that it has a nice call to action and whatever it is that we're trying to promote on the home page of the e-commerce web page will be promoted here so i'm going to click on the first column i'm going to click on the plus sign i want an advanced heading and for that heading we're going to say spring sale and now we're going to go ahead and format this so that we can see what we're writing so we can either change the colors here on the right or we can use a short menu right here to go ahead and do that i will use b using this short menu so first i'm going to set up the color so i can see what i'm working on and the color that i want to use is actually a blue color here so we're going to go ahead and just align that here so 0 8 8 ef 0 will be our color that we want to use kind of matches the colored splotches that are on the jacket of our model here and then the next thing that i want to do here is on the typography settings right here i want this to be uppercase that looks pretty good then the next thing that i'm going to do here is i'm going to set a size of 22 and i'm also going to give it a line height of 22 so that way the height of it is actually nice and uniform for when we add our next piece of content to this column and speaking of next piece of content i'm gonna go ahead and do that now so i can go ahead and click on the plus sign here we're gonna add an advanced heading and we're gonna offer i'll put up our offer here which is about which is gonna be a 75 percent off okay and now i can go ahead and format this so we're going to add some color to this i want this to be white so you can go ahead and type f six times that will give you the hex code for the white color and then over here on the typography settings i'm going to go ahead and pick the system default so it can give me all the weights and i'm going to set that to ultra bold 900 to make it nice and thick and then we're going to make this uh pretty big okay so we're going to go 95 pixels so that we can all see it and then to eliminate some of the spacing i want to set the line height here so let's go ahead and open up our topography and i'm going to set light height to let's see what it looks like at 80. okay that looks pretty good nice and close okay so 75 off but 75 off what well 75 off uh let's say our new arrivals right so i'm going to add another advanced heading there and we're going to type all our all our new arrivals okay and just like we've done all the other ones we're gonna go ahead and format this i want it to be white okay and here and the typography settings we're going to set this to 24 and i'm also going to set the line height to 24. and then uh the other thing that i want to do here is let's take a look at that i probably want to eliminate some of the spacing between the two here so i'm going to select the 75 off and i'm going to come over here to the right side and we're going to open up the heading so this headings spacing settings which is right here i'm going to open that up and at the bottom i'm going to set that to 0. that is a little bit too close so let's go ahead and put some space between that let's set that to 10. all right now that looks pretty good okay so 75 off all our new arrivals then i also want some just some regular text here so for that i'm going to go to my lorem ipsum website which is lipsim.com we're going to grab some dummy text from there come back to your site click in the area right here and i still want to use an advanced heading for this so i'll do a forward slash grab the advanced heading and then i'm going to set this advanced heading to be a paragraph which is one of my favorite things about the cadence heading block i can set it to be whatever type of heading i want including a paragraph so it's just regular text the benefit of doing that is that you get all the formatting options that come with the headings but that doesn't come with the traditional gutenberg paragraph block so i'm going to select the paragraph here and i'm going to go ahead and paste that information in here and now i can go ahead and change the color so we're going to set this to be also a white color okay so so far this is actually looking pretty good next thing that i want to do is i want to add a button here but i don't want to just add a button i want to add some design element to it as well so i'm going to show you a nice little uh technique that we use to draw eyes to a button right so what i'm going to do here is right below the text i'm going to go ahead and add a row layout i want this to be a two column row layout like that and then in the first column we're going to add a cadence divider so just go ahead and click on the plus sign and search for a divider here's the spacer divider right there i'm going to select that and it gives me this divider right here over here on the right are all the customization settings for this divider and spacer what i want to do with that is here i'm going to set this to be 20 pixels in height and then the divider style we're going to make that a stripe divider so it looks like that okay the next thing that i want to do is i want to line this completely to the left and then i also want the width of the divider to be full width so i want it to go all the way across that column so we're going to set this to 100 all right so far that looks good now right next to that is where we're going to add our button so go ahead and click on the plus sign in the second column and we're going to select the advanced button and for the text for this advanced button it's going to say shop now and now we can go ahead and format format our button so over here to the right first thing we want to do button alignment is going to be to the left then the button button settings right here we're going to set this button to be let's leave it at medium size medium size is fine for now but we want to set up the colors for this button so the text color is going to be a white color okay and then the background color we will leave transparent but the border color we're also going to set that to be white so remember white the hex code is just six f's okay then the hover color for the button so i want when we hover over this button it becomes a solid button and the color that we're going to use for that for that hover is going to be a inverse of this so we want it to be a white color with black text so the hover color text color is going to going to be black and we could use we could either use our our palette color here or we could do it ourselves so we can go zero zero zero six zeros will give us the dark color there and then the background is going to be white and so when i hover over this we can now see the shop now right and then let's make the hoverbox border color also white okay so it fills in really nicely that looks good then the next thing that we want to do is add an icon so right here under the icon settings select the icon settings i'm going to search for a cart and let's use this card right here and that looks really good let's look at the hover again that looks really nice and now when we click away from that let's look at how everything's lining up so i'm seeing that right here it's not really lining up in the center so i want that to line up in the center so i'm going to go ahead and select that row so here's the row right here and if you have a hard time selecting that remember you can always open up the list tree and find the row in the list tree and that will allow you to select it now that i've selected it i want to align the items vertically align the items to the center so i'm going to vertically align it to the middle like that and now it's perfectly in the middle let's click away so we can see it that looks really good okay so now let's also look at it on the front end just to make sure that all our items are lining up correctly now i am noticing that there's a lot of space it's a lot of space right here that space is coming from the default padding that the row layout has when you put it in there so let's select that row and we're going to eliminate that spacing so i'm going to come over here to the padding and margin and i'm just going to limit i'm just going to set that to zero all right so that gives me a little more spacing and it's still a little bit uh it's a little bit much so i'm still i'm going to select this select the heading here or the paragraph here and then i'm gonna come over here to the right we're gonna go to spacing settings and let's set this margin to 15 or better yet ten all right that looks a lot better okay so now i'm going to go ahead and update to save my changes and when we view the page we now have this beautiful heading area we've got the model here on the right and we have our call to action and offer here on the left so next we're going to go ahead and build out the rest of the page so the all the different sections that we have here as we put this together and pretty soon we'll have a pretty nice home page for our ecommerce website so let's go ahead and add a benefits section to our ecommerce homepage here so i'm going to go here to edit page and directly below this hero area right here i'm going to go ahead and add a new block looks like there's a block there already let's get rid of that click the plus sign here add a row layout i'm going to select a one column row and then directly inside of that i'm going to add a four column row so i can have up to four benefits that i can highlight i'm going to select the outermost row here and the first thing i'm going to do with the padding and margin is i'm going to zero that out so that it's a little bit more narrow and then on the structure settings here i want there to be i want the max width to be inherited from the theme which is about 1290 pixels so that will center that internal area for me all right next now i need to just add my benefits to do that we're going to be utilizing the info box from cadence blog so here's the info box here or you can do a search here for info box and you will see this one we'll add that in there and we're now going to go ahead and configure this so that it presents our benefits nicely the benefit that we're going to be highlighting here is free shipping okay so just type in free shipping and we only want about two lines of text that would be plenty to describe that benefit then over here on the right we're going to go to the container settings actually before we do that let's go ahead and content align this to the left then in the container settings i don't want a background or a border so i'm going to go ahead and select the container background and here where you have the hex code and then rgba we're going to put a 0 in the a field that's going to create a transparency for us there and then in the container border we're going to do the exact same thing select the color and put a 0 in the a right there the container padding i want this padding i don't want any padding there so we're going to make that zero as well and then the next thing that we're going to do here is to make sure that the hover state also doesn't have any color to it so i'm going to click on the hover state and here in the hover background i'm going to select it and we're going to zero out the a field so it's transparent and do the same thing for the border okay next we need to deal with our media or our icon so under the media settings go ahead and set the media to be aligned to the left of the content there which looks good and then we'll leave it vertically aligned to the middle for now and then we'll just change the icon so the icon has has to be something that has to do with shipping so we're going to type in a truck and that is our shipping icon and then we're going to reduce the size of this icon to 30 pixels then the other thing that i want to do here with the icon if you keep scrolling down you'll see that the icon has these margins and there's about 15 pixels on the left hand side of this i'm going to go ahead and zero that out so i have more space and this stretches out a little bit more right next we're going to deal with the title settings so we're going to significantly reduce the size of the title and we're going to make this title 15 pixels and then the line height we're going to make the line height so let's make the line height 15 pixels as well all right and then next uh we're going to go ahead and scroll down to the text transform i'm going to make this uppercase so it's a little more strong and bold and then as we scroll down here we have a margin here we're just going to reduce this to 5 pixels so it brings the text a little bit closer all right next is the text settings text settings we're also going to reduce that let's make that 14 pixels and the line height here that we're going to be using let's make that 10 picks actually you know let's keep it at 14. maybe a little bit bigger let's make it 20. okay that looks good then uh the next thing that we need to do uh here now that we've we've created our nice little benefit right here the next thing that we need to do is we need to copy that across these other columns and then change out uh the different benefits into different things okay so now that we have this all set up just go ahead and select your info box like i've done right here click on the more options for that box and click on copy and then click into the next column select the paragraph gutenberg block and then press command v if you're on a mac or control v if you're on a pc and we're going to copy that across each column all right so now our benefits are lined up next we need to change each benefits to be different right so the second one is going to be a money back guarantee okay and here we're going to give it an appropriate icon so go to the media settings here get rid of the truck do a search for hand and you'll see this nice hand one with the dollar sign floating above it let's go ahead and add that the next one here is going to be easy returns and refunds okay and we're going to scroll here go to the media settings and for this one i want to use a box okay to represent the returns and then the last one is going to be great customer service okay and we're going to go to the media settings here remove the truck and we're going to look for something that represents customer service so let's type in headphones all right so here's here's one that looks like it fits the bill all right so now this looks uh pretty good now the other thing i want to do is i just want to separate this from the hero area and the rest of the page so i'm going to select the outer row again and we're going to go to the right under border settings we're going to add a very light border so you can type in six e's that will give you a light border there and we want the border to show just on the bottom so we're gonna put a one pixel border on the bottom there and then let's go ahead and update our work and take a look at it on the front page and you'll see here you have a very very professional looking benefits section for your ecommerce page up next we'll go ahead and create the rest of the page by adding in category sections uh products and then opt-in or two and uh and then go ahead and proceed to the next part of the tutorial all right to add categories to our homepage you're gonna go to edit page and right below our benefits here we're going to add a new container block or a row block here we go it's going to have one column and then what we're going to do is inside of that row we're going to add a three column row layout to be able to add our categories to so these are sections that are going to link to the categories of products that you have to offer in your store and then once again we're going to select the outermost row here go to the structure settings settings and make sure that the max width is inherited from the theme so that everything is centered all right so we're going to work through each one of these and it's going to get a little bit complex but not too difficult this is absolutely something that you can everyone can do so what we want to do here is we want to go ahead and set this up so i'm going to select the inside row here where we have the three columns and over here to the right i want one row to be really big and then the other two rows to be uh small but of equal width so this is the layout that i'm actually going to be working with here so this is the left heavy uh 50 and then 25 and 25 so let's go ahead and click on that and it'll do it for you automatically all right so now we're going to work on the first section here so this section here is going to be our new arrival section so what i'm going to do is i'm going to click in here and i'm going to add a another row layout it's going to be one column and inside of this row i'm going to select this row here like this inside of this uh row here we're going to be looking for this section so if you just click the the row you just added it will show you the section block which is inside of a row so that's the container inside of a row or column inside of a row to make this make more sense let me open this up here for a minute so here is the outer row with the three layouts then we have a section all right then there's a row layout that we've added um that we've added here right and then another section right and then there's another relay out there and another section this section right here is what we want to work on okay so what we're going to do is we're now going to go ahead and give the row layout on the outside a background and then we will put our content inside of the section okay so i'm going to select this row layout here then i'm going to go to my background settings select an image and the image we're going to select is this one we're going to use this for our new arrivals background so it creates a background here for me alright then the next thing i want to do is i want to go ahead and make sure that this is aligned to the top like that and then i want to add my content in here so i'm going to go ahead and click on the plus sign on the inside of that section we're going to add a advanced heading and we're going to call this new arrivals and then we're going to click the plus sign again add another advanced heading and this time we're actually let's get rid of the advantage we don't need an advanced heading actually what we want here is we want a button so i'm going to select the button all right and and i'm going to type in here see what's new i'm going to go ahead and align this to the left so it's directly under our heading here and let's go ahead and make this heading let's go let's go ahead and customize this so we're going to set the color to be white and then let's go ahead and customize our button as well so this is going to be a clear button so we're going to do here the text color is going to be white okay the background color is going to be clear the border color is also going to be white for the hover state here we're going to go ahead and select the uh hover color as fine as white but the background color i want it to be a solid color when you hover over the background and that color is going to be white which actually means the text color is going to be a dark color okay so if i hover over this then i'm able to see my text and then what i want to do is i want to make sure that the hover border color matches the background color on hover so let's give that six f's and now that looks great just like that okay now the next thing that i want to do here is you know notice how this is very uh narrow the way that it is okay so what i'm going to do now is i'm going to add a minimum height to it so i'm going to go ahead and select that row again there it is i'm going to go over here to structure settings and just for now we're going to give it a minimum height of 450 pixels okay then on the inside i want this content to be actually aligned to the bottom so i'm going to select the vertical align here and we're going to say align bottom and now we have our new arrivals section okay so next we need to create the other sections right if we remember our categories are shirts handbags shoes and t-shirts right and and watches so we want to have a category for each one aligned here as well so i'm going to repeat the same thing but inside of these smaller columns okay so i'm going to click on the first column i'm going to add a row layout to that one column row layout and then on the outside of that here i'm gonna go ahead and add a background so i'm just repeating the same process so i'm gonna come here to the background select the image and for this one we're gonna go with let's go with watches okay so these are going to be our watch category okay okay so what i'm going to do here now is i'm going to click inside of this column here i'm going to add an advanced heading and we're going to call this watches we're going to go ahead and add some color to that so let's make that white so that it's visible there it is and then we're going to add another advanced heading but this time we're going to set it up to be a paragraph and the text here that we want is view all so that we can link this to the watches so i'm going to go ahead and click on this i'm going to add some color to it as well i'm going to make this white now what's great about the advanced headings and cadence blocks is you can come over here to the right side and there are link settings for every heading or every heading block with cadence blocks so i'm going to click on the link settings here and we're going to go ahead and do a search for watches and here are the watch options and there should be this should be a watch category that shows up all right i'm not seeing the watch category in here so there's a little workaround that i have so what i do is i just go ahead and highlight the text click on this link right here i'm going to type in watches here and it will show me the category so here's that category right here and when we select it i can go ahead and click edit highlight it copy it break the link and then come in here and put it where i want it which is right there okay it's just a little work around if you ever run into some issues trying to add links to your headings okay so now that we've done that the other thing that we want to do here so remember we want our our row here we want everything to be aligned to the bottom so i'm going to go ahead and select the outer row and i'm going to align everything to the bottom okay and then let's create some space here and we're going to give this some padding so let's go with 80 at the top maybe a little bit more about 90 pixels and that's looking pretty good there let me add another 10 pixels all right so that's looking pretty good now one of the things that i'm noticing is i'm not able to see my text very well and that's that's exactly why you want to use a row layout back here that way you can add an overlay to it if you want right so i can just select this here which now which is a row layout and i can come to the background overlay settings and we can do a background color so let's do that one or maybe a little bit darker more darker how about that yeah so that looks pretty good now we can see our text very well the other thing is i noticed there's too much of a gap between the two here so i'm gonna select the watches i'm gonna go to the spacing settings and we're going to do a margin of 5 pixels or about 0 pixels how about that yeah there we go so now we have this in place now we need to just duplicate what we just did here below it right so to be able to do that all i'm going to do is i'm going to go go ahead and open up my list view find that row or just select it so here's the row and then what i want to do is i'm going to copy that row now that i've copied it right below it i'm going to go ahead and paste it by adding a paragraph and doing a command v you can remember it's ctrl v if you are using uh is control v if you are using a pc right so now i have that in place there and i'm going to do the same thing in here as well click the plus sign paragraph and just paste that whole setup in here that way you save yourself some time having to rebuild everything again and now i just need to add some margin between the two right so i'm going to select that last one that i created and right here i'm going to go to padding and margin and the margin i'm going to add here is 25 pixels and we'll do the same here padding and merging 25 pixels okay so now we have a pretty good looking category section so let's close this out so we can see everything all right so now everything looks looks pretty good and if you want to align this so that everything is aligned what i like to do is every time i do one of these i like to check the front end to see how everything is aligning and it's matching up pretty well right so maybe if you don't like this little gap here i like the gap but if you don't like this little gap and you want everything to really align then we now know that we need to adjust this here so looking at it if i'm just eyeballing this this is about 40 pixels so i know that i can now go back here and i can select this row go to structure settings and i can reduce this to 410 and uh okay so that's a little bit too much too much so let's increase increase you can increase this incrementally and there it is perfect match update and then let's view the page and now everything is lined up really nice and this is our category section so now what we need to do is we need to change these to the respective categories so we already got one for watches let's go ahead and make one for t-shirts handbags and shoes so i'm gonna click on edit page and now we're gonna go over to the watches row right here i'm sorry the next row right here says watches that's why i said that and let's change this one to t-shirts and then i'm going to go ahead and select the row itself go to the background settings of that row and here we're going to go ahead and edit this image and we want our t-shirt image or t-shirt category image right there all right and then we also need to change this link to be our t-shirts link okay so again kind of the same thing i'm going to highlight this this is my little work around there we go highlight this come over here to the link settings we're going to open this up and we can see the product category here and i know that is this one says watches but i labeled the other one as t-shirts i'm just going to type t dash shirts and i will link accordingly all right so now that one's done next we're going to do this one let's make this one our handbags so i'm going to select the row itself go to the background settings and edit the image select our handbag category image add that in change the text to handbags select the view all go to the right here link settings for that heading edit the heading wrap link and we're going to change this text to say handbags and save it and then the final one is going to be our shoes so select the row background settings edit image and we're looking for the shoes here's the one we use for shoes all right change the text click on the second heading here which we're using for the link for that category go to the right link settings edit the link and we're going to make this shoes update all right and that looks pretty good if we go to the front end of the website we can see that her home page is coming together really nicely right so we've got this really nice new arrivals oh we know what we need to link this to our new arrivals right so let's go ahead and click on edit page select the button over here on the right or actually right here we could do it right here we could type in new arrivals okay how about just new sometimes it searches for it and it finds it and sometimes it doesn't so it's not doing it right now so that that's fine all we need to do is go ahead and grab one of these links so just select any one of the you created before go to the link settings hit the edit icon there select all that text and then make sure to resubmit it go back to the button paste that in and we know it's the new arrival so we know the slug is going to be new dash arrivals and then we're going to save that and update all right so now our setup here this looks pretty nice our setup is is for the categories is already in place now we just need to add some products add an opt-in or two and we are done with the home page so let's go ahead and do those uh final pieces right now okay so what we're gonna do next is we're gonna feature some of our products we're going to feature a few of them in every category on our home page this will fill out the home page really nicely and give people a chance to be able to purchase the products directly so to be able to do that we're just going to come in and pull in about four of each product so four of each watch four of each t-shirts four each handbag or four of each shoes that should give us enough content to fill out the page and then we can have some things in between that as well to give us a really nice looking uh home page for our ecommerce website all right so let's go ahead and do that so we're going to go here to edit page i can continue with our homepage building here and what i'd like to do i'm just going to close this section for a minute here so i can see everything what i'm going to do here is i'm going to add a block a roadblock and this roadblock is going to feature our popular watches as an example right so i'm going to come here go to the select row layout right and what i'm doing here is i'm just doing a forward slash row and that's pulling up this little menu for me to be able to select the real layouts just a shortcut from being able to go to the plus sign and doing it that way okay i'm going to open up a one column row here and then i'm going to go on the inside of this row and do another row layout and this is also going to be a one column row so that way i have an outer container in a container for the outer container here let's go ahead and select that outer container i'm now going to go ahead and set the structure settings so that the content max width is going to be inherited for the theme which is going to break everything in for me and then inside of here i'm going to start putting in my content and what i want here is i want to title a divider and some products okay so i'm going to do the plus sign right here go to advanced heading and what i want this to be is popular watches okay you can say popular watches or featured watches of whichever one you want then i'm going to go ahead and center this text and for the topography here i want to transform this to uppercase okay and i think i'd like this to be a little bit thicker okay so let's make this bold it's already bold let's make it ultra bold all right that looks better yeah it kind of matches everything so popular watches now below this i want a divider so i'm going to click the plus sign and i'm going to search for divider cadence calls this the spacer slash divider this is the one that i want i'm gonna select that and that looks pretty good there uh it's 60 pixels tall which is pretty tall in this case i just 40 pixels will be tall enough for me and then down here what i want you to do is select the stripe version of it okay and then let's just add a little bit more color so we can pick from our color palette here uh let's make a little bit darker all right so that looks good and now remember every time you add a advanced heading there's a there's a default um gap here there's a default margin between that so if you ever feel like this is too tall or too much space you can always select the heading and come over here to the spacing settings and for instance if i zeroed this out that will bring everything a lot closer but i'm not going to do that right now that's fine just want to see what it looks like after we we're done building it so we've created our advanced heading we've created a divider here i think the divider is a little bit too long i would actually like this divider to be a little bit shorter so select the divider come over here to the right side and we're going to look for the divider with by percentage which is right here right now it's at eighty percent let's see what it looks like at fifty percent okay um maybe twenty percent there we go i like this okay then the next thing i'm going to do here is i'm now going to add my products now when you have woocommerce installed there are some blocks that actually come with woocommerce so if we scroll through the blocks here or you can just do a search for woo if you do a search for wu you'll see a bunch of these blocks right there's all kinds of things that you can pull in to really create a nice dynamic page and pull in some products okay so the one that we are actually looking for let's close this out i want to see all of them the one that we're actually looking for is scroll let's see let's find that whoo there we go woocommerce blocks see all the blocks that they have here's quite a bit of them the one that i'm actually looking for is this hand-picked products i really like this block because what it allows you to do is allows you to select individual products and pull that into a row right so i'm going to go ahead and select this one all right and for me from the handpicked products i want this to be watches now i could just easily just go ahead and do a search for watches and it will pull up all the watches first i have to spell that right there we go so that pulls up all the all the products that have the term watch in them if i make that singular there we go it pulls up all the term name watch so you know that's why when i named the products i always put the actual thing that the product is right so black and gold luxury watch black leather watch and so on that then allows me to pull in the watch so then i can just select which ones that i want so i would like this red band watch i would like the gold and silver rim watch let's also do the silver rim watch and let's do the snakeskin band watch so that's four products right and over here on the right hand side we can go ahead and set how many columns so since i'm having four products i'm gonna set this to four columns okay and here's the content that will be visible so it'll show me the product title the price the rating and the add to cart button great that's all i really need so i'm going to go ahead and click done and it pulls in the watches just like that see it's absolutely beautiful how this pulls in and because we're using cadence this is sort of the cadence uh sleek clean way of displaying products right and you already can see how much how much of a difference this makes on the page so let's go ahead and update our work and then take a look at it on the front end and if we scroll through we can now see we have our popular watches right and when you hover over it then it will show the add to cart so now that we have this i also want to be able to because you can see just these four watches i want to be able to show something that will allow you to see all the watches right see all the watches so i could do that in a number of ways i could create a button and link that button to the watches category but i want to do it in a very visual way and sort of in a way that interrupts the viewers pattern so what we're going to do here i'm going to show you something really cool we're going to click on edit page and we're going to scroll down here and i'm going to add another row it's going to be inside of this entire block right here i'm going to add another row here and we're going to click the plus sign and we're going to do a row layout here and i'm going to do a two column row okay two column row and in this row right here we're going to add an image advanced gallery the advanced gallery and cadence can be used to create a gallery but it can also be used to create just a single image if you want a lot of people don't realize that but you can so we're going to select advanced gallery i'm going to go to my media library and i'm going to select this specific watch so this watch right here is going to represent the overall category of watches so this isn't a product this is just pulling in an image so i'm gonna click create new gallery insert gallery and here's my watch now this is automatically defaulting to a three column gallery i want that to be one so it just looks like one big image kind of like that okay then the next thing that i'm going to do here is i'm going to leave this as as gallery i'm going to leave that the way that it is the next thing i'm going to do here is i'm now going to add some content on the right hand side over here okay so i'm going to click on the plus sign we're going to add an advanced heading and we're going to call this see all premium watches okay and then let's go ahead and grab some lorem ipsum text so this presumably with the description of our category on the home page we're going to add an advanced heading i'm going to convert that advanced heading into a paragraph and i'm going to go ahead and paste in my text then i'm going to add a button so we're going to do an advanced button and let's go ahead and align this to the left and this button will say view watches okay and i'm not styling anything right now i'm just adding my content so now that all the content is in let's go ahead and start styling this section right here okay so we don't want to leave it like this so go ahead and select that row so this is the whole row right here if you have a difficult time doing that you know what to do just go ahead and open up the list tree and you'll be able to get to that row just like that okay so now that we have uh selected the row let's close this out and what i want to do i want to align everything to the middle like that and then the next thing that i want to do is i want this to be a little bit smaller so right now this is the full width of the internal container here i want this to be even smaller so what i'm going to do is i'm going to go to the structure settings of this row and i'm going to set this to a content width a max width of 650 pixels and what that'll do is it'll make everything a little bit smaller here just like that which is fine uh actually let's increase this a bit let's make it 750. there we go so 750 is good all right and then the next thing that i want to do is i don't want to just leave this like this i'd like it to be a little bit more dynamic so i'm going to select this outer row right here and what i'm going to do is i'm going to go to the background overlay settings let's select a gradient let's select a color for our gradient and we're going to use this color actually the darker one this strongest color right here and the second color is going to be white and if you scroll down to your gradient what we're going to do here is we're going to create an overlapping effect using the gradient now because our image has a white background this is going to be perfect for what we're trying to do so pay attention here to what i do with this so what i've done so far is i've selected the background overlay setting of that row i've set the color to be just a dark color so you can use the color from your darkest color from your palette or your own dark color if you want the second color is white the ray gradient angle is 180 right now so it's going from top to bottom but if you you can change this to 90 and you notice that this is on the other side the darker colors on the other side but i want this darker color to be on the right side i don't want it to be on the left so if i can set this to i think it's 270 there we go 270 is the gradient angle so now the darker color is on the right hand side and then what we're going to do with that here is we're now going to change how this gradient is flowing so right now it's kind of going from right to left and it's fading into the left hand side what i want to do is i want to eliminate that fade and to do that you want to go to the location of the first color and there is a slider here just start moving the slider okay and you'll notice that that dark color gets darker towards the light side so i'm going to move this to be about 70 percent actually let's make it 60 right there about 60. on the location for the second color i'm going to now start reducing that and right when i get to about 60 it becomes a solid line given the illusion that we're overlapping that the watch is overlapping this section right here so so far this looks pretty good then the next thing that i want to do here is i want this to be a lot darker but before i do that i need to change the color of my text so i'm going to select this text right here and we're going to make this text a white color and we're going to make the description text there white color and then we're also going to help our button be more visible so i'm going to select the button come over here to the right the text color will be white the border color will be white and the hex color for white is just six f's and then on hover i want it to become solid so the hover color is gonna be a dark color so we can just make this six zeros for our black the background color is going to be white and the hover border color is also going to be white okay great so that'll look like that okay now we need to set this up so that we can actually see this a lot better right so what i'm going to do here is i'm going to scroll down sorry select the row first then we're going to scroll down here and we're going to go back to our background overlay settings and in the overlay settings overlay opacity this is what's called which is what this is what is controlling the transparency of this area i'm going to go ahead and set that to be fully opaque okay so now we have this nice overlapping look then the next thing that i want to do here is i want to just set this up so that it looks a little bit more there's more breathing room and i'm also going to configure this a little bit so that it is it's obvious that this is actually an image overlapping uh this area is a really cool effect so select the image itself just click on it come over here to the right go to image style and under the image style here we're going to set a border radius of 12 and that's gonna go ahead and give us this rounded effect right here okay very nice rounded effect then the next thing that you'll want to do here is where it says see all premium watches if you select that section right so i'm selecting the section inside of the row this is selecting the row this is selecting this section okay another way to do this open up the list tree and you have the row right here you have the first section and the second section so i'm selecting the second section and what i want to do in this second section is i want to create a little bit of gap there so i'm going to go to the padding and margin and we don't really need a lot just on the left hand side go ahead and do 20 pixels there and we're also going to do let's also do 20 pixels on the right okay all right and then as close as let's close this down all right so that's created a little bit of an overlap here but i like the spacing so what i want to do now is i'm going to go back to my row and when i scroll down here i'm going to go to the structure settings and i'm going to give so i increased this by 20 pixels on each side which is about 40 40 pixels total so i'm going to change this custom width over here to 790 or actually let's just make it 800 for the width and see if that allows us to spread out a little bit still let's see 860. there we go that might be too wide 860 is fine okay so because i want this to be fully out all right and this now presents a lot better all right so let's go ahead and update and take a look at that so now we've created uh actually let's add the link to our category and it's that's very easy to find you can just come up here to your watches see this link right here click on it this is one we set up earlier before you can go to the link settings and you can go ahead and copy the link i'm going to go ahead and just paste that link in and submit it all right so now i'm going to update this and let's go ahead and view the page all right so here you can kind of see it says you know see all premium watches and we've got a watch there overlapping nice little overlap effect and we have this row right here as well okay so this looks great so now we're going to go ahead and repeat the same process but this time we're going to do popular we're going to do popular shoes and then popular t-shirts and so on and have sort of the same effect going through the website so let's go ahead and do that right now so first thing we're going to do is we're going to just you'll be amazed at this we're just going to copy this entire section and just change all the information we're just going to duplicate it on the page a couple times and change all the information and you'll see how very quickly you'll have a full page of beautiful content for your e-commerce homepage let's go ahead and do it right now so let's go to edit page all right so in here we have this row so let me open this up so you can kind of see what i mean so we have this entire row this this is why we created this way this entire row contains everything that we need right so what i'm going to do is i'm going to select that row like this and i'm going to come right here to the short menu and i'm going to click on copy let's just close this down click on copy click the plus sign directly outside of that row all right and we're going to select the paragraph block which is kind of a great block to copy stuff and i'm just going to press command v or control v on your pc and now we have a duplicate of this entire section all right and then so what we're going to do here is just change the information so instead of popular watches we're going to say popular shoes okay and then we're going to open up our hand-picked products again click on edit there and we're going to clear all this out we don't want this all right now what we want are shoes or i think we labeled these as sneakers okay sneakers and we're just gonna click four of these so let's get a nice red one a blue one let's do a brown one and i think this one has a little bit of pink in it let's just uh dynamite there we go so we have four click done and just like that you now have some sneakers all right and then over here we want to say see all awesome sneakers and i'm also going to change this link right here so click on the button we're going to click on the button link and i know that this is a category that ends in shoes i'm just going to go ahead and highlight that last bit of text change it to shoes and submit it then we need to change this image okay so i'm going to click on the image click on the edit icon here and edit gallery we're going to x out of that click on add to gallery and we're going to find a suitable shoe i like this two-tone one add to gallery update and now we're all done we don't need to style anything because we already pre-styled it up here so and now that's done update your work view the page and we have another section but this time dedicated to shoes all right so you kind of get the idea now and look at look at our page look at how awesome this is looking right now so let's do one more let's do um let's do one for t-shirts okay so it's doing for t-shirts so let's go to edit page and we've already copied it to the to the clipboard so all we need to do is click the plus sign click on the paragraph gutenberg block there and then just press command v or control v and we'll have another new section and we're going to call this popular t-shirts then we're going to select our handpicked products edit clear all and we'll say t-shirts and let's get this a casual olive one there's a gold one let's do the red strip and the red rose done here's our t-shirts and then same thing here see all popular uh or see all i like to put greet and t-shirts come to the button remember to change this to link to your t-shirt category so i'm gonna come here and i know that this category is just named shirts all right and then we change the image and let's find the nice shirt that we want to represent the main category let's use this blue one this is very nice that's a gallery update gallery and that's all set right so this is looking very nice now we could do another one for handbags um but i don't want to keep repeating the same thing right so it becomes kind of redundant however i do want to have uh i do want to have some handbags showing on the home page here so what we're going to do is i'm just going to do the handbags but this time i'm just going to do a simple button at the end so that the handbags are shown so i'm just click on the plus sign here and i'm gonna click on the paragraph i'm gonna still do the same thing command v to all i did was just copy that these sections do command v and this time we're going to select handbags so we're going to clear out all these watches type handbags to pull up all your handbag products and let's do the chic one this mustard pomegranate and red night out okay done so now here are our handbags and well you know what why not why don't we just keep it keep it going right this is fun we'll just keep it going so let's go ahead and edit this get rid of the watch image add to gallery and let's find a nice handbag that we want representing all our handbags so here's this one right here add to gallery okay just make sure it's not repeated okay great all right and we'll say see all right handbags look if you're building your store you can do anything that you want it's your store so we'll do this here and we'll change the category so that this is linking correctly so you remember you want to change that link to link to your handbag category so our hamburg categories named very simply as handbags and this is one of the things that's great about gutenberg see just with this block right here you can literally insert products into your posts pages anywhere just by dragging and dropping them in there okay and in the pro version of cadence this is we've been doing all this with the free version of cadence by the way okay we haven't used any pro features at all so all this can be done for free now in the free in the pro version of cadence you can do a lot more there's a lot more things you can do with elements and dynamic content and so on and you know we'll show that maybe in this tutorial or in a separate tutorial we'll go over a more pro version of an e-commerce store like this okay all right so now that we're done adding our products go ahead and update and take a final look before we add the final section so we have our featured area benefits our category links and then we are featuring some of our products with this really cool uh presentation to see all the products right so if i click on this it should take me to all the watches this is really good really nice back to the home page please all right and then uh we did that same thing for our shoes and we did the same thing for our t-shirts and we've done the same thing for our oh we need changes to popular handbag so let's go ahead and edit this page very easy to do awesome thing about the cadence blocks is that it really does make working with gutenberg such a pleasure to to do you actually enjoy building stuff with it very easy to make changes right popular handbags all right that looks good so what we want to do now is we just want to end this page and then move on to building out our footer and then we're done with the homepage we can make a few changes on our internal pages and our ecommerce website will be completed so the next thing that i want to add here to this is it's very good to add an option for people to join your mailing list or subscribe to a membership maybe you have a loyalty membership newsletter or something like that so we're going to add that feature here we're going to add that at the bottom here for people to go ahead and be able to opt in so we're going to create a really nice very simple opt-in and then we're gonna fill out our footer and we are done with creating the home page we'll make a few changes on the cart page the checkout page um and some of the category pages and that will be the end of the tutorial so let's go ahead and build out that last section build out our footer and then continue on with this tutorial so to create our opt-in section let's go to edit page and we're going to scroll down to the very bottom here and this is where we're going to add our opt-in so we're going to go ahead and click on the plus sign i'm going to do a row layout i'm going to do a one column row and then inside of that i'll have a two-column row so that on the right-hand side we can have the opt-in and the left hand we can support that with an image i'm going to select the outermost row here go to the structure settings and we're going to set the content max width to be inherited from the theme which will go ahead and center everything for us and then we're going to start adding our elements so the first thing that i'm going to do is let's just create a temporary separation here we're going to go back and change this later but for now i want to be able to see the difference between this row and that row so to be able to do that just add a very light background so i'm gonna come here to the background settings click on the background color and let's add something really light like that okay great and then the next thing we need to do here is uh let's go ahead and add our opt-in so first thing i'm going to add is a image so let's go to the to grab the advanced gallery here click on media library and we want this image right here this is going to be our opt-in image and we're going to create new gallery and insert that image in there by default it's going to give us a three column gallery we really want this to be one because we only care about this one image we don't really want any any other any other images here again in this gallery all right and then the next thing that we're going to do here is we're now going to add our opt-in right so first thing i like to do is i like to add the text of the opt-in so i'm going to click on the plus sign here grab an advanced heading and the text that we're going to be using is going to say get say get a free gift so get a free gift and an extra okay let's go ahead and center this text and then let's make it uppercase and we can even increase the strength of that a little bit okay so get a free gift and an extra then i want to go ahead and duplicate this text here and i'm going to change this to 25 percent off and then we can go ahead and configure this so first i'd like to set the typography settings and make this really big maybe 75 pixels so people can see it and we'll make this ultra bold so nice and nice and thick and then uh let's set the the height settings here to 75. okay so get getting some nice gap there okay so get a free gift and an extra 25 and then we need one more piece of text here so let's click on the plus sign grab the advanced heading we're going to tell them what they uh what they have to do right so we're going to say for joining the shopping club or essay shoppers club shoppers club okay and we're going to center this and then right here i'm going to i'm going to change this to be more of a paragraph so it's really small and let's also [Music] go ahead and get rid of the spacing below this below that so it's really close okay allowing us to have more room for our uh form so get a free grit gift and an extra 25 off now let's go ahead and add the form so just do a forward slash and start typing form and you'll get this cadence form right here click on that it'll automatically give you these three fields we are going to eliminate the message one because all we want is a name and email for this okay so now that we have that whoops so name and email now that we have that we're going to go ahead and configure this so select the first field which is the name field and in here we're going to add a placeholder that says enter your name and on the email field we're going to do the same thing except it'll say enter your email the submit will say join the club and already this is looking [Music] pretty neat so now we now we can go ahead and style this however we want so looking at this i'm noticing some of the spacing here so we just need to tighten this up a little bit and make it look a little bit more presentable and the way i'm going to do that in this specific cases i'm also going to use um i'm going to use our technique here of creating some overlapping effect okay so i'm going to go ahead and select the outer background again we're going to go to the background settings background settings and i'm going to clear that out and we're going to go to the background overlay settings select the gradient the color that we're going to use in this case for this one we're going to use the subtle background here and we're going to get rid of this default color by zeroing that out or actually let's just make it white because our website's overall white okay and we're not really seeing that color very well okay that's that's fine so just make sure that it's this gray color f9 f9 f9 or your whatever gray color of your choice and then the opacity i'm going to set that up to be 100 so that i can actually see this and then come down to the gradient angle and set that to set the gradient angle to 90 so that it's on this side actually sorry set that to 270 like that okay and then what we're going to do is what we did before so we're going to go ahead and change the location elements right so i'm going to increase this location to about 60 this is usually how i test it so i go about 60 is fine okay and then the location for the second color will start trying to meet the other one right so we're meeting right about here and what i'm going to do here is just increase decrease a little bit so it kind of matches up with this one on top and then the other thing that i need to do here is create some spacing so that everything's breathing very well so right here on the inside column right here on this inside column what i'm going to do is i'm going to select that row then select this section and sometimes you may have a tough time selecting it so let's go ahead and use our list view and i want this section there it is go to the padding and we're gonna we're gonna give it a padding of 40 pixels all the way across okay so 40 pixels actually you know what we didn't really need 40 pixels on the bottom so let's zero that out and 40 pixels on the top we'll zero that out we just need it on the sides so 40 pixels so we have some breathing room here and then the next thing that we're going to do we're going to do on this is the image itself i like to add some radius to it keep everything uniform so 12 pixels is good all right so get a free get a gift and an extra 25 off for joining the shoppers club this looks really good i probably want to bring this a little bit closer so i'm going to select this uh paragraph go over here to the spacing settings so it has spacing settings because this is originally an advanced header and i know that there is some default margin there so i'm going to go ahead and zero that out which will bring this a little bit closer for us okay so this is looking good everything's lining up very well and if you want if you feel like you want to bring this even closer i would leave it like this you can go ahead and select that outer row and we can come to the structure settings and instead of using the uh content max with inherit from theme actually not that you can actually set up your own max width so i could say i want this to be 900 pixels which bring it in a little bit closer but really i think at about a thousand pixels you're fine or 1200 yeah at about 200 pixels you're fine or you could just use the content max with inherit from theme that's fine okay and so now this looks uh this looks really good uh very nice simple um opt-in here and if we want on the button styles you can come to the button styles and we can say we want this to be full okay just to give it a little bit more uniformity all right and this looks good so go ahead and update and let's take a look at how this looks on the front end let's view this and as we get to the bottom here we will see our opt-in now one of the things that i do want to do is i want to create some separation between this and this section right here and also just because we have uh this is this look is looking very very similar so what i want to do is i probably want to change that second color i still want to create the overlapping effect but i probably want to change the second color so creating a gap and adding another color here so let's go ahead and click on edit page let's go back down and what i want is a gap so i want a gap between here and here so i'm going to click on the this row i'm going to go to padding and margin and this time i'm going to use the margin to create that gap and i think i want about 80 pixels at the top there the next thing that i want to do is i want to add a second color here i think it'll make it even look even more dynamic so instead of it being white so i'm going to select this row the outer row go to the background overlay settings select that second color and you can play around with your palette right so i can see some colors here that i can play around with and see if that makes if that gives it some more character how about a little darker it kind of does it gives a little more character there so that looks really good uh yes i'm very happy with that so let's go ahead and click update unless before we're totally happy let's go ahead and look at it at the on the front end see how that presents yeah this looks really good all right so now that we're done with our opt-in section we're done with our product section now let's go ahead and create a nice footer and then wrap up this tutorial alright so to create our footer what we're going to do is we're going to go to the customizer so click on customize and then select the footer option from the cadence options here and when you select that this tray will open up for you and this is this represents your footer right so if we scroll down and get into the view viewport we can be able to see the footer right here so by default you're going to have this copyright widget already in there but there are also several available items that you can utilize as well and this is in the free version of cadence by the way so there are up to six widgets that you can add in plus a social widget and then footer navigation so in our case we're going to be using the footer widgets to create our fat footer so the first thing i want to do though is i want to configure this copyright section right here so you can either do that by clicking on the edit pencil right here or you can click on this setting cogwheel right here when you click on that then you come here and you can change out all this information i just want to add my own information in there so this may be what you want to add for your company and then i want to change the sizing because right now the size of this is actually competing with the main website so click over to the design tab for this and select the size option and we're going to reduce this to 14 pixels okay so it's a little bit more subtle all right and that looks great i'm gonna go ahead and publish my changes so that they're saved and now we can actually start working on the fat footer itself so the way this works is it has three rows you have a top row a middle row and a bottom row we're going to be working with the middle row here okay so go ahead and select that row and typically when you select this row by default you actually add three columns we want four columns so we're going to change this to four columns here and then we're gonna start adding our widgets to it so if you go back to the main general footer settings here we can just start dragging in widgets so i'm going to drag in the first widget into the first column and drag the second one in there and a third widget in there as well so what i do is i drag in the widgets first and then i add content to them uh afterwards on the fourth one i want i want this to be our social uh icons so i'm gonna go ahead and grab a social widget and put that in there okay so now the social widget is in there uh and if we go to configure this typically when you add this it really doesn't have any text initially but we're gonna go ahead and add our text to say follow us so any one of these will do and then you can come here and design the uh or design the icons uh however way you want for now i'm just gonna leave these alone and leave them exactly the way that they are i think they're fine for our actual design it actually looks great next what we want to do here is we want to go ahead and start adding content to these widgets right so to be able to do that for instance if i click on this cog wheel right here it now will add it'll give me a chance to be able to add blocks and you can add any any number of widget blocks to each widget right so same thing with this one add blocks but i don't like to add it here in the customizer because it's just not enough space the uh the ui here is just a little bit restrictive so what i want to do is i'm just going to save it for now and leave the widgets empty and then i'm going to close out of the customizer and i will then go to the widgets section in the actual wordpress dashboard so you can just go to the dashboard go to appearance click on widgets and you'll be presented with a much more open user interface go ahead and add your widgets okay so if you come over here in this theme you will notice that you have a footer one for the two for the three all the way to footer six the all these correspond to the widgets items that you added in the uh in the footer when you're doing the using the footer builder so all we need to do here is open this up click on the plus sign and start adding out adding our content so i'm gonna go ahead and add a heading so use advanced heading and we'll call this clifton fashion so this will be the name of our e-commerce store it's called clifton fashion and then i'm gonna add a second one second advanced heading but this one i'm going to set up to be a paragraph and then i'm going to go to my lorem ipsum grab some text and then come back to it and add my text there okay so now uh we have the name of the company and then maybe a little brief description that's what it's supposed to represent now i want to configure this uh so i'm going to click on this because i know that typically these are pretty big text and what i want to do is i want the text here that i have here i want it to be a 16 pixel size in the footer and then i also want it to be uppercase so i want to select those options for the actual text itself i want this text to be 15 pixels so one pixel smaller and then [Music] its current casing is just fine excellent so now i'm going to update this and i just want to take a brief look on the front end to make sure that everything's lining up correctly before i add the other the other blocks to the other widget areas so let's go ahead and take a look at this in a new tab okay and if we scroll down we can see that okay our footer is forming very nicely here now what i'm going to do now is go ahead and add all the other all the other pieces of content to these widget areas okay so we're going to go back to widgets and the way i'm gonna do that is i'm just gonna copy what i have here by selecting each one holding down the shift key will allow me to select both so if i if i select one and i hold down shift and select the other one now i've got both i'll open up these options and click on copy then i'll come down to the footer widget area here click on the plus sign and select the paragraph gutenberg block press command v or control v if you're on a pc and it will go ahead and paste those two blocks in there for me okay and now i can go ahead and add more content so a lot of my content is just going to be the same in this case we're going to say we're going to call this quick links and you'll typically see this on e-commerce website where there are quick links to each category so we have five categories the first one is new arrival and then what i'm going to do here is i want the links to my categories to be contained within the same header editor here so to do that i'm going to hold down the shift the shift on my keyboard and hit enter and that will create a new line now if you don't do that and you just hit enter then you're creating a new block area so we don't want to do that in this case we just want to create a new line and add the next category which is going to be watches shoes new line handbags so again press shift and enter t-shirts okay i'm going to go ahead and remove the bold from here all right now we just need to add the links so go ahead and select like first you select the new arrival click on the link icon here on the short menu and then do a search for new arrival once you start doing this search it'll pull up the product category link click on it and then repeat that repeat those steps for each category so highlight it click on the link icon do a search for that category and insert it oh nope that's not the right one there we go all right so now that we're done with that let's go ahead and create the third widget area so i'm going to select both of these again copy go to the photo widget area click inside the area select the paragraph gutenberg block and then press command v and now we have another set of links so these links are going to be for our clients so we'll just call these just for you as a title and then we add a bunch of benefits here so we could say buy buy a gift card okay another thing that we could have is we could have specials and sales you can have access your account we can have earned rewards so maybe offer rewards and we can also have a wish list okay excellent and that's it for now remember our fourth footer actually contains our social media icons which we pulled from the widget on the front end so now that we've added all this let's go ahead and update it and then let's check it out on the front end refresh this and so here here we go so here's our our footer and this is actually coming together really nicely so we do have some more customizations to do here so let's go ahead and do that now so i'm going to go here to the customizer and i'm going to select the footer and let's just pull pull this into the viewport so we can see all right so what we need to do now is we need to create some spacing uh for the main row and we also need to create some better spacing between each column so what i'm going to do is i'm going to select the middle row settings and we're going to scroll down here to where we have the column spacing and i want to increase this to 120. okay so now that creates some really nice spacing between between everyone between every column here all right in terms of the widget spacing itself i can go ahead and zero this out so that it's bringing everything closer to each other and then for the top spacing this is in regards to the row itself so for the top spacing we're going to also make this 120 pixels and the bottom spacing we're going to leave as is that's fine and then for this row right here where we have uh where we have our copyright let's go ahead and select that row you can select it here or we can select it here all right and what i want to do in this one is i'd like to reduce the spacing a little bit up there so i'm just going to make the top spacing we're going to pull this down to 20 20 and then under the design we're going to add a border to the top just a very very light border and the way you do that is you come down here so in the design option so this is the general options this is the design options come down here and we're going to click on the x make the border a line we want this to be one pixel so this is the top border right we're going to select that and we're gonna use six e's so e six times to create a nice little border there okay so it creates some separation all right now that looks really good now the other thing that i want to do is this this coloring is a little bit too harsh right so again we're still it's going to be competing with the coloring that we have on our main pages on main page content so i'm going to go back to the middle row go to the design and on the design i get to control the color of the of the content right so i'm going to change the widget content coloring here so select select the color and i want it to be a little bit lighter and that's that looks good we're also going to do it for the link colors because you notice it happened for the main text but it didn't happen for any of the links so the link colors will adopt the same color okay and maybe upon uh upon hover will make it darker all right that looks good okay so now our footer is pretty much set so let's take a look at how the whole thing looks on the front end so i'm gonna go ahead and publish this and let's close that out and when we scroll down our beautiful ecommerce website here we now have a nice footer that's nicely separated what's also cool is if you take a look at the footer on other pages right so if we go for instance to this watches pages we can see here that the footer is separated from everything else so this looks really good so up next what we're going to be doing is we're going to go ahead and do some housekeeping work on it meaning just tidying up a few things that we created and making sure that everything looks really good so let's go ahead and do that right now so firstly what we'd like to do is let's take a look at some of the actual woocommerce pages so when you first install woocommerce if we go to pages right now you'll see that woocommerce actually adds some pages to the website for you for instance you have a cart page if we view this page right now you'll see that we have the cart page it's got a title and this light background right if you go to any of the category pages you'll also notice that they have this light background as well and if you go to any of the product pages you'll notice that we have our breadcrumbs here and our title here and we already customized this page earlier on so everything's looks really good but there are a few things that we can do to really make this pop make it a lot better and that's what i would like us for like for us to do right now so the first thing that i want to do is i want to make sure that my category pages have enough contrast to them right so it's very clear that you're on a category page and you're on the right category page so the first thing that i want to do here is i would want to create some contrast between the title and the main content to be able to do that just go to customize and we're going to go to woocommerce and we're going to go to product catalog when you click on that this will allow us to be able to make changes to archive pages within woocommerce so right now we want to make changes to the title area right so i'm going to click over to design and i want my title color to be a light color and i want the background to be a dark color like so okay so you can see this looks a lot more this is a lot better okay let's go ahead and publish that okay then up next uh let's take a look at the card page okay so i'm gonna close out of this and if we go to the cart we have an item in the card already so if you notice that the cart has this light color as well and if we proceed to check out the checkout page also has the same thing so we kind of want this to all match so to be able to change this one thing to keep in mind about the cart page and the checkout page is that these are actually short codes embedded in an actual page and that's why if you go to your customizer and you go to the woocommerce options for instance so let's go to woocommerce you will notice that there is no cart customization options here and also even if you went to the checkout page for instance it's not uh for you to customize the design it's more for you to customize which fields are available and so on so what we want to do is we want to change that and the way you do that is you do that actually in page layout so we're going to click through the page layout click on design and we're going to do the same thing we did with the with the with the product catalog pages right so we're going to set the background to be a dark background and we're going to set the text to be a light text just like that and publish and so now you'll notice when we go to our cart page it now looks uniform with the category pages as well okay so all right let's check that out now all right and that looks good okay so now our website actually looks pretty nice if we go to the home page here we have all our products nicely put our opt-in and our footers built our headers built and our cart pages and category pages all look great so the next thing that we need to do now is what about our checkout right so we notice when you go to the checkout you'll see here that it says sorry it seems that there are no available payment methods for your state so this is happening because we have not added our credentials to accept credit cards there's a couple of ways you can do it woocommerce has a number of payment gateways they're available including their own payment gateway so um you would have to make that decision and and the place you go to set that up if you go here to dashboard and you go to woocommerce and you go to settings and we go to payments this is where you will set all that up okay so you can choose to have woocommerce payments stripe payments paypal and there's even more options the one that i use and i recommend is stripe payments i've never tried woocommerce payments it's pretty new but i think it's very similar to stripe payments okay so if you want to do stripe payments uh there's a couple of ways to do it if you click on get started you have to first make sure that you have a stripe account and if you go to stripe.com and go ahead and create an account it's free they do make you um they do have you go through a qualification process it's nothing where you have to qualify for anything it's just that you have to put in your information your banking information and things like that so but go ahead and sign up and then you would get something called api keys to integrate with so this is what it looks like on the inside and you would click on the developers tab here and then there are api keys so once you click through the api keys there are a couple of keys that you will get and once you get that you can then accept live payments on your website so the choice is uh completely yours uh to be able to do so and it's a pretty self-explanatory to go through but i do want to show you a manual way of doing it in case you do have a stripe account and you want to do this so what i'm going to do is i'm going to click on get started here on the stripe payments and it's going to ask you to create or connect an account so i've already logged into my account and this is an automated way of doing it but i'm not going to do this because i want to show you the manual way so right when it gets to this place it says right here enter account keys so i've already grabbed my account keys so i want to do this manually so you click on enter account keys and then you have the option of entering live keys or test keys so i'm going to go ahead and add my live keys and my test keys okay okay so once you've entered your keys then you have to enter a web hook secret and if you don't know what that is that's okay just go ahead and save these keys for now and what will happen is it'll take you to this section here and when you enable stripe right you can enable stripe we can enable test mode uh you'll see here that your payments are enabled deposits are enabled but your web hook is not enabled and that means you have to create a web hook okay and let's just quickly go over how to do that because this is important especially if you're using stripe so just go ahead and copy this right here so you see right here this uh uh this link okay and then you're gonna go to your web hooks section of your page here so when you first log in here and you go to developers just the same place you get your api keys click on webhooks and you'll see this right here it asks you to add an endpoint so let's go ahead and click on that and we're going to paste that right here oops not that's not what we want we want let's go back make sure that i've copied this and in your stripe account go ahead and paste that web hook there and the description is optional i'm not going to put that in there and then the other thing that you want to do is uh you want to click on select events that you want it to listen for right so if you want to know what these what this does right here uh it will enable you to receive notifications on the charge statuses so when people pay with their credit card you get notifications on whether it went through it got declined or what have you and it's very important to have so now we're going to come here back to your web hooks here and it's listening for these events click on select events and really we want all the events so i'm going to click on select all events add events okay so all these events have been added and then add endpoint oops wait actually let's make sure we have this here okay great and then click on add endpoint at the bottom all right so now we've gone ahead and created uh a web hook for ourselves here okay so now to get the web hook you have to reveal it right so we're gonna go ahead and just reveal it for this one there it is right there i'm going to go and copy that and then i'm going to come back here and click on edit account keys and this was done in a live one so we're going to go ahead and paste that there and then save all right and then you can also do the same thing for the test one so just go go through the same process in your test mode right so you can set up a test mode right here so this is test mode and now you'll be in a in test mode for that and we're going to view all items in test mode and you go through the same process add all the end points we can come back here um let's cancel out that grab this link you always want to have a test mode in a live mode that way you can test your test your store make sure that it works same thing paste the url select the events select all the events and then scroll all the way down add events add endpoints grab your siding secret which is right there and then you can put it back to your live mode once you're done if you're a live mode come back to your site under the settings click on edit account keys and under the test web hook secret you're gonna go ahead and paste that in there save keys all right and so now my stripe is now set up okay so when i go back to my site and i go to the cart proceed to checkout oh wait there is one more thing i have to do dashboard we have to actually turn it on so go to woocommerce go to settings go to payments and you see right here it's off it's not it's not it's not enabled right so we're going to turn it on and now it's on okay save changes just remember to save the changes after you do that now when we go back and we go to the checkout here it is right our credit card is ready for processing and with that i'm going to be ending it here that will conclude the build out of the ecommerce website using the free version of cadence and gutenberg and building out this really nice site once again thank you very much for watching let me know if this if you have any questions feel free to post that in the comments below if you're here for the first time checking me out i appreciate you watching the video please remember to subscribe because i have more tutorials like this that are coming out go ahead and subscribe hit that notification bell so you can be notified when i release those tutorials also remember if you're trying to follow along with this tutorial if you were following along in the description below you will find links to all the images that i used and anything else i needed to build out this website in the next tutorial we're going to be taking a look at this very same website with some cadence pro enhancements so if you don't have the cadence pro version of cadence go ahead and pick that up and you can use my link to do that if you want to support the channel it is an affiliate link and i do get a small commission for you doing that but it doesn't affect the price that you pay and if you have done that then i appreciate you thank you very much and once again thank you very much for watching this tutorial and i will see you in the next video

Channel: CliftonWP

Views: 564

Keywords: ecommerce website, online store, how to, make website, create website, wordpress, wordpress website, ecommerce wordpress tutorial, how to make an ecommerce website using wordpress, ecommerce tutorial, cliftonwp, ecommerce website wordpress, how to make an ecommerce website, how to make online store, how to make ecommerce website, create ecommerce website, how to create an ecommerce website, ecommerce, free ecommerce website, Kadence, Kadence ecommerce, gutenberg woocommerce blocks

Id: fC8Zn01fESM

Length: 127min 18sec (7638 seconds)

Published: Thu Dec 09 2021