what is up, guys? my name's hogan chua and in this video, i'm gonna be showing you how to make this ecommerce website step-by-step with no steps skipped and as you can see, it not only beautiful, it's really simple yet really practical now the best thing about this tutorial is that you don't even have to build the same website you can build a website for women's fashion, men's fashion or even sell virtual products such as ebooks or even music. or you could use a similar layout but sell different products such as this website here which sells beauty products now if you wanna check out all the demos, you can visit my website which is at hoganchua.com/demo unlike a load of other tutorials which use bad templates which are really hard to customize
this tutorial we're gonna use a front end drag and drop builder so you're able to build a site that you like but all without code or technical experience so you can build a website whether you're 15 or 55 just as long as you have an internet connection, then you can follow along now this video tutorial is probably not for you if you wanna build an auction website like ebay or a website like amazon which sells a million products but if you're a complete beginner that's never built an online store or even a website but you don't have the budget to hire a developer or if you just want to upgrade your to a more customizable or easy-to-manage platform
or even if you're a future web developer and you don't want to spend months learning code then this tutorial is perfect for you. without much further ado, i'm gonna give you guys a full website tour and show you guys what you're going to learn okay, i'm pretty excited to begin but before i do, i just want to say that this layout is inspired by top ecommerce websites such as apple nike, top shop and hnm and the reason why i use some of the design elements is because that they know what works and they tested everything, they're multibillion dollar companies so they test their websites to see what converts their visotrsinto real customers
so i've basically implemented for our own website but i've simplified it i'm gonna show you how to add in your logo up here as well as this search bar where people can search your products or anything they want and add in your menu links up here and as you can see it's really thin, this header, it's really simple. so you don't have many menu links up here because the other menu links are down here you don;t wat too many because you don't want to clutter the space up here like for example, apple, nike, top shop, they all have simple headers okay, next i'm gonna show you how to add in this slider
so this slider is really cool. you can even just hold it and drag it across like that and then you can click it which will direct you straight to your url of choice you can also click on this button here which slides like that and it that's nice as well i'm also gonna show you how to add in this button here which is really cool so when you click on it, it goes to that shop page so i also wanna let you know that this slider here can also be full width. so what that means is you can go all the way across so it can cover the whole section and ther won;t be any white space like that and there won't be any space up here so it'll be a very similar to the slider that you see on apple as well
and you can also have these buttons as well which i'll show you in the tutorial now i'm also gonna show you how to add in your title the background color here which is gray and how to add your feature products on your home page and show you how to move them around as well and then i'm gonna show you how to drop in a video module so you can drop in a product video and let's just play that video as you can see, it's really cool having your video on your website because if you showcase your product and show the product, how to use it or or people wearing it so people can imagine themselves using your product
and i'm also gonna show you how to add in your instagram feed now if you don't have instagram, i highly, highly recommend it because a lot of people are spending their time scrolling through instagram feeds, liking a lot of photos so if you are able to attract some instagram followers, it's great for you website and that's good for your business, right? then i'm gonna show you how to add in another logo here and how to add your social icons on the bottom now you don't want your social icons to be probably in the middle somewhere like that because you want your people to focus on your product
you don't want people to click on your instagram and then they go to your instagram feed and then they start getting distracted by instagram models and all that stuff and then i'm gonna show you how to add in your menu links which are important but not important enough that you need to put it up here because you don't want to clutter your space up here. so you can leave your other links down here and i'll show you how to create that i'll also show you how to create an e-mail subscription box here and obviously you don't have to have the same color and you can also change the layout of it as well so we're gonna scroll back up and let's just click on this button here which will direct you to the shop page
so the most important part is adding in your products so as you can see, the layout of it, the colors of it, it's really simple. it's really clean and really nice now this isn't just coincidental. i use the white layout here because it's really practical. so for example, you're adding in a product image or a image of your product then you don;t have to worry about it clashing with your design so you can put in a product here it could be any color and it would still be really nice in this white background so if you look at apple's website, they do it as well. if you look at nike,
topshop they all do it because it's really practical and it saves them time in the long run and i'm also gonna show you how to add in this section here which you can filter so people your customers, can filter by price and this is really cool because it narrows down their search and helps them find their products much easier and you can also sort by categories as well so if you click on the black on then only the black version will show up and i'll show you how to add that in and also how to add this one as well. so you can sort by popularity by rating and all that stuff
scroll down and i'm also gonna show you how to add in a sale product so if you click in it um, normally it's $450.00 and you can put in a sale like that and you can also schedule the sale depending on when you want it and that's really cool so click on that now this is a wireless watch charger and i'm gonna show you how to add in a variable product which is, for example, like this okay, so a variable product, for example, if you have a t-shirt, then you can select a different color
but for this one, it's a wireless charger so you can select a red one and then it also changes color like that which is really cool and then if you want a black one, it's a little bit more expensive because i've set that to be more expensive and you can also add in how much of that product you have in stock as well to show your customer and obviously i'm gonna show you how to add in this section here where you can type in additional product descriptions, additional information here as well as add in a section for reviews now this is really important, um, reviews are super important and amazon utilizes for their website all the time because it gives the products some social proof
for example, if you're shopping and then you see a product which is rated 3 stars how likely are you actually gonna buy that item? um, not really, right? but if you see a product which has 4 stars, or 4.5 or even 5 stars, then you're more likely to trust that product and enabling reviews is good because people would trust your website as well i'm also gonna show you how to add in a dual variable product so for example, this screen protection item, right it has a clear type or you can select a matte type or even a gloss type but i can also select another variable. for example, i can sell them as a 3 pack or even a 6 pack
so if you have a t-shirt, then it could be that you can choose the color, you can also choose the size as well and you can also click on this which pops up in a live box and and it's really cool as well. i'm gonna show you how to do that so let's head back to our shop page so that's it for the shop page. i'm also gonna show you how to add in an about page so this is completely customizable. i mean, the layout of it and i want to also show you how to try different layouts and i really wanna help you understand how to create a website rather than just tell you how to copy and paste but when i leave you alone, then you don't know how to use it
i want to show you how to actually use it, understand it, so you have the skill i'm also gonna show you how to add in a faq page faq page is really important because you'll find out people ask you the same questions over and over again so it'll help them get the answer quicker but also save you a lot of time so for example, i've implemented on my website and people can check out the answer by themselves and get the solution really quickly and if you're an ecommerce store, that's really important because if they don't get an answer immediately, then they might shop somewhere else so i'm gonna teach you how to add in this module here which is really cool
you just click on it and it opens up like that and it's really simple and then i'm going to show you how to add in the contact form this is a contact form where people can submit their name and also send their message and it'll be delivered straight to your e-mail. i'll show you how to set that up so it goes straight to your e-mail i'll show you how to add in a map as well so we can change the layout of this contact page to whatever you want and i'll show you to do that in this tutorial and you can add in your location down here or your opening hours,
your phone number, whatever you want down here for this blog, i'm actually going to upload another video after this tutorial because if i show you how to create the blog and how to set it up, it'll take too long so i'm gonna upload that in a separate video so make sure you subscribe for further updates for that there's one more thing i'm gonna show you which i forgot to tell you is i'm gonna show you how to set up cross sells and up-sells so what that is is basically a marketing technique to increase your sale per person so what i mean is for example if i add this to the cart and if we view the cart you'll see that it says "you may be interested in...."
it shows the complementary products. for example, if someone wants to buy a watch then they're probably interested in buying a charger or a screen protector so this is what we call a cross sell and it's something that amazon utilizes all the time so for example, if you click on this camera then if you scroll down it will say like people frequently bought these items together so basically it helps people see your other products which they normally didn't see and again you can make more money per customer so that's pretty cool and also i'm gonna show you how to do the up-sells so what the up-sell is if we click on this product here
and if we scroll down, then you can also suggest products which they might like for example, you have a watch which is $450.00, you might have a limited edition one which like signed by taylor swift or something for $4,500.00 and you could add in a product here so people might check out that product and they might buy that product so your making more profit per customer again so that's really cool and i might actually also gonna show youy a test transaction to show you that this website is real, it's live and basically, i'm going to teach you how to make a ecommerce website step by step with no steps skipped and by the end of this tutorial, you'd be able to start selling and start making money
so what i'm gonna do is i'm going to remove this item first now let's go to our shop page and i'm going to buy this screen protector. so click on select options and then i'm going to select perhaps a matte type. i'm gonna select the 6 pack and i'm going to add that to the cart.then i'm gonna view the cart and then i'm also - i also forgot to tell you this, i'm going to show you how to add in a coupon so your able to set up coupons for specific days whatever you want. for example, this one is a black friday coupon which saves i think 90% so if we type in the coupon code which we've set at the back end. and i'm gonna teach you how to do that
and if we apply that code and if we scroll down, you'll see that gives a discount of 90% so it takes away $44.00 and it also gives a free shipping thing as well so you can set up your coupons to also include free shipping and again i'm also gonna show you how to set up your shipping. for example if you want to set up free shipping, there could be a minimum of that and this is actually set up to be a minimum of $50.00 so if we actually don't use that coupon, then we don't get the option of free shipping but if we actually use that coupon, then we get the option of free shipping
and i'm also gonna show you how to add in different shipping options for example, flat rate or express, international shipping or you could also set up local pick-up or local delivery or things like that and i'm also gonna show you the tax settings. for example, if you're in the usa, you only need to be paying tax for the place where you operate in. so i'm gonna show more details on that later but for example, if we're operating in calfornia and we're shipping to california, i calculate the shipping and i set it up to be the usa and then i set this to california and then i update the total you'll see that i need to pay additional sales tax. so i'm operating in california and i'm shipping to california which means that the person buying the product has to pay additional sales tax
so if i'm shipping to australia, then i don't need to pay that tax. update that total and you'll see that tax disappears and i'll show you to set up your tax settings as well now we're going to proceed to checkout, i believe. so proceed to checkout now this is where your customer is gonna enter in all their details. so for example, their name fill in their e-mail address oops and then their phone number select country and then address the suburb
the state and also the post code so they can also click on this to create an account. so what that means is if they create an account, they can just log in by clicking this so they don't need to fill in these details again so it saves them time so we can check the title. it was $49.00 but we;re using the coupon black friday which saves us 90%. and you can also set a flat rate discount and all sorts of discounts which i'll show in the tutorial and i'll show you to set up your paypal so it's connected to your paypal account
so people's payments are directly transferred to your paypal account now if you don't have a paypal account, i highly recomemnd that you create on because it's the safest and probably the easiest way of recieving and sending payments but if your customer doesn't have paypal, then they can also pay via paypal using their credit cards so we can also set up direct bank transfers, cash on delivery, and things like that as well which i'll show you in the tutorial but right now, we're going to proceed to paypal okay, so we check our order here. $4.95. and i'm gonna enter in my paypal details and then you just need to log in
so you can change your payment method to a credit card or whatever you want or you could just use your paypal balance and that's how you do it. you can change it there and then we can just click on pay now so this your confirmation of the order. so this is what the customer will see and an e-mail will be sent to their accounts so right now i'm gonna log in to my e-mail address as well as my other business paypal account where these funds are actually sent to and show you that the transaction is real......and yeah
so i'm in my e-mail right now and this is a new customer order. this is the e-mail that you get so it's got all the product information as well as the discount as well as the shipping they actually bought so they got the free shipping option so you know which one to use when you send out their parcel or whatever you have to their shipping address down here and the customer e-mail is pretty much the same one. exactly the same, actually so there you go. i'm gonna log in to my paypal and show you that i actually recieved the payment so i'm just gonna log in right here so at 12:42 pm, i received a payment for hogan chua which is my other paypal account, personal account
and i received a total of $4.90 and if you see here, it's $4.90 as well at 12:42 and paypal normally deducts a small percentage fee of that price and that''s how they make money they take a little bit of commision but i think it's still worth it because setting up your own payment system and all that stuff is just too much hassle and you also can issue a refund as well to your customer just by clicking on this button here and it's really easy to set up your paypal account and then once you have all your money in your paypal account, then you can just withdraw that money straight into your bank account of choice that you have linked up to your paypal account
so i think that's it and i think we're ready to begin. so grab a pen and a piece of paper and let's get started so before we can actually get started to building our website, we need a few things to get started the firs thing we need is a domain name and basically what a domain name is bascially your web address for example, google's doman name is google.com. my one is hoganchua.com and your one will be (your business name).com or (your name).com the second thing we need is hosting and hosting is basically a server where you can save all your website files such as images, your text and all other content so people all around the world can access your site 24/7 now if you don't have a domain name, that means you don't have an address so people can't find you
and if you don't have hosting, that means your website will be blank. so these 2 things are the essentials and the 3rd thing we need is to install wordpress and wordpress is a content management system and it's by far the most popular one. fortune 500 companies such as forbes, cnn, ebay, sony they all use wordpress and even celebrities such as jay-z and katy perry they use wordpress because it's easy to use. it's really scaleable and it's also really customizeable so for example, office word.that's basically like a content management system for all your word documents you can type up essays and whatever you need. and basically wordpress is the same thing but it allows you to build a website. so it's like an interface now the 4th thing that we need is to install a theme and a theme is basically like a skin for the website
so it basically helps us to apply the colors and the customization, the fonts , and everything to it it also includes the builder which helps us build the layout of our website so we can build any website that we want. and we're also gonna install some plug-ins the most important one is woocommerce so if you go to this website here. it's a plug-in that extends the functionality of your website and it allows you to sell anything on your website. so it's really customizable and it's really powerful and it's also used by 13 million other people which powers over 30% of all online stores so it's really popular and the most highly recommended one and it's just awesome now i'm gonna be going over the cost of building your website
it's not gonna cost you a few thousand dollars or even a hundred dollars it's going to be really cheap and really great if you'rein a budget so the cost of the domain name normally costs you around $13.00 per year but for limited time only and for a .com domain, it's only gonna cost you around $6.00 per year so i don't know when this offer ends. i know it's for limited time only so just get it as soon as possible so you get that cheaper domain name and for hosting, normally it's about $12.00 per month but if you use my coupon code, which i'll show you a little bit later on, you can get it for around $8.00 per month
so in total, to get started with your website, it will be around $14.00 or $15.00 and that is really cheap compared to a few thousand dollars if you get a web developer and then you have to pay them by the hour if you wanna make changes. so, yeah installing wordpress is also free.the plug-ins and the theme is also free. so it does come out to $15.00 now, you've probably noticed that we're using a premium theme and that premium theme is by themify and, basically, why i chose to use a premium theme is because if i chose a free theme, that isn't really good for you in the long term because if people who created that free theme, they might just disappear 'cause they've got no obligation but if you're using a premium theme like this one, it's actually used by over 55 or 56 thousand people
then you can be sure that it's still around tomorrow and if you ever wanted support or updates then you can actually get it so this basically gives you the option to get their membership which gives you 1-year support and also updates as well but themify had been kind enough to allow me to share it with you guys for free so you guys can actually test it out for free. there's load limitations and if you don't get membership, you won't get locked out of theme and things like that. it's the full version thousands of people have built their websites already following my other drag and drop website tutorials and it's just a really awesome theme. it's great for beginners and probably the best one out there
if you were to go and get another theme, a premium theme, then it's actually more expensive 'cause i've got a 30% discount as well so if you get the membership, then that's really awesome. but if you don't then that's fine as well so it only comes about to be around $36.00 per year or around $3.00 per month so around a cup of coffee per month then you can get support and updates so that's a really awesome deal because if you were to hire a developer, you might be paying $36.00 per hour so it's just a really awesome deal but again if you don't get it, that's fine. just test it out for free and i'm sure you'll love it and the plug-in we're gonna be using is free so that's all good. we're gonna start building our website now
and just on a side note, all the images are also provided so you can follow along in the tutorial and that's in the youtube description below along with the theme download link as well so one last thing before we get our domain name and hosting. there would also be a little progress bar up here as you can see and that would basically help track your progress in building your online store and i would also be implementing a little sidebar pop out here so it will basically show where you're up to and what's next and hopefully that will help everyone finish their online stores quicker but also without getting lost so to get started, we're gonna get our hosting and as well as our domain name
both at the same place called hostgator so type in h-o-s-t-g-a-t-o-r-.com and click on enter so i choose hostgator for 3 reasons firstly, i've been with them for over 6 years and haven't had any major issues so that's the most important thing they have brilliant support, secondly. so they have live chat support and you can contact them if you have any issues. you don't have to submit a support ticket and then wait for days for an answer or anything like that you can get an answer instantly
and thirdly, they also provide a 99.9% all time guarantee and that's really important if you're running a business because you want your website to be live all the time so if you're running a restaurant, then you want your electricity to be 100% all the time. imagine having no electricity and a lot of other web hosts, cheaper ones, they're nowhere near as good as hostgator so that's why i've stuck with them. and also if you have any issues, then they also provide a 45-day money back guarantee so there's no risk basically so click on web hosting up here or click on get started now! and if you'll scroll down here, you'll notice that there are 3 different plans: hatchling, baby and business plan
normally, you don't have to get a business plan because you're just starting out so i recommend looking at the hatchling plan or the baby plan now the only difference is that this provides a single domain name, the hatchling one and the baby one, you're able host unlimited domains so you could have a domain for your business, your mom's business your friend's business and then you can split the cost among you guys so what i recommend is probably the baby plan 'cause then you can just add on a domain and the price difference isn't that much anyways so click on sign up now and what you want to do is enter your domain that you want to buy so it could be (your name).com or (your business name).com
so for example for my demo website, i'm gonna type in shopwatchdemo and then click on the outside here and then you'll see that it's unavailable and the reason why it's unavailable is because i just bought it just then so in choosing a domain name, it might be unavailable so you might need to be a little bit more creative so you might add something like that: shopwatchdemosite and as you can see, that's available. and you can choose a lot of different extensions but i recommend getting a .com one because most people just type in (your business name).com they don't think of typing in (your business name).space so you're gonna lose a bit of traffic but the main reason as well is because you actually get a big discount. as you can see, it's $13.00 per year but if you use my coupon code
for a .com domain, you also get a $5.99 domain name. so you save basically half price so if you have a domain, you can click on i already own a domain and then you can select that here and afterwards, when you've got your hosting, you can connect that and you can check out my website at hoganchua.com/faq and then you can check on how to actually set that up or you can actually contact their live support and they will help you out with your website so domain privacy protection, you probably don't need this but what it does is it basically hides your personal information people can actually search up your website, your contact details, and contact you or whatever
and if you want that, then you can select that. but for this tutorial, i'm just gonna de-select that we're gonna scroll down here and this is where you will choose your hosting plan as before, i said i was gonna pick the baby plan so just select that and normally, if you get a longer term, for example 3 years, then they give you a bigger discount you could go for 12 months or 24 months but i normally go month to month 'cause then i know i could cancel anytime so what you'll need to do is basically enter a username and this will be a username you can log in with so choose one that you like and just choose a security pin and let's just scroll down and this is where we'll enter our billing information
so enter a correct e-mail here because they'll be sending you all their hosting and log-in details here so make sure that's correct so for the e-mail address, i'm just gonna put in my one here i'm actually gonna quickly fill this one out so just pause the video and fill this out as well and then we'll proceed from there so after you've done that, you can either pay by credit card or paypal and you can enter your credit card name and number and also the cvv code which is on the back and expiry date so you can fill that out or you can pay by paypal
so you can select that option and then you'll be asked for paypal information your log-in detail and paypal. now, they'll also add in additional services but i don't think you need these things for your website. i recommend just getting started first and then you can add in these services later on when your actual business is taking off or things like that so deselect these for now and scroll down here and you're gonna enter a coupon code here and i've got a coupon code so just use my one: hogan chua. and then click on validate so what that does is that gives you a $5.99 domain name. so basically you save half price and you also get a 30% discount as well. so if you scroll back here for the 1 month version, you also get a 30% discount and you save some money
and you can use it for something else. i also get a small referral fee if you use my coupon code and that basically helps supports me in making these tutorials and i really appreciate it if you do use it but if you don't then that's fine as well. so to get started, you're only paying $14.36 and compared to hiring an agency, which is gonna cost you a couple of thousand dollars, then i say that's a pretty good deal so after you've checked in all your details, what you can do is click on "i've read the terms and conditions" and then we're gonna click on check out now! and let's just head to our e-mail address. so go to g-mail and then you'll see that you get an e-mail like this: hostgator: your account info. just click on that
and basically it provides the log-in details for your control panel the control panel is basically where we're going to install wordpress and this is the url link that you need to click on so click on that and bookmark that on to your bookmarks or whatever because you'd probably be accessing that a few times so just copy your username or whatever and just paste that into here okay, and then we just need to paste in your password which you'll get here. so just copy that and paste that directly into here. but i've changed my password so i'm just gonna type mine directly here and then just click on log in
so we're just gonna close on that thing for now and scroll down here scroll down and as you can see here, you've got the quick install and i want you to click on the quick install so we're gonna install wordpress now. so you can click on wordpress here so on the right hand side or up here. so click on wordpress and click on install wordpress so this is where we choose our domain name that we just bought so if you click on it, then as you can see you have a few domain names that normally you're just gonna have one or something like that so click on that new domain name that you just bought
leave this one empty unless you want to install it on something like shopwatchdemo.com/demo or something like that but if you're just beginning, then leave this one empty so move on to the next part. and your admin e-mail. so just type in your e-mail address and a blog title. so you can change this blog title later on so don't worry about that i'm just gonna call it shop - online boutique watch store for admin user. this is where you put in your username for logging into wordpress and after you've done that, just click on install wordpress and just click on no thanks, i'm a web designer
and that install is going to be running so it will take less than a minute. as you can see, it's done already. and you can click on view credentials here now if you just bought your website just like 5 minutes ago or something like that, then it might not actually show up yet because it might be blank it takes time for hostgator to set everything up on the back end and connect everything so sometimes it might take 15 minutes which is really quickly but just wait 2 to 4 hours and then click on here or maximum, it's gonna be just 24 hours so take a break and maybe plan your website or something like that and then come back
so i'm just gonna click on this one. so as you can see, my one is up already and we're going to use this username here and just copy that and then paste that into here and also paste in the password here so just paste that in and then we're goin to log in to our website so congratulations. we've finished installing our wordpress and we're gonna start configuring the basics and also creating the pages so i know you're pretty excited to begin but i just wanna give you some tips to actually get through this tutorial build a beautiful online store quicker and also better so the first thin i really want to recommend is to check out this app. it's called jing
and what it does is you an download that and what it does is you can screenshot the page for example, i have this app on the side here and i can click on this button and basically i can just screenshot the page and what i can do is to capture that image or capture a video so if i want to capture a image, i could share via screencast so you'll need to create an account on screencast so make sure to sign up for an account here. and once you've downloaded the application, you need to log in so what you need to use it for is probably if you're having problems with your website and you want some help, then you can share this via screeencast
as you can see, it uploads to your screencast and what you can do is post that link look into the youtube comment and the reason you should do that is because it helps me understand your problem better and i've got a lot of questions to answer so i can't get to everyone but if you do provide a link, then i can look at it and then probably help you out so click on okay and basically it gives you a link then you can paste it into your youtube comment but if you paste in a link, the comment might not show up. it's because it goes into moderation and then i'll check it and then i'll approve it then i'll try to asnwer your questions and the second thing is - okay, so before you actually upload that, make sure to check my faq page on my website
and this is where i answer frequently asked questions and you can check it out. so click on it and then it scrolls down to the solution and i also recommend checking out my resources page and these are resources that i use so hover over resources and click on ultimate website resources so if you scroll down here and these are all the resources that i used and i highly recommend that you check out as well and number 4 is that i highly recommend that you plan your website before actually starting get some inspiration from like apple or nike or your favorite website then draw it out on a piece of paper. like draw the layout on a paper, decide what color you wanna use
and decide on your fonts, get your product images done 'cause that's really important you know, really good images and organize all your images into a file and then start building and i also would highly recommend to even watching the tutorial once first andtaking some notes because it's the same as basking a cake. so you watch the video first and then you write down what you need like the ingredients and then you go buy the ingredients and then you start baking the cake and it'll save you more time in the long run cause it gives you a mental image of what the site would look like
so then when you'll be building it, it would be twice as fast and the end result would probably be better but that's up to you. try to spread your workload out in a week because remember your saving thousands of dollars here so don't expect it to be built in just one day.so if you can get it done in 7 days, that's amazing because it's like basically making a few thousand dollars per week which isn't bad at all now sometimes when you're building your website you might encounter some problems such as this now you might want to change this to heading 1 and you click on it and it doesn't pop up here. so waht you need to do is scroll up scroll up and then it'll pop up here. alright
so to toggle this thing, it might not appear by default so you need to toggle that so it shows up and the best way to drag and drop your layouts and everything is to actually zoom out of your website so if you zoom out of your website, it will make things really small and therefore it will be easy to rearrange your themes. so for example so you wanna drag this one up here, then it will be easier to drag it, to move it around so for example, let's move it around here. nad if you wanted to edit your layout even easier, then you can go on to the back end of the website and for example we can go to edit page and let's just leave this page now
maybe let's zoom in a little bit more and you can see that you have the back end so you can change the layout easier here because everything is smaller and you can move it around now i hope everyone is excited 'cause i am and let's begin so this is your wordpress dashboard and this is the back end and if we click on visit site and i'll show you the front end. so this is the front end of the website right now and it doesn't like a website at all and let's go to our dashboard and let's configure some of the basic settings first so all this stuff here, there's so much clutter so i'm just gonna close all this stuff here
close that and if you move that one up like that, close it like that, and also dismiss these, so your website looks a lot simpler right now and we're gonna click on settings here. and then we're gonna go to general so this is where you edit your site titleand you can change the site title here as well as the tag line i'm gonna delete that tagline.scroll down, you can change the time and everything here it's not that important now we want to go to permalinks so click on permalinks and you wanna change that permalink to post name so it shows up as shopwatchdemo.com
and then the name of the title of your post. you don't want something like ?p=123. that doesn't look good and it doesn't describe to the user what your page is about so make sure to change that. click on save and i'm actually gonna go to my website that we've actually built before and then i'm gonna be referring to that website and using that as a guide to build this website here so let's just zoom back in. go back here and now we'll need to go users. so we're gonna change the password because everyone knows my password and because it's too hard for me to remember so you can change the layout and color and everything like that.that's not too important
scroll down here and generate password so were gonna type in -um, we're gonna hide that first and just type that in, confirm use and update profile so afterwards when you've done that, we're going to remove our plug-ins. so click on plug-ins and basically the plug-ins, these are installed to your wordpress by default but we don;t want any of these plug-ins as it may conflict with our website and then it might cause problems with our builder and all those things so i want to delete them and get everyone on the same page so click up here which selects that all and then click on deactivate. click on apply
click that again and now you can delete. click on apply and yes, delete all these files and data so all your plug-ins are gone and now we're gonna click on pages we're gonna delete all these pages 'cause they have some sample pages and other stuff so blog actions, move all of them them to trash and apply and the same thing for posts so select that and then move that to trash and apply go to your trash and also delete that permanently and i think we didn't , um, we need to delete this permanently as well. so delete that
permanently from your website okay, so since we're on the pages, i'm gonna teach you how to add in your pages so pages are things like your about page, your faq page, shop page, and the pages here so i'm gonna show you how to add that in so that's really simple. just click on add new up here now the first page we're gonna add in is our home page. so just type in "home". h-o-m-e and you don;t need to do anything here but but this is our word app here so you can type in text here and it works like word and you can also toggle that toolbar if you want to see the options down here where you can change the color
and things like that. so we're gonna ignore that for now. we're just gonna publish it and we're gonna add in the other pages. so for example, the about page. click on publish we're going to add in the faq page. so faq and publish we don;t actually need to create the shop page on my account page because we're gonna install the plug-in called woocommerce and that is actually going to create these pages automatically so if you scroll down, we're gonna create this blog page contact page, returns and delivery
so what you can do is add new and if you don't have a blog page or you don't want to add a blog page, then you don't have to do it but i'm just following this tutorial and this example. so i'm just gonna publish it add new.the next one was contact, returns and delivery so contact add new returns and delivery just publish that now so you can add in any other site that you want but let's go visit our website and see if that pops up
so nothing is gonna pop up yet. i'm gonna be showing to add that to your menu up here and down here later on so what we need do to now is to basically install the theme and also the plug-ins so we've basically finished configuring the basics and also creating new pages so to download the theme, you'll need to go to my website at hoganchua.com or you can go to the youtube description and the link should be down below it includes the theme download as well as the images so you can follow along the tutorial but if you're on my website, go and click on the blog page and it show up here, the post up here, or you might scroll down here. have a look so click on the post
and then scroll down here. and then you'll see download theme and download images so if you want to download the the theme, just click on theme and let's save that on to our desktop. click on save for some people, it might look something like that because it automatically unzips but you don't want it to be a folder like that. if it does happen to turn out into a folder, then all you need to do is right-click and compress that again if you compress that again, then it'll go back to the original .zip file and this is the .zip file we need to upload. we don't want this. remove this to our trash right now and if you also want to download the images, then you can download that as well
we're gonna save that to our desktop but for this one that we're downloading, we also want to unzip it because all the image files is in the .zip folder and we need to upload on to our website later on so for example, if you're using a windows computer, i think you just right-click and open that .zip file or if you're on a mac, you can double-click it and then it turns into a folder and then we have all our images that you can follow along with the tutorial so we're gonna go back to our website right now and then we're going to install our theme so go to appearances and click on themes here. i just wanna close that. and we're going to click on add new
and then we're going to upload theme. choose the file and i just want to find that file. go to look files here so that's the file that we want and then we click on open and then click on install now so it's gonna upload and it's gonna show the progress down on the lefthand side here so it's gonna take probably a minute or so. so give it a sec so if your theme is successfully installed, then you'll see your page like this where you can click on activate but some of you migh have an error in installing your theme and you can go to the faq page on my website and click on it
and then you can follow this tutorial which shows you how to upload your theme via the file manager which is in your cpanel. the reason why you get that message is because your host or server has limited your file upload size so you can either request for an increase or you can follow this tutorial so by now, we're gonna click on activate and that's basically gonna activate our theme. i think a pop-up pops up to import the demo data but just click on no for that and let's just click on no for this as well. and let's go check our website to see what it looks like so as you can see, it looks a little bit different. it's sort of applied sort of a exterior skin to our website and the pages that we've added before have popped up now but it's nowhere near this website look here
but we're gonna edit that in a second but we're gonna install our plug-ins first. so go to the dashboard and then we're gonna click on plug-ins and then we're gonna click on add new so wordpress has a ton of plug-ins. it has thousands and thousands of plug-ins that you can download don't download too many plug-ins just because it looks good. it's gonna slow down your website and sometimes it's gonna conflict with the theme as well and if it does, then just deactivate it and hopefulyl your theme would work but it should be okay, these plug-ins that i recommend, because i've tested them so the first plug-in that we're gonna download is contact form. so contact form 7
click on return so you'll probably a contact form 7 here with over a million download. this is the one that we want so click on install now and once that is finished installing, then you can click activate the plug-in now we're gonna add another plug-in. this is the easy google fonts plug-in this is really cool because you can edit the fonts and stuff like that. so just type in easy google fonts and click on enter this is the one we want by titanium themes, with 200,000 downloads. click on install now activate the plug-in
the next one we want to add is the instagram feed. so instagram feed. down here. this is the plug-in so type in instagram feed and click on enter now we want install this one by smash balloon. install now. activate that plug-in now we're gonna install mailchimp for wordpress. so mailchimp is the little newsletter thing here i choose mailchimp because it's free to sign up and you can sign up for free quite easily so - oops this is actually if you want to upload a plug-in that you've downloaded but you want to add a new one so we search it here so mailchimp for wordpress. click on enter
now this is the one we want. mailchip for wordpress. ibericode. install now click on activate plug-in and the next one we're gonna add is the smart slider this is the real cool slider that we have on our front page and this is awesome. so download that. smart slider 3. click on enter and this is the one that we want. click on install now now activate that plug-in and finally we're gonna get the woocommerce plug-in so type in woocommerce and hit on enter
so this one has over a million downloads so make sure you get the right one by woothemes. install now activate the plug-in and the last one that we want is this plug-in that would help us add in this menu cart thing up here where you can display the number of items in your cart or the price so there's the setup theme so we can actually set it up. so let's just go to let's go and as you can see here, it's going to install some pages. your shop page, cart page, checkout page and my account page so click on continue. and obviously these can be edited later on. so continue now you can change where your store is located back here. so for example, if you're located in california
then you can select that, change the currency and the product's weight units and also for the dimensions click on continue now this is the basic shipping setup and we're going to be editing this later on but let's just take that for now leave that empty. and basic tax setup, we're gonna be editing this later on but let's just take that for now and we're actually gonna enter the prices exclusive of tax so what that means is for example, if your product price is $50.00 then you enter $50.00. you don't enter in any tax woocommerce will actually calculate that for you and once we set that up so we can actually import some startup tax rates if we want now let's just tick that and this is the starter rate for california and it's gonna import that for you
so i'm gonna show you how to add that later on anyways so just leave it as that and click on continue now, you're gonna enter your paypal e-mail to accept payments. we can enter that here now but again i'm gonna show you how to so you can figure all that later on as well so you can enable check payments, cash and delivery or bank transfers. we're gonna leave those empty click on continue so your store is ready. now you can watch additional video tutorials on the actual woocommerce website so we actually click on that and it would open that in a new tab we've got additional videos which are more in-depth. so you can check out their videos if you need any other information
so we're going to return to our dashboard and finally we can install our last plug-in. so go to the plug-in section again and add new and then we want to type in woocommerce menu cart and hit on enter so this is the plug-in that we want. it has 30,000 installs by jeremiah. and install now click on activate plug-in so we've got all our plug-ins installed but we're not going to configure them just yet we're going to configure them when we actually need them so congratulations. we've finished the installing theme and plug-ins part
and now we're gonna be heading to our home page to actually create the header and also the navigation bar. and we're gonna edit the styling and the colors and things like that so before we actually get started in building the header and also confuguring the navigation bar we're actually gonna visit our site now to see what it looks like so what we're gonna do first is we're going to change the layout of this header first to a skinny design i wanna close this first and we also want to change the home page so it's a blank canvass we don't want this sidebar here and we don't want this thing here. so i'm gonna show you how to do that first
and then we're going to configure the navigation menu. so for example, we only want to show these ones up here because otherwise it would just clutters up the space and then after that, we're going to style it so that looks really nice okay so what we need to do is go to your dashboard and then go to themify ultra. themify settings now these are all your theme settings. a lot of settings are edited here and the favicon. favicon is bascially the movable icon up here so the header code is where you can additional javascript or css for more advanced users the footer code here is where you add your google analytics code
so google analytics is basically a free tool that google provides. paste that code in here and then you can track your website visitors and things like that that's where you paste it in. so don't worry about these things for now for google fonts we need to change that to show all google fonts and then we'll need to click on save so we're gonna scroll up and for default layouts, don't worry about these yet i'll show you how to edit them later on 'cause if you edit them now, then you don't know what they actually do but for the default page layout, we're gonna set the layout for the pages so for example, let's just open this one in a new tab
for example, if we go to our about page, click on that, then this is the default layout for the about page and this is the same for all the pages so if we go here and change the default page layout to a different one, for example right now it has the sidebar on the right hand side, sidebar on the right, the we want to get rid of that so we can select this option here which shows the full screen one and you also want to hide the titles on all the pages so you want to hide this ugly title click on yes. don't worry about that but you don't want to have people to comment on those so you want to disable all comments
for pages. and if we click on save and if we refresh this page, then it show up like blank so that's all good and we're gonna scroll up here to theme settings so go to your theme settings and go to theme appearance and this is where we actually change the header design so you've got like 10 different designs here and currently we have this one here which is i believe this one here but we want to make it a little it thinner so we select the third option right here and if we scroll down. for example, if we scroll down and if you see the menu bar sort of stay on the top
that is the sticky header and we want to disable the sticky header if you want to exclude the logo, then you can select that. i want to exclude the side tagline i want to keep the search form here but i want to exclude the rss link here 'cause that's not really useful. and for the rest of these, we keep as default and you scroll down and we've got the footer design. i'm gonna be showing you how to edit the footer a little bit later on. i don't really want to edit it now and you'll get confused a little bit later on, maybe for the image filter. so the image filter is basically if you hover over a image, then it'll turn to whatever you set here by default, it's set to none but you can set it to grayscale and if you do, then when you hover a image
then it will be grayscale so let's just keep that as default the animating background colors is basically, for example, if you want to animate the footer, you select that and save it. i just wanted to show you and if you refresh that, then it should change to different colors and things like that so it changes like that and you can set it to be animating for the header as well change the speed and change the different colors that you want to animate scroll down. leave this as is right now. leave that as is and we're gonna do that later on close. click on save for now
now for social links, this is where we add our social links and all that but i'm gonna be showing you how to edit that later on the themify builder now if you have problems saving your website, this might be a good thing to do, is to disable the builder cache clear your cache first and then disable that. click on save so right now, we're gonna leave all those as default. you can also add in your twitter feed on to your website but you need to add in the code here. so read the documentation if you want to add that in the hook content, don't worry about that
web access, don't worry about that either so we're gonna go back to our home page and see what that looks like so that looks pretty good except we have too many menu things up here and also we want to add in our logo so to do that, we're going to actually edit adding that logo first so what we're gonna do first is actually set in our home page first. so when you click on the home page it goes to your website/home and you don't want that you want it to be, for example if you click on this, then that will be your home page so you'll actually need to click on customize and this is really important
that you set this in. otherwise, you can't even see the themify builder so..done that. and click on the back button and for the static front page, we need to set that as your home page so static page and then select home if you don't have your home page created, make sure you create your home page. save that first and there you go so.... right now when we're actually on the home page, you want it to say like "/home" and this will be your home page that you can start editing but we're gonna edit the heading first so click on customize and i'm gonna show you where you can actually add in your logo
so go to themify options here. like that and click on advanced options 'cause we'll be some advanced stuff later on. so just click on that now you want to select the site logo and tag line so you can actually edit your site title here so, for example, if you don't have a logo yet, you can just add in a site title, for example "shop" and you can change it to all sorts of fonts here. you've got over 600 different fonts you can choose from and you can keep that temporary. or you can add in your logo obviously, you can change your sizes and stuff like that we can make it bold. you can't see it. just make that a bit bigger
24. so this font preview is annoying..... let's click on save and you'll see that you can edit your site title like that but we want to add in a logo so we go back to your themify options and go to site logo and tag line then you can click on logo image. and click on this + sign here and we're basically gonna upload the logo from the images folder which i got you guys to download earlier on or you can upload your own logo but to do that, we need to upload the files first. select files
and find that folder where your logo is at so i think it was in online store tutorial images. and actually i'm gonna ctrl+a and upload all my images that we're gonna use for our website but don't worry. we're can also upload them individually later on but i just wanna save some time so i want to upload everything. so click on open and just wait for few moments for that to upload so all our images are uploaded on to our website and we want to add in our logo so there are two different logos: one with the black background and one with the white background we want to select the white background because our background on hour header is black
and we want to select this. so if you want to upload your own logo, it has to be a .png file so basically that means it's a transparent file and this is my file size but you can set it to any file size that you want so we're going to insert that image. and as you can see, it's like really big so we need to change the size of that so we can change the size of that to about 120...... ..um, 120 pixels and.... it might be a bit bigger actually so 150 pixels. so that looks about right. you can make it bigger or smaller and this is the width and also if you want to set the height as well\ then you can do that as well
okay. so you can change that depending on what you want so we'll leave that as 150. i think that looks okay and now if you want to change the position of the logo, then you can set it here. so for example, you can set that to relative and then you can move it around. for example, if you put 10 pixels, then it moves sort of 10 pixels to the right yeah, so if you wanna play around with that, maybe 10 pixels to the top, and it sort of moves down and things like that. but i'm just gonna leave that as is: by default and again if you don't have a logo then you can add in a site title for now but if you want to get a logo, then i recommend that you go to my website
click on resources, the ultimate resources here, and scroll down here now you see logo design. you can choose 99 designs where you can actually hold a logo contest so if we click on that, it opens up in a new tab. or you can go to fiverr so what 99 designs is is basically that you can submit your brief and then you can get people to enter in the competition where they can submit their logos and you can click on get started now. it's a little bit more expensive but you get more quality designs so click on logo design. you can get started now and basically just look through these examples and submit a brief and then start a competition a lot of designers will submit their logos and all you have to do is to choose one of them
so this is more expensive and, as i believe, it starts from $399, australian dollars, so that's $350 usd but you get quality designs but if you're on a budget, then i recommend that you sign up for fiverr. after you sign up here which is free,then you can actually get started and then you can search for logo -oops- so "logo design" and click on enter. and basically you can get logo designs for about $5.00 so just select here and you can browse whatever you want here. but for example, if you click on this one then it's only $5.00 so you'll get 2 logo designs for 5 bucks and if you're just starting out then i highly recommend it because you don't wanna create your own logo
because that just takes too long or use free logos because your creating a business so you want your own unique identity now you can also ask them to send you the transparent png and also, if you want to upload a favicon icon such as this one here, then you can tell them to also send you a favicon-sized logo as well and they should send you a smaller version which you can upload so right now, i'm going to minimize that and we're gonna save and publish and by now, we're gonna close this so as you can see, we can't see our logo because our header is currently white
so to change that, we can go to customize and what we want to do is to click on themify options so this section here is called the header and this section is the footer. so we click on the header tab here so the header wrap is basically the background of the header section and we want to change that color to 292929 which is sort of like a black, dark gray color so click on save and close that now as you can see, we can't even see the menu icons. so we're actually gonna edit out menu as well. so click on customize
and then we're going to the main navigation. so click on that don't worry about these now. these are called menu links. so we're gonna change the link color so the color that we're gonna have is white. so to do that, we can just select the color here and change that to white. so we can see all of that now and that looks pretty good and we can also change the font as well. se can change the size like this so 12 pixels if you want it to be smaller but i want to set it to 14 pixels which is sort of average size now we can also change the font so to change the font, you can choose the font here and for that, i want to us bt sans
and just select that and i just want to change it to just show up as the lower case so you can change the size. i'm actually gonna change it to 16 so size 16, that looks about right okay, that looks good now, you can also change it to bold or whatever you want. there are lot of things you can play around with you can also do this which is really cool we're gonna scroll down. i also want to change the menu link hover so what the menu link hover is is when you hover over it, it shows this light color so
it basically lets the person know that's a link so what we need to do is we need to change it to a lighter color so i believe that was ccc which is sort of a light grey so when you hover over it then it gives you a really subtle effect which is really clean and really nice as well now for the menu active link, basically what that means is for example, when you're on the home page and it will actually highlight that home page red and that is the active link color so for the active link color, we're actually gonna set it to a background color so we click on the about page. we're on the about page and that's the active link color
so when we set that background to white andthen change the text color to the dark gray so to do that, for menu active link, you'll need to change the background color so for example, 292929 and you'll need to change the - oops so we actually need to change that to white, sorry and we need to change the color of the font to the dark gray so 2929. like that and as you can see, that is the one that you want and if we hover over it, it will actually show you the hover color as well
and to set that in here. to set that we need to set that here so menu link active hover, we're gonna change the font color to cc so hopefully when we actually hover it, it gives you a nice effect so the dropdown container is basically if you have a dropdown menu, this is where you edit the color and font and all that stuff so for now, we're gonna save that, close that and there are too many items up here so we're gonna customize our menu so to do that, we can click on hover over shop and click on menus i'm just gonna close this for now
and i'm gonna close these too because we don't need them so for the menu name, this is called the top navigation. so i wanna call this "top nav" and then we're gonna create menu so as you can see, there's the about, there's shop, my account and faq so we're gonna select those pages. so we select them right here. so the about the shop, the my account and also the faq and also if you want to add in any other links on your top navigation, then you can select it here we don't need to select home because most people know that when they click on the logo, it goes to the home page. if you add another home page there, then it just clutters up the spacing
so after you've done that, we need to add that to our menu so to arrange them, all you need to do is just to drag it and to drop it. so we're gonna arrange it to the about first then the shop, and then my account and then faq. so we're gonna click on save the menu first and you also want to set the theme location. so you want to set that to your main navigation so save menu and if you want, you can select this one as well. so basically what that means is when you actually create new pages, then those pages will be automatically added to the menu so i don't want to select that, i want to leave that as empty we're gonna refresh now and i'm gonna show you what that currently looks like
and i'm gonna show you one more thing before we move on so this is our current header it looks pretty good right now the only thing i want to show you is that we can also set it as a drop down so to do that, you just click on this page here and move it like that and that will create a dropdown menu so save that menu and if you refresh that page, then when you hover it it creates a dropdown like that and if you want to edit what the dropdown menu looks like, then you can go back to your customize section and then you can edit that dropdown container, the one i've mentioned before. so go to the main navigation
scroll down dropdown container this is where you edit the styling for that so we're gonna click on x and you can also do something like this. so what happens is you hover over the about and then the shop will pop up. and if you hover over the shop, then the my account will show so we can move that back click on save and let's go back and visit our website so as you can see, there area here has still a bit too much spacing up here, too much spacing down here
if we actually want to reduce that sizing, we need to add in some css but luckily, i have prepared that for you so you don't really have to think. so just go to hoganchua.com and then click on the blog and then find the ecommerce tutorial blog and just click on it and then just scroll doown here and you can just look at this css that you will need. so just click on that and it will scroll you right down here and i've got all the code and everything set up in here so all you need to do is copy and paste so for making our header skinnier, what we actually need to do is just click on how to make header skinnier and let's just copy that code. so copy on to your clipboard. go to here. click on customize
go to themify options click on custom css and just command+v or ctrl+v which pastes that in and as you can see, that makes it nice and skinny save it so now you'll see that the search icon here is not aligned and neither is the menu links up here so to fix this search icon and to make it in the middle, and also change the color of it so it's more visible, then you can go back here. click on this one here. just copy this code here. so it's really easy copy that go back to your custom css
scroll down, hit enter, so paste it it'll load this code. and ctrl+v and that will basically arrange where your search bar is and to change the location of it, you can change this figure here. so 7 pixels. try 10 um, i think let's try 11 so 11 might be just perfect in the center and you can do that and there's your search bar. that's all good. so click on save and publish now if you want to move your menu link down a little bit you'll need to go to your main navigation. so click on that.
and this is the menu container. so there's like an invisible container around it and to move it, we need to set it to relative so we;re going to move it down a little bit. so let's try put in 10 pixels to the top. and that looks pretty goog depending on where you want it to be, you can arrange it accordingly. so let's click on save and publish click on the x and basically, we're done. the only thing that we need to add in is this shop icon here so earlier, we've installed the plug-in which is the woocommerce menu cart, i believe if you don't have that installed, make sure to install that
so go to settings, hover over it and click on menu cart set-up so for this part, woocommerce is selected by default. so just leave that as is but we want to select the menu in which we want to display the menu cart so the menu that we want to display it in is the top navigation. we're gonna scroll down here and even if the cart is empty, we want to show it so just give it a tick and display the shopping cart icon that is ticked by default. leave it as is and you can select the cart icon but only if you get the pro version and you can choose more icons but this one is fine and if you want to display the items only, as we have right here. it only displays the items
it doesn't display the prices. you can choose both of them if you want to but i'm gonna choose items and we're gonna keep it as default menu alignment and then we're also gonna save changes and now let's go to our home page and take a look at our header navigation so our header navigation is set in and it looks pretty much perfect it looks exactly the same as this one, i hope so let's click on the about page just to check that so that's awesome. congratulations. we've completed the header and also the navigation menu now we're gonna move up to setting the home page slider which is pretty cool
so let's head back to our website and before we actually can add in our slider, we need to set up the slider on the back end first so we need to go to our shop page and click on the dashboard we need to scroll down and make sure to install smart slider 3. so click on that and if you're just starting out, you should receive a pop-up and there's a tutorial on that you can watch that now or you can watch that afterwards. that's up to you but just click on x ' cause i'm gonna go through the tutorial on how to set it up you can also scroll down and watch it later on here and...yeah. so let's get started what we're gonna need is to just click on create slider and let's just set this to home page
and for the width and height, we want to set this to 1400 and the height to be 800 preset should be default and we;re gonna click on create so right now, we need to add in our images. if you don't have the images that we've uploaded before then you'll need to upload your own and the size of the image that you need to upload preferably is the exact size of the slider size so it will be 1400 in width and a hundred pixels in height so we need to click on add image slide and these are the the images that are included in the image file that you've downloaded if you've been following along
so to get all 4 of them, we just hold down ctrl or command and select them. and click on select so right now we need to arrange them. you can set the 1st slider. you can move them around like that and set this as the first slider. so what that means is when people are in your home page, then that's the first slider that they actually see so if we copy this short code now copy this code and you're able to paste it in all pages and posts we can paste it into our website. so let's go visit our site. so open up in a new tab and let's paste that in to see how that looks first and then we can edit the small stuff later so put in a text module
and you don't want to paste the short code here. you want to paste it in the text tab here so click the text tab here so for all short codes, i recommend pasting it into here otherwise you might paste in some other formatting and that's not good so make sure that is there like that and then click on save if you scroll down, you'll see that the slider doesn't appear properly if you click on save and if you refresh the page, then we should see a pretty good slider. so refresh that and there you go. so that appears all good but the only problem that i see is that it doesn't fit in properly here
and we also need to add in some -oops- some buttons here and also fix up the spacing. and i'm also gonna show you how to set it to full width so for example if you go to apple.com, you'll see that it's a full width slider and it's pretty cool so to set it to full width, i'm gonna show you how to do that first. so we're gonna click on save and what we need to do is we're gonna visit our home page so what we need to do is to click on edit the page and then we need to change the content width so scroll down here to themify custom panel for page options, there are different tabs here, click on page options and for the content width, we need to be all the way across. click on update
and let's just view that page so as you can see, it's moved up but it hasn't gone all the way across yet so what we actually need t do is we need too turn on the builder and then for the row, so this is the row, we need to select the options here. so click on that and we also need to change the row width to full width. click on save click on save here and close it. and then we're gonna refresh the page so that is pretty good. if you don't actually upload the exact image size, you'll see that it's cropped and some of you might see a little bit of spacing up here and to fix that, this is what you need to do:
so you need to go to your dashboard and then you need to go to the smart slider and go to your home page slider so if you see that little bit of spacing on the top, you need to change it to the exact size of that slider image so for example, if this slider image is, for example, just right click that and open in a new tab so if you look at this image file here, it's 1366x768 so what i mean is you'll need to set the size here to the exact same size so type in 1366 and 768 768 and the reason why you don't see the space on my website is because i actually edited it beforehand but you'll probably see a little bit of spacing so make sure to change it to this size here
the exact same size as your image so what you can do is click on save. and then if we refresh that page, hopefully, it should be fine so that little space should be gone and your images should also fit perfectly so if it doesn't fit perfectly, it gets cropped out, then you can select this option here. click on fit and that will help it fit in properly so after when you've done that, just click on save so right now, i'm going to restore this back to default and i'll show you how to add in buttons and stuff like that. so click on turn on builder and for the row width, we want to change that back to normal. so default. click on save
let's click on save and see our slider now. refresh that so you'll see that there's no spacing up here and that's because we've set the content width on the back end to be full width now to add some space, we need to add a little bit of padding. so to do that, we need to turn on the builder and this is the text module. so this is where we entered in our slider. so double click it now go to the styling tab up here. scroll down and then for the padding section, you can add padding. so padding is basically just some space and i'm gonna type in 3% okay, 3%. and we're gonna click on save
and if we save and close that, and refresh that, then you'll see that that spacing here is the same as the demo site here so that's really good and yeah. so let's go back to our smart slider and add in some buttons so to add in a button, let's just close this for now. to add in a button for this one here, what we need to do is to click on this slide. so just click on that slide and that's gonna load. so scroll down a little bit and you'll see the preview here all we need to do is to click on the button here so that adds a button to our slider. now to move the button around, you need to hover over it and you can drag it once you see the four arrows on top
so you can scroll down and we want to put this in the middle somehow. i think that's in the middle when you see that line there so you can change the text by clicking here. and then you can change that to shop -oops- shop now if you move this up a little bit. like that. and if you want to change the font, just click on this one and they have some presets here if you want to use those ones but i want to set in my own fonts and colors so click on here and let's just change that railway. that looks good and for the color, we want to change it to gray so select this gray here. for the size, we want it to be 18 pixels
select that and line height, we want it to be normal so it makes it a little bit skinnier and we want it to be bold for the text. you can align the text or whatever you want here so if you see the hover tag here, what the means is if you click on the hover, when you set the hover color, when people hover over it, it will change to the specific color that you set here so for example if you change it to yellow for the hover color, then when people hover over it, then they'll pop us as yellow but we want to keep it professional so i want to keep it as the same gray so there's basically no cover click on apply so you've changed the font color and the font size as well as the style
we can change the button background by clicking here on the style so click on that and, again, there are some presets but i want to set my own so i want to change this to white. like that. and you can set the padding of the button to here so for example, zero padding you can see that there's no space there. so change that to 10 like that so that looks pretty good. and for the border here, i'm gonna add in a little bit of border so 2 pixels and you can change it to solid or other ones here
i want to change it to gray which is same as the font and then you can add in your shadows or whatever you want but for the hover color, i want to change it to a lighter transparent white so click on the background color and click on this option here. so when people hover over it, then they'll get this effect so they'll know that it's a button so if we click on apply now. on the preview, you can check that out like that which is really cool and you can also set the buttons for different screens. so for example, if you click on this which is a tablet so for example, if you want to display on the tablet, you want to move the button to here then you can do that
so whenever it's on a tablet, then the button will be on the right hand side but you can change that and it's useful in some occasions but i want to keep it into the middle and the same goes for the mobile phone so let's click back on to that one and let's click on save and see how that looks so far. we're gonna click on refresh so let's click on next and there you go, we've got the button here. but if you click on that button, it doesn't link anywhere so normally, you want to link it to another page. for example, this says shop now so we're gonna link it to our shop page here
so i'm gonna right-click and open that in a new tab so this page is normally where all your products would be displayed so we're gonna copy this url here go back to your smart slider scroll down here. so for the link here, we don't want that hashtag here so we select that and we just paste it over that so ctrl+v or command+v and just paste that as well. so that's the link now what you wanna also do is you also want to link the image as well. so when people click this image, it's also gonna link to that page as well so to do that, you want to scroll back up here and for the slide settings, the link here, you want to paste in the same url. so paste that into here as well
and then we click on save and then if we refresh that page now when people click on this image or link to that page as well or when people click on this button, it will link tot hat page. so just test that out so that's working and i'm gonna show you one more example so let's just save that for now i want to show you how to link the other ones. so for example, you want to link this shop page that's really easy so what you need to do is to click on the slides here so if you want to edit this slide, just click on that
now for the link section here, you want to paste in the url of where you want to link to so click on save and let's just view that on our home page to see if that works. so refresh the page and let's click on the link okay, so that works and it links to our shop page so that;s all good and you can do that for the rest of the slides that you've added on and again, there's a ton of settings here that you can play around with um, yeah. so make sure to check out the pro version as well. you get 1-year support which is really cool and you've got some more slider types and layer types and all those things so let's head back here and just close that
go back to our home page. just check everything. okay, that works. hover color, yep all good. so congratulations, we've finished our slider. now we're gonna head head on and do our row number 2 and also add in our products so we're gonna add in the sample products and also the products with the variations as well i'm gonna show you how to do that for this next part of the tutorial so this is where we're going to add our products. below here so what we need to do is actually add our products first so to do that, what we're going to do is go to our dashboard
now you'll need to have woocommerce installed so make sure to install that plug-in. if you don't have it, then you won't see these things here so we're gonna click on products so i'm actually going to open the shop page so that's gonna guide me with the names and everything. okay..... so what we're gonna do is add a product. so just click on add product and then this is where you type in the product names. so for example, bla- uh, sorry. bad blood bad blood so this is where you type it in. now this is where you type in the long description
we'll skip this for just a second. we're gonna add in the product categories first now for product categories, for example, if you're selling a....you have a clothing store, then it could be like shoes, t-shirts, bags, things like that. but i'm just gonna set the category as the color so we're gonna add a new product category and this one will be red so we can click on add new product category and make sure that this ticks. so we're gonna scroll down and add some tags so tags are just basically more descriptive of the title and what the product is. for example, bad blood this could be a watch inspired by taylor swift's new some or something. so it could be like "taylor swift" it could be....just something related to the product
so for example if it's like made in or designed by someone, then you'll type in the name i'm just gonna put in maybe "red watch" and maybe "casual watch", it's a casual watch. and you just separate them by commenting in the space and then click on add if you want to delete it, just click on the x and that would delete it so for the product image, we can click on set product image and if you haven't uploaded the file yet, you can click on upload files, select files and then find the files so if we scroll down, let's find the products and i believe that was that one there so that's the bad blood watch and what we;re gonna do is just set that product image in here
so you can add additional images. for example, i think this one doesn't have any so this one doesn't have any additional images but if you have different angles of your product, this is where you add it in. so you can add in a few more images and i'll show you how to do that a little bit later so once you've done that for the long description, we're gonna paste in the text here. so it's gonna be more descriptive of the product. this is the short description here which you'll find back here so for the short description, it hinges right like a few sentences about the product and get them interested in the product and the long description is really just for people who are pretty interested in the product and just wanna get some more information
so what i'm gonna is actually i'm actually gonna go to google and type in lorem ipsum click on that and lorem ipsum is basically just some random text that people use for website demos and things like that so let's just generate. so what we're gonna do is copy some of that text. just copy that and let's just paste that in the long description so you can include information such as for example, if it's like oil resistant and things like that for the short description, paste in just a few sentences. so just paste that in and let's just keep it really short. so just delete that part delete that part as well. okay
so once you've done that, let's actually minimize this tab 'cause you don't need this themify custom panel now so click on that so this is where we set up the product pricing and everything so for the product data, set that to simple product. i'm gonna explain how to set up the variable product later on but just click on simple for now and if you're selling a virtual product, you'll just tick this here and downloadable products, you just tick this one here so sku is basically as it says here, it says stock keeping unit. so it helps identify the unique product so if you're a big store, you might have a unique code or something like that wehere you can enter but our store's pretty small so i don't think you'll probably need that
so the regular pricing, we're gonna set that in. $450.00. so $450.00 and if you're having a sale, then you can set that in and i'll show you how to do that later on as well keep those as default. now for inventory. now what the inventory does is that it actually shows up how many items of that is in stock. so what you can do is you can click on manage stock at the product level and for the stock quantity, you can set how many in stock. so for example, if you have 5 watches in your warehouse or in your house, then you just label that and that's also good as a marketing technique because someone sees that there's only 5 left and they're thinking "okay, i have to get it now!" so it increases the scarcity. so you can do that as well and allow back orders means if you've ran out of the stock, then are you gonna allow
people to keep on ordering. so you can select those settins there i just wanna point out that if you don't know what these things mean, then you can just hover over this thing here and it will explain a little bit further so keep that as in stock. and we're going to shipping right, shipping is basically where you can enter the weight and also the dimensions so for example, if you go to additional information, you'll see that i've entered the weight and also the dimensions so you can enter the weight. i think this one is in pounds. i normally use kilograms and centimeters but i'm just going to add that in, the same as the one i've set in here i'm just gonna enter in as centimeters and i'm gonna change it to kilos and centimeters later on
okay, so all you need to do is click on link products and this is where we enter our upsells and cross-sells this is what i'm gonna show you after when we actually set up all our products for the attributes, this is only for variable products and i'll show you that very soon so click on advanced and for the purchase note, for example if someone purchases something, then you can send in a custom note about the product. for example, how to use it or something like that and this is where we enable reviews so ensure that this is ticked if you want the reviews to show up and let's go through this. okay, that's done. everything done so we;re gonna click on publish and see what that product looks like so i'm just going to right click and open it in a new tab just to see what that product look like
- looks like, sorry so the product, we've got the description there. you;ve got the longer description, additional information as well as the review section so don;t worry about the sidebar here. we're going to be editing that later on so you can see there's 5 in stock and you also got the categories and also the tags that you entered which show up here so right now, i'm gonna show you how to add in another product, another simple product and then let you guys enter your products and then we're going to go through how to add in a variable product
so let's go back and click on add product. let's close that for now add product. and the next product we want to add is the spot pigeon. so to do that, we're gonna type the title right here....oops okay, we're gonna scroll down to the side and this watch color is maybe i think it will be spotty so spots. so add a new category and it's gonna be spots like that and make sure that is ticked. scroll down, product tags. this could be, maybe, spotty watch maybe it's also a casual watch. there you go. okay add that in. for the product image, we're gonna set the product image scroll down. okay, so here is your watch and we're going to set the product image
i also want to note that this is the dimensions of my watch. so the image that you upload, if you upload the same one, then i don't think you should have a problem with the sizing and everything so 800 pixels in width and 600 in height okay, so set in the product image and i'm also gonna add in additional images so i think that it was this one here. okay, spot pigeon and add that to gallery now we've set all the things on the side, we're going to paste in the long description so let's just paste that in
scroll down. we're going to paste in the short description as well so i'm just gonna delete some of that text like that and the cool thing is you can also edit the text and everything in here using the text editor and you can also add in a slider. so if you create a slider, then you can click on the slider and select a slider that you want show on your front page but i'm not gonna do that so that's really cool. so we're gonna scroll back down here. so this is a simple product again and for the pricing we're gonna put $450.00 as well. and then let's just make this a sale so if you want to make this a sale, you would type in your sale price. so for example $400.00
and you can also schedule that so for example if it's like a christmas season, then you could schedule it for boxing day or christmas or something like that so let's just select any date here okay. so once you have set that in, the means after the 31st till the 6th in april, this sale will appear i'm actually gonna set it so -oops- i'm actually gonna set it so the date is today today is wednesday and click that in so it's gonna show up after you've done that, click on inventory. if you want to show your stock, you just click on that and let's say there's only 2 products left . so you can allow back orders. and stock status. shipping
let's just type in those figures link products, that's for later on. attributes, that's for the variables and if you want to leave a customer note or enable reviews here okay, so click on publish and now, let's right-click and let's view that product and see if that's what we want okay, so if you put the sale on then it will appear like this. it will cross normal price bar, add the new price, and we also have a little icon up here and if you added an additional image, it will appear just below that product image. so if you click on that, then it actually appears in a live box
okay so that's all cool now, product description, initial information and reviews now, related products.this happens when you have the same tags. so if you actually set the same tags for example, casual watch, the woocommerce system will find out similar tags and that would mean it would be a related product so if you didn't want this product to appear on the bottom then don't use the same tags so i just want to add in casual watch to show you that example so i think that is pretty good for now. so i'm gonna walk you through how to add in a variable product
and for example, it's this one here so you can set different options. for example, the black one and then the product image changes as well as the price and then afterwards, i'm gonna show you how to make a product which has 2 variables okay, so what we're gonna do is just click on add product yeah, so you can take this time to add in your other products just pause the video and add them all in first. okay so let's head back here. we want to add in this product here so i'm just gonna copy that title
and paste it in here so scroll down and the category for this one, this one would be a power bank so click on add new product add category, sorry. so powerbank or charger or something like that. whatever you want so add new product the product tags is battery pack, power bank, w. one okay, so battery pack..... power bank and w. one which is the name. so click on add
set the product image inside here. so then is the one that we want to show. so set product image and now we also want to set in additional images. so to do that, we just click on add product images ,the red one, and click on ctrl or command so you can select both of them and save time by uploading both so afterwards when you've done that, we need to add our long description again so just paste in -oops let's copy that text again and let's just paste that in here change that to paragpraph, paste that in here scroll down and paste in the short description. just delete some of that text. like that that's really easy. now for the product data, instead of simple product, you'll need to select the variable product
so the variable product, if you have the code, the unique identifying code that you can enter that into there inventory, we can enable that and let's just say there's only 3 left for shipping, we can enter in the details here okay, so link products, that's for later on attributes. so we're gonna set up our variations so if you click on variations now, it says "before you can add a variation, you need to add some variation attributes on the attribute tab" so the attribute tab is the tab that you see here. so we need to set some variations into there first so we need to set these names into there first so i'm gonna show you how to do that but
first make sure to publish it and save it so once you've done that, i want you to click on attributes here so for the name, what you want to change the name to is the name of the variable. so for example, if you have a t-shirt and have different sizes, then the name here would be sizes but this one here is different colors, you've got different colors so the name here would be colors right, so just type in colors -oops- for the slug, just type in colors again. just the same one leave those empty and then on the type, just keep that as select. what that is is when you click on it you're able to select an option
if you select the other one, i think yeah so you enter it manually but i want to actually select it like a dropdown menu 'cause that's easier and you can also change the order of it but let's just keep that as is and click on add attribute okay, so you've added in colors. now you need to add in the exact options that you can choose so in this case, you're gonna add in black, red and silver so go back here and click on this gear icon here so you can configure those things so we're gonna add new colors in. so the first color will be black. the slug would be black as well and you can add a description but you don't need to. set add new category the next one i believe was a red one
red. and leave that empty and that one there. and the other one was a silver one so type in silver -oops- click on add new colors so you've added all those in. so what we're gonna do now, you don't need to save it that's already saved in, we need to go back to our products. so click on products now we want to edit this product here so click on edit scroll down here and then for attributes, right here, we need to select the colors attribute that we've saved here
so click on add. now what we want to do is select all so to select all the colors that we have saved so click on that and then it shows up. black, red and silver now if you want to add a new one for example, if you want to add orange, then you can click on add new so click on add new . now let's say you want to add orange. click on okay and then it will appear here. so if you want to delete it, just click on x now what you want to do is ensure that this ticks. so ensure that it's used for the variations so tick on that and save attributes so once you've done that and that's saved in, click on variations and you can click on this and just select create variations from all the attributes
so click on it and then click on go it says it's gonna link all the variations. we're gonna click on ok and it says that 3 variations have been added. so click on ok for now so as you can see, we have the black one, the red one and the silver one and each of them will have a different number id. so if you click on it, then you can actually change the image. so for example, this is the black one so we can change the image to the black wireless charger. so if we click on this icon here, then we can select the black one and set variation image so whenever someone selects the black charger, then it turns black
so what you can do is scroll down and because the black one is maybe a bit more rare and limited edition then i wanna change that price to $299 then i want to scroll down and keep everything as default. so once you've done that, you can click on the tab here. like that and let's just set in the red one. so set that in the pricing for this will only be $249. okay, we're gonna scroll down and you can select manage stock as well if you wanna do that and choose the stock quantity. okay, i'm gonna disable that scroll down and the silver one. add in the silver one like that
and we're gonna add in the price so $249 scroll down and click on save changes so i think that is pretty much set. now what we want to do is click on update so we're gonna view that product so right click and open in a new tab okay, so that's all cool except the font here is really big for some reason before we fix the font, i just want you to look at this for now. so as you can see, the color's here and it says "choose an option" so what you can do is actually make sure it's like a default. it's selected on default, for example let's refresh this page
and when you refresh the page or when you land on the page, it automatically selects silver this is because we have selected silver as our default product and i'll show you how to do that so scroll down here and if you go to variation, you can set the default form value so you can set the default one that you wanna set so for example, i want to set silver then i would just save the changes so what we can do now is update it and let's just view that okay, so by default silver will be selected. let's scroll down and let's just fix this text here if you happen to have some big text
so the first thing to check here is the long description part.to see the problem, we can go to the text on the back end so there is actually code added to that text. so to actually fix it, maybe we can just delete that and what you can do is go back here and we're gonna paste it as plain text so to do that, if you're using windows, i think you'll just right-click and paste as plaine text but i'm on a mac now so i can just click on this icon here therefore when you paste in text, then it won't have any formatting on it so paste that in and let's update that and hopefully that will be all good
let's look at that. okay so let's refresh that and as you can see, the text is fixed so when you're pasting in text from another window you're copying and pasting, it's best practice to use the paste as plain text so slect that and then right click and then paste. so you don't include any of that formatting or code in that text so right now, i think we're done here. i'm gonna show you how to add in another variable product and this time it's gonna have two variations, alright so what you need to do is add a new product. let's just close this for now
go back and let's click on this as a guide okay, so add new product. the product name would be screen pro. so it's like a screen protection film for apple the apple watches so what we can do now is set in a new category. so this could be a screen protection category and then click on add new now for the product tags, we're gonna go here. so screen protector and click on add scroll down and for the product image, click on that so the product image we're gonna set is this one which is the clear one
so i believe it's that one and it should say clear here set product image and we're also gonna set in the additional product gallery images so let's click on that one which is the matte type and hold down ctrl or command so you select both of them. and select the gloss one as well add to gallery. okay, so that's uploaded in there now, we're just gonna past in the lorem ipsum text and again i'm just gonna paste as plain text okay, paste that in okay, hopefully there's no formatting on that. okay, there's no formatting
and i think we can just paste that in here okay, that's all good. now what we're gonna do is make sure to select the variable product. so click on that and inventory, we can manage the stock level if you want to but i'm just gonna deselect that one for shipping, let's add in the weight okay, we're just gonna ignore the link products the attributes, okay so i'm gonna show you another method of actually adding your attributes in rather than clicking on here and setting them up here. we can actually add them here as well so what you can do is click on, um, select custom product attribute and we're gonna click on add so for the name of that title, we're gonna select type
so type that in here. type and we have 3 different types of the clear type, the matte type and the gloss type so what you can do is go back here, type in clear -oops- clear. and then what you need to do is enter in the pipe symbol and the pipe symbol is below the delete button, i believe. so you need to click on shift and then click on that, um, i thin it was / and then it will turn into a straight pipe so that separates the categories. so clear, matte, and the pipe symbol and then gloss so that's all you need do. now, we're gonna click on used for variations and let's just click on save attributes
so once that is done, we need to click in another type, another variation. so this one, the variable for this would be the pack so it could be a 3 pack or it could be also a 6 pack so you either get 3 screen protectors in one product or 6 so we can click on add again and it should give you another field where you can type that in. so this one would be pack and we're gonna type in 3 pack and also the pipe symbol and also have a 6 pack option okay, so that's all good. now we're gonna click on used for variations. click on save attributes so after you've saved that, click on variations
and now what you want to do is create variations from all the attributes. click on go okay, so it should say there are 6 variations added. click on ok so as you can see, for the clear type you can select either the 3 pack or the 6 pack now the reason why they're separated is because, as you can see, for the 3 pack it's only $29.00 and for the 6 pack, it's normally going to be double but i made it a discount because the more you get, the cheaper it will be so basically we just enter in the different prices here so what we're gonna do is we're gonna add in our images first, so this is the clear one so set that variation image in
and the price of the 3 pack, it's going to be $29.00 scroll down and as you can see here, when we select the clear type you can only select the 3 pack and that is because i deleted the option for the 6 pack . maybe you've sold out of it or something like that and you don't want to inculde that in then you can simply just remove that so you click on remove. okay okay, and then wait for that to load, you'll see that the variation disappears so people don't have the option to buy the 6 pack for the clear screen protector so right now we're gonna set the other ones in. so click on that and add in the image so that one is the matte image. set variation
the regular price will be $29.00 scroll down and the 6 pack price. um, we're gonna add in the image again.that one, set that one in and this one, because they're getting 6, they're getting more. i'm gonna make it a little bit cheaper for them if they get 6 so $49.00 scroll down and the same thing for the gloss. click on that. add in your image okay, add in the price and then you want to click this one again and then we ant to add in that one. set variation. and for the 6 pack, it will be $49.00 as well so we're gonna click on save changes okay, i think that is all good. we're gonna click on publish
and now what i want to do is just view that product and see how that goes okay, so what we need to do - maybe you you want to make the descritption a little it shorter. it's too long and we also want to set this so the default option will be selected once people land on the page so to do that, we need to go to variations i believe and you can set the the default form values so i want to set it to the clear type with the default set to the 3 pack and save changes and then i also want to make this description a little bit shorter so i'm going to delete some of the text click on update
and let's just view that product so the description is shorter and the default type is set and then people can just add that to cart. okay, so that's all good now i'm going to add in the rest of my products rest of my watches and i advise you to just probably pause the video and then add in your products as well and then we're going to move one and i'm gonna show you how to set up your cross sells and up sells so what is a cross sell and what is an up sell? i explained a little bit about it in the introduction to the video but i just want to give you a refresher so let's click on this watch here that we have, the bad blood watch
now up sell would be something down here. so for example if this watch is $450.00, then you might up sell it with a limited edition watch. for example, like the taylor swift edition which has her signature and then you could be selling for $4,500.00 so you're gonna make more money per person. i guess you have a small change of making a sale but if you do make that sale, you're gonna make a lot of profit. so basically you can set the the up sell product manually on the back end and i'm gonna show you how to do that right now. so i'm also gonna show you what is the cross sell. so let's add that to cart. i believe..... .....it's already in the cart so let's remove all of these for a second
and let's just say we added that bad blood watch to the cart. and right here it says "you may be interested in...." so right here is the power bank or wireless charger and also the screen protector so a cross sell is basically setting up your complementary products for example if someone buys the bad blood watch, they are most likely interested getting a wireless charger and also a screen protector so you can ensure that your customers see these products and they'll probbably have a good chance of buying and picking out these products it's like when you go to a 7-11 store when you fill up your petrol, they'll sell you chewing gum and snacks and all those things at the counter and this is basically that but for your online store
so without much further ado, we're going to go and set it up so go back to your product and now let's add an up sell for this bad blood watch. perhaps click on edit and scroll down here and click on link products so for the up sell, all we need to do is find the product that we want to show up on the bottom here so we want maybe that little red watch. so just type in the title of your watch and then it should load up and you could select it. just click on update and we can view that product so right-click and then it says "you may also like...". so this is the u sell product that we've just added in and these is the related products which are based on the tags that you've set in here
so if you look at it, it says casual watch. and then if we go to the spot pigeon watch here, it would also have the same tag as the casual watch. so if you don't want them to be related, and you don't want them to show up at the bottom of this watch here, then perhaps change the tag so for example if we delete that tag, and then update that page and then refresh it, then you'll see that it disappears and it only shows the up sell product that you've set in here so adding in your up sell product is really easy. link products and then type in the product name and then it will load up and then just click on it. so you can add additional products as well and now i'm going to show you how to set up the cross sells and that's really easy as well. so for example,
i want to......let's go to our shop page and i want to add these two items, the screen protector and the w. one wireless charger so to do that, we just type in the cross sells section "screen" and then name should pop up, the screen pro select that and then we're going to select w. one and that should pop up as well. so just select that and then we just click on update so let's go view that product. let's just close this for now so there's no items in our cart now. so let's add that to cart and see if that adds on as our cross sell product so as you can see, that's added in here and that's all good but let's just say if we have this in our cart already so select options
and let's just say we' already bought this product so add that to cart and view cart then you'll see that it disappears. so that's really cool and it automatically does that you don't have to do anything. woocommerce is really powerful, as you can see and that's about it for the up sells and cross sells now finally, we're going to go back to our home page and then i'm going to show you how to add in your featured row which includes the featured products or whatever products that you want to put on your home page and also the styling of it and then i'm going to teach you how to style the product title text
as well as changing the buttons of everything. okay, so i'm gonna teach you how to set up the layout and also the styling of this age and also adding in the filter as well as the category filter later on so i just want to do that altogether so we save some time. so to set up the next row, the featured products row. for example, the one that you see here, we need to go back to the site here and basically turn on our builder i'm just gonna close that for a second and let's close that okay, we're gonna scroll down and we need to edit this row here but we need to click on this button here. but when you try to click on it, it sort of disappears now what i found is if i hover over here, and if i keep the mouse all the way across like that,
then i can easily select it. if i double-click it, and then i can change the row styling for it so if you click on styling and we want to change the background color to a light gray so f2f2f2 and as you can see, it's a light gray. it's nice now the reason that we want to add a light gray is because we want to separate the content so the slider has an area and then a different area for the featured products and then a different color for the video so it separates the content and it makes the viewer experience better and easier to read the website soo once you do that, you just need to click on save okay, another option is to edit it on the back end. let's just save that first
and click on x and if for some reason you still can't edit the styling, you can click on edit page scroll down here and go to the themify builder and then this is the first row for where we put our slider and this is the second row which we're editing right now. so to change the styling of it, what you'll need to do is to just hover over the icon here. click on options and you can see this panel over here.go to styling and then you can change the background color here so you can change it to any color that you want but i think a light gray is really good and i highly recommend it. click on save
and let's just save that and then we're gonna switch back to our front end scroll down and let's turn on our builder again. now we need to create this part here, we need to have the text in the middle and also the background to be read okay, so what we need to do is to drop in a text module and then we can type in the text here so " new styles this week" or you could have whatever text that you want. so "new styles this week" you could have "featured products", "on sale", whatever you want. okay copy that - i mean just highlight that and change that to the heading 2 tag. alright now if this thing doesn't appear, you need to toggle this toolbar thing
so let's click onsave and see how that looks first okay, so that's on the side here but you want that to be on the middle and you also want the background color to be red. so to do that, we need to separate the text column into three so we;re gonna separate it into this one. i believe actually it might be this one here. okay, so this one is the one which has the bigger middle part so drag that into here and now what we want to do is to double-click it and then we need to change the background color. so go to styling and background color, you can select any color here and then it gives you a code and i've already selected a code so i'm just gonna type it in so ee2e26, i believe
okay. so that changes that to be a red and you can also preview that if it doesn't show up. click on preview and then it will show up right, we need to move this to the center. so the text to the center. you can go to styling again scroll down and for the text align, we can align that to the center. so that looks pretty good. click on save save that and close that so now what we need to do is to move it down a little bit. so as you can see, there's not eough space up here so we need to move it down a tad so to do that, we can just turn on the builder again and then double-click this module and then we also need to change the font color as well, forgot to mention that. so
for the font, you can cahnge the color to white scroll down to the padding area and we want to add a little bit of spacing to the top so what we can do is type in 5 5 pixels is not gonna move it much but we;re gonna change it to 5%. and that looks good so then we're gonna click on save save it again and then close that now the only problem is that the font is different and i'm gonna show you how to change all your heading fonts in a second. we're gonna finish adding in these products
and then we can do it altogether and it saves some time so from now, we just turn on the builder and we actually need to add in our products. so to do that, you can go to woocommerce.com so type in woocommerce and then type in shortcodes. click on enter and click on the 1st result that you see here, shortcodes included with woocommerce now shortcodes are basically sort of a code that you paste in your website and then it will actually show the content. so what we're gonna do is we're gonna use the product shortcode and there are a lot of shortcodes here but probably the most often one that you're gonna use is the product id one
so copy this shortcode into your clipboard go back to your website and we're gonna drop in a text module here you might find that it's sort of hard adding your text module you just need to wiggle it a little bit. yeah, it might take some time. or you can go to the back end and add the text module in so that might be easier if you want to do that and now what we want to do is because we're copying shortcode, we wanna paste it in the back end here into the text section or you can also just click on paste as plain text okay, this thing here
and paste that in. otherwise, you would get some formatting for example if you don't paste as plain text, then i'm gonna show you how it turns out to be you just paste that in here and you get all these formatting here which adds a lot of spacing to your products okay, so for example, let's go get our products first and i'll show you what i mean so go to our dashboard and just open in a new tab and we need to go to the products section and we need to get the product id to get that, it's fairly easy. so depending on what you want to show on your home page or what you want to show on a specific page, you get the id just by hovering over the products
so we want to show the bad blood watch first. so hover over bad blood and that's 65 the next one will be noir black and then spot pigeon. so 65, 79, and then 66 okay, i'll try to remember those.okay, so what we need to do is type in 65 here and if you click on save now you'll see that there is this massive padding and this is because you've pasted it in without setting it to paste as plain text and you don't want this to happen. so double-click on that and next up, let's just delete that and you can paste it in back here change it to 65. click on save
and then your product should display nicely once you refresh it, it's gonna align properly so dont worry about that yet so what we need to do is because we want to set 3 products in here , you can change the columns so change the columns to 3 like that. if you want to add in 4 products, you can do that and that's fairly easy. if you want to add in 2 products, then set in one for two things. okay so right now, this is really cool. so click on duplicate and what that does is it duplicates the module so that saves you a lot of time so let's just drag the first one in here and then another one in here. okay, they're all the same products and if you want to edit it, just double-click on that
and let's just change this to i think it was like 75 click on save okay, so was that the right one? okay, 79. sorry so if you ad the wrong id, you can't see the product i think the product just disappeared so double-click on that and then change that to 79. click on save duplicate again drag this one across. double-click that
and i hope this one is 66. and then click on save save that and there you go. okay, so once we refresh that okay, it goes really small, the items here, and i'm gonna show you how to fix all of that including the styling for all the fonts and also the buttons. so this is really cool okay, so we're gonna start from the top. we're gonna edit the styling up here and then move down so go to customize and i want you to click on this button here. go to typography, default typography and then we're going to edit the heading 2. so how do i know it's the heading 2?
i remember i said it's the heading 2 but if you forgot, then you can just highlight that text and right-click it and then inspect and then you'll see that it's under the heading 2 tag.so you could see h2 and you've got the title in there so that's how you know it's heading 2. okay so heading 2 and then you want to go to the font family and we want to change that to century gothic okay, that's really easy. and you can change the font style to 700 which makes it a bit bolder and then you can change the text transformation to lower case okay, so that looks pretty good
and the appearance, you can change the default font color as well as the font size and everything like that so i'm gonna change that to maybe size around 40 you can also change the line letter spacing but i want to keep that as default one thing i want to warn you is never set the positioning for it because what happens is when you set in a new text to the heading 2, then you'll find out that it moves to another direction. you don't want to do that. we can set the location of it by using padding and also using the columns. okay so leave that as is and that's all good save and publish
now we want to sort of edit the text for this part you can't really highlight it. if you highlight it, then you'll click the product. so what you need to do is to hover over it and then right-click and automatically it will select everything for you. so inspect and it'll say that it's under the h3 tag so that's what we need to edit. okay, so go to heading 3 okay, heading 3 here font family and we want to change this to abril fatface. click on that and hopefully that should change you can also change the text transformation but we want to leave that as default we can change the font size here but, for some reason, it doesn't work and we need to set that in manually
okay, so i'm just gonna set that to 36 anyway for the other things that we set to h3 so you can set that to 36 as well. okay and after when you've done that, let's just click on save and we're going to get out of this part go to themify options and we're going to fix the watch size.to do that, it's really simple go to my website and go to the blog post again.the hoganchua.com and go to my blog post adn then what you need to do is go to this section here and this is where we can edit the product, okay so i want to fix the product image size okay, so we'll just copy that code and all we need to do is to paste that in and that will fix it
so paste it underneath this bracket here. just ctrl+v or command+v and as you can see, that fixes the product sizes so now we're gonna fix the title size as well so hit enter and we're gonna go back here and copy in the code so woocommerce product title font size. okay, just copy that and paste that just in there. and there you go and that changes the font size to 36 pixels and if you want to edit that size then you can just type it in. for example, 40 you know, or 12 which makes it really small but i'm gonna keep it as 36. okay
so that's really cool and since we're here we're also going to edit the button colors and the hover colors so go back here and then we can minimize it just by clicking on it like that we can click on this "woocommerce button styling for all" and then all we need to do is copy that copy and then we need to paste that in so that changes all the buttons and that looks pretty god now and if you want to change the colors, it's really easy so go to...uh, i thin it was color picker. oops and then select the color that you want to change. for example, you're gonna change it to like a blue color
then you find the color here, take the code, and copy that and then all you need to do is to edit the color here. so for the background color, it's currently set to the dark gray/black color and to change it, you just paste in your new code and then it changes to blue so you can also set the border to blue as well paste that in. now, it's blue and if you want to change the text color, then you can change that here by pasting in the code and the same goes for the hover color so if you what the hover color of the text to change, perhaps you want to change it to blue
then paste into here so it's gonna be like that and it's pretty cool and you can change the background color here as well just by choosing the code and then pasting it in here but i want to to keep it as default so i'm gonna change them all back to 2929. like that 2929 and the last one will be 292929 so that looks really cool and it's really clean and nice so we're gonna click on save now and let's just close that and see how that all looks
scroll down and you'll notice that you think you want to edit this spacing here and that's really easy as well adn there's a lot of space here and we want to move the text up a little bit some of you might think that is fine but i want my shop to be perfect so i'm gonna show you how to do that as well okay, so what we can do is move the watches down a little bit. for example, this one we'd movoe it down i think a tad just a few percentages. so you can turn on your builder and what you can do is add little bit of spacing to the text module which gives a little bit of space there or you can a little bit of spacing above this text module
and give it a little space. so i'm gonna teach you how to do it for this one so let's just double click it and let's go to styling and then if we set the padding then you'll see something like this. set this to 5% padding then you'll see this red gets bigger so we have to set the margin and, basically, the difference between the padding and the margin is imagine there is an invisble box around this color thing and margin is bascially inside that invisible box so whenever you add in padding, it's gonna increase inside. so if i delete this, and if i edit the bottom of the padding, then you'll see that it adds some invisible space because it's outside the invisible box. so it's useful for some occasions like this one
so once we've added in the 5% margin then that looks pretty good and now we also want to edit the distance between the watches and the text so to do that, we can....just save this first.... and close that and let's head to customize. while we're doing that, head to my website we can close that for now and click on "reduce woocommerce product image and text padding". click onthat and copy that code. just copy that over go to custom css. scroll down
hit enter one time and just paste that in so once you've pasted that in, you'll see that this title here move up and then it's closer there and everything looks perfect. so click on save and we're gonna click on close okay, so our website is pretty much done and it looks pretty good and you'll also notice that once we changed the buttons here, it also changes the buttons for our whole shop now the reason for that is because that way, everything looks consistent and then it looks clean and this looks nice. you don't want to have like different colors for everything. it makes it too cluttered and it looks ugly. so as you can see, all the buttons have been changed
and that looks really nice and clean. okay, so let's just head back to the shop okay, so that's done. congratulations, we've finished adding in the products and setting up row number 2 what we're gonna do next is we're going to set up and add in the video section the video section that you see here and yeah. okay, so let's do our video module. and i think it's important even though you don't want to add a video i think it's that you watch this part because i'm gonna show you can change the layouts and use that space for something else. so what we're gonna do to start off with is to turn on the builder and now what we want to do is to change the background color so click on options for that specific row
and for the styling, we want to change the background color to, i think, 292929 which is the dark gray color. gonna click on ok - i mean save, sorry. okay, we're gonna drop in a text module and for the title, we're gonna type in lorem ipsum. so obviously, you can type in your own title (oops) so i think we want to change that to h2 tag i think, so let me test that. inspect okay, so h3 tag.so we want to change that to the h3 tag and click on save okay, so it's black and we can't see the text then we need to change the color and you can change the color either on the front end text color to white
or you can change it on the back end, font, font color, and then change that to white okay, click on save and now what we're gonna do is drop a video module so we're gonna find the video module. here it is and drop that below there now what we need to do is add in the video url. so you can copy and and paste the video you uploaded to youtube or something so for this one, i'm just gonna grab the url from here.so it's gonna go to this website and let's click on that let's pause that video and let's copy that video copy that url, sorry, and paste that into here
and for now, we're just gonna click on save.there are a bunch of settings here that you can change but i think we can just click on save okay, so that's pretty awesome. let's click on save and close and we're gonna refresh the page to see what that looks like and if we need to do any edits okay, so the only thing that i want to change is probably this spacing up here so to do that, we're gonna click on turn on builder and that's really easy so let's just double-click on that and we're gonna add a little bit of padding on the top. so scroll here to styling and then padding, maybe 3% let's see how that looks
well, that's a bit big so let's try 2%.click on save save here so that looks about pretty good. so the spacing here is pretty even and then it's pretty even with there so that's it for the video module. it's really easy and i'm gonna show you can utilize this space for a different layout. so it's really easy . turn on your builder again okay, as we've dropped in our video module and what you can do is hover over that video module okay, so let's just change it to this one, with the two columns so what happens there is the video will be in one column and now you've got some space so this space here perhaps you could add some text. so you have your product video
and you could add some text here. drop that text module into here and let's go grab some lorem ipsum text and let's just paste that into here okay, grab some of that text. copy that so click on plain text and then paste that into here and if you want to change the color, 'cause this background is black, then you can change it in here so we're gonna align the text to the center and change the color to white. click on save ad there you go and that's really easy. what else you can do is you can also add a button like a call to action you have your product video here, you have a little bit description of what that product is about
then you can add a button. so we've got a button module here and you could just drag it and put it into there so you can select that size that you want the button and you can also select the style. so let's just type in -okay, move this over and for the text, we can type in "more info" and we want to link that button to the product page or something like that. so for example, this video here is talking about this watch here or we can link it to the shop page, actually. so what we can do now is click on save for a second and let's just grab this link okay, right-click and copy link address and that will get the link for the shop address and here is the button. so double-click on that again
and paste in a link like that so let's just preview that to see what that looks like so it's just a normal light button and as you can see here, you can change the button style so i want it to just be like an outline and i also want to change the button text inside as well. so what you can do is you can go to styling for the font color, want to change that to white button, and then we can preview that to see what that sort of looks like okay, so that doesn't work. so it's a link color. so you're gonna change the link color because that's a link and hopefully that works, so preview that
okay, so you need to change the font colors because- -i mean, you don't change the font color because that is an actual link. you actually need to change the link color okay, so that is cool and you can change the text decoration of that so click on button and keep that one as...... ...okay, as white that looks really cool and clean and you can also change the font family and all of that at the back end as well. so click on save and that looks pretty awesome. so the text, you can drag it, drop it and click on save
click on x and obviously you can add some padding to the video and add some padding to the button so then you know, it's evenly spaced so that's really cool and i wanna show you another type of layout which is cool let's just drag this video module down here as well and as you can see on this website here, iconic they basically have an image and when you click on that image, it links to their product or a different page now to do that, it's really easy as well. so you can drop an image module so let's just drop that in here and all you need to do is browse the library or upload some new files. so for example, i'm just taking...maybe this image here as opposed to the image that we have for our slider
and we're gonna insert the file url. okay, so we're gonna link that up. so for the image link we want to link it to perhaps....... this page here so we're going to shop and obviously you just link it to whatever you want but i just want to show you an example so i'll just link it to that watch there. so click on that watch and then we get the url and go back here and paste that into here and you can also make sure that that links opens up in a new tab by selecting this button here don't worry too much about the other stuff and let's click on preview to see what that kind of looks like okay, so that looks pretty good so you could also do your layout like that
and obviously just add some padding to the top and the bottom and that's really easy. okay, so what i'm gonnd do now is i'm gonna delete all this stuff and then rearrange everything perfectly again and then we're gonna move on and set up our instagram feed that you see down here and also add in this title here. okay so........ you need to delete all this stuff so delete it let's delete some..... delete text okay, so let's move the......
....video. as you can see, sometimes it's hard to move. so what i'm gonna do is actually go to the back end really quickly and rearrange everything so click on edit page go to the themify builder here and i wanna move this text module up here and for the video module, i want to change that space to nothing. so let's just drop that video underneath click on save and click to swith to front end scroll down and as you can see, easily rearranged. click on save , close that and.... and there you go. so congratulations, we've finished adding in our video and i've also showed you
different layout possibilities as well as add in a button so now we're going to move on to adding the instagram feed and also setting that up so to add in our instagram feed, we first need to add in this divider and then followed by the title and then another divider and then we're going to add in our instagram feed and then i'm gonna show you how you can actually change the layout of it and colros and things like that okay, so let's head back here and let's turn on our builder okay, so i'm gonna start on row #3 and, i thik that's row # 3,. row #4, sorry okay, so what we need to do first is to drop in a divider module
so the divider one is basically that line that you see so we're gonna change the divider style to the solid one and then for the stroke thickness, we want it to be i think 1 pixel. okay, if you want it to be thicker then you can change it. so for the divider color, i'm gonna change it to 2929. then you can preview that line okay, so if you want to make it thicker then all you to do is change the pixels. like that but i want to keep it to 1 pixel and then i'm just gonna save it okay, so how do you get two lines here like that? so the way we do it is we need to separate the divider into 3 columns so like that. 1 column, 2 columns and 3 columns
so we change that to this one here then we duplicate it and then we basically move that over to the 3rd column. so the middle column, we save that for our title so you can put in any title that you want. so maybe "follow"-oops. "follow us on instagram" and then we need to change that to the h2 tag okay, so let's just click on save and see how that looks first okay, so what we need to do is, as you can see, there a bit of spacing here and a bit of spacing here but we want it to be a little bit closer. now do that, we can easily do that by hovering over here and moving down for the gutter spacing. and that's called the gutter spacing
we can change it to narrow which is a little bit less or none so none makes sure it is as close as possible and we also want to center the text 'cause as you can see, the space isn't very even. so let's just double-click on that and we can align center in here or we also can do it on the styling panel like that. and click on save so let's just click on save and close and see how that looks okay, so it's a bit too close to 3rd row up here. so we're gonna move it down a little bit by adding just a little bit of padding so to do that, we can turn on the builder again and for this, we can move the whole entire row down
so we go hover over the row options and click on that and then click on styling and scroll down a little bit to padding here and we're gonna type in 3 and change that to percentage. click on save and then click on save and close that. okay, so that looks pretty good so far. now we need to go back to the back end so click on the dashboard scroll down. make sure you have the instagram feed plug-in installed if you want to follow along now what you need to do is you'll need to have an instagram account, obviously
we need to log-in to allows this plug-in to access to our instagram okay, so alll we need to do is type in our username so i think it was shopwatcheshere and then our password was.......just type that in and click on log-in so what that did is it allows the plug-in access to your instagram feed and then you'd be provided with an access token here so what you need to do is just copy that code and paste it down here and then also copy the user id and paste it into here okay, after you've done that you can tick this one which preserves the settings when the plug-in is removed so basically if you remove that plug-in and then you will reinstall it again, then the settings that you set into here
will be saved so it's gonna save you time if you have the need to do that. so just click on save changes okay, so after you've done that, you can customize your feed. and click on 2 okay so before we actually customize this, i wanna show you what it looks like so click on display feed for now and then copy that now we need to go to visit sites. so right-click and then visit site, open in a new tab okay, so scroll down here and turn on your builder
now we want to drop in a text module so drop in a text module in this row here so for a shortcode, we need to paste it on the text into the text tab and let's click on save and see how that looks and we're gonna click on save, that's the load more button. and let's just close that now we need to just refresh that before we can actually see our instagram so this is what it basically looks like right now and let's go through the settings. so click on 2. customize now if you want to change the width of the feed and the height of the feed,
that means the width means its across and the height means up and down so if you wanna reduce the size, you can do that here and also if you want to change the background color of it, let's just change it to a gray, i just want to show you an example, so scroll down here to the bottom and make sure that is saved and let's refresh that and you'll see that you can change the background color so i'm just gonna keep that as white transparent and you can also change the sort photos by so you can show random photos or the newest ones first i'm gonna leave it as newest and the number of photos to show, right now we're only showing 4 photos, so you can change that to 20
or whatever you want so i'm gonna change that to 4. and the number of columns formed, that basically means the 1st column, 2nd column, 3rd column and 4th column. if you have like 8 images, then your other images will be shown below that so if you're showing like 8 columns, then all your images will be shown on that same row so scroll down and you'll see the padding around the image and the padding bascially means the space here so if you want it to not have any space, then you can change that to zero and if we save the changes and if we refresh that, then you'll see that there's no space left okay, so that looks good and we might keep it as that. scroll down more
and you'll see that if you want to show the header, this is the header i don't want to show that so i'm gonna deselect that and the load more button, load more button was here the reason why it doesn't show is because i only have 4 images so there's nothing to load, really so, i think, deselect that. i don't want to show that. and i also don't want to show the follow us on instagram now the reason why is i want to keep this website really clean and people can follow me if they click on the picture then they can just like it, comment it and also just click on my theme to follow me if they want to so let's just close that and deselect that. obviously, you can change the color of that if you do wanna show it
as well as the name scroll down and i think that is it so let's just refresh that and see how that looks okay, so that looks pretty good. now if we actually exit, copy that url, and let's go to incognito window, i wanna see the website as what other people see because i think there is some spacing that we need to add on to the instagram post and i would walk you through that so as you can see, there is not much spacing there. we want to make it sort of even like that
so let's just add maybe 3% padding to that. so, oops, let's go here turn on your builder. okay, so let's just double-click the text module which has the instagram feed in it so double click that. okay, go to styling and for the padding, we want to add a little bit of padding to the bottom. so i'm gonna try 3% save it. close it and then, yeah, that should be good to go congratulations, so we've finished adding in our instagram feed now i'm going to walk you through how to set up the footer, add in the icon, the social links as well as the menu links, as well as the e-mail subscription box and also the text down here and all the styling and all the good stuff
okay, so it's time to set up our footer. so the first thing we need to do is go into the back end and to set the themify settings so go to your dashboard and then hover over themify ultra and go to themify settings so i'm gonna scroll down here to theme settings. scroll down to footer design so for the footer design, if we look at this design here, we need to get rid of the site logo so i'm gonna open our website in a new tab and show you what i mean okay, scroll down. as you can see, that's the site logo. that is the back to top button back to top button, this is footer text row # 1, footer text row #2
so if we look at this, then we want to exclude the site logo. we don't want to exclude to footer widgets because that's where we're going to add these things in. and then we want to exclude the back to top button and for the footer widgets, we want 4 columns. so as you can see, 1 column, 2 column, 3 and 4 okay now that's up to you on how many columns that you want. you can select that and you also want the widget position to be before the footer text. so this is the footer text right, hold on. so this is the footer text and you want your widgets before that so select before footer text. okay, so once you've done those settings then we're gonna click on save okay, now what we want to do is to upload our logo. so go to media and the logo that we have is the white one here but we also have the black one as well so
so if you haven't uploaded that logo yet, please upload it or upload your own logo but we've already uploaded earlier so this is the log that we want, the black one now we've got the url over here and what i need you to do is copy this url so copy your logo url. yous is unique to your domain so just copy that to your clipboard and now let's close that now let's go to apperance and let's go to widgets okay, so we go to footer widget #1 which is this row here and let's open that. so what we need to do is drag in a text module so drag in a text module, just move it up over here, and put it into there
now for the content, what we need to do is go to my website again, go to that blog post with all the css and the links and stuff like that so what we need to do is click on add in logo to footer html so click on that and all you need to do is copy this in. actually, before we do that, before you copy that in, paste in what's in your clipboard first and that should be your logo url if you accidentally pressed it, don't worry about it we can get that link later. just copy that first
and let's just hit enter one time here and paste that into here on top, okay and then what we'll need to do is copy this url. maybe just cut it and you need to paste it into here, your url for the logo. we need to delete everything in here between these two apostrophes and just ctrl+v or command+v. paste that in, okay now that should be a logo image url. now the other url that you need to change is your website url. so you need to change that to your home page so for example just copy that in, get your home page url, and pate that into there. just like that
okay, so that's really simple and if you accidentally copied this thing first and forgot to paste the logo url in, then you can just right-click, open link in a new tab and then go ahead and grab that url for your logo just grab it like that and then you can just paste it into there and then what you need to do is just click on save so if you want to change the size of it, for example, the width of of the logo, then you can edit the dimension number here in front of the px and then change that and basically click on save so once you've done that and you can click on that, we want to hover over here and then click on visit site and we're gonna see if that works
okay, so that worked out fine. you've got the logo here and should have it here you'll notice that there is a big space here and i'll show you how to fix that so don't worry about that what we're gonna do now is add in the rest of the stuff such as the social links and the menu links and all that stuff, okay so let's go to our dashboard now what we want to do is go to themify ultra, themify settings you'll need to go to social links okay, so for your twitter, if you have it, then you need to add your twitter url here your specific one
i'm just gonna paste that url from twitter. paste that in and the icon color, we want to change that to the dark gray so that's gonna be 292929. and the background color, i'm gonna set that to a light gray because we're gonna set the footer color to a light gray so that means you won't see the background color of that so it looks like it's transparent so for facebook, i might just paste in my one here okay, so maybe just go to my facebook page and like it and that's where i post my updates and stuff like that so paste that into here and we're gonna keep it the same color 'cause you don't want to......
we want to keep everything sort of coherent f2f2f2 and say if you don't have a google+ account. so if you don't have it, you don't have to enter anything and it won't appear. or you can delete it okay, youtube. you can copy a youtube channel url same thing okay, pinterest. i don't have a pinterest but you don't see any instagram here, right? so i'm gonna show you how to add that in. so click on add link for the title, put in instagram. and for the link just grab your instagram profile url
paste that into here. for the icon, you can click on insert icon and then you can scroll down there are a hundreds and hundres of icons that you can use scroll down and you should see some brand icons here okay, so you've got a lot of different social network icons and things like that that you can use okay, we got the instagram one here. click on that and i'm gonna change the icon color again. 2929. and the background color, f2f2 okay, so that's really easy and if you want to rearrange the order of it, you just drag it and drop it like that it's fairly easy and one more thing
if you want to upload your own sort of image of that icon, then you can upload it through here so click on that and let's click on save okay so once you've done that, it won't actually appear on our home page yet. so if we refresh that and you won't actually see that yet. now the reason for that is because we need to put it into the widget okay, so let's put that into the widget. go to appearance. widgets so this will be footer widget 1 but it will be under the logo. so we're gonna go here on the left hand side and then select themify social links and let's just drag that into here we'ren gonna drag that below our logo. like that and you can select the icon size. there
and you can also open those links in a new window so when someone clicks on it, it opens up in a new window so take that if you want to i might tick that. again, let's just click on save now let's go back here and refresh the page to see how that looks okay, so that looks pretty good. i might want to change that to a lighter size okay, as you can see, you see the background color. don't worry about that because we're gonna change that background color to f2f2 as well so you won't see that circle so i might change that to large and click on save okay, so after we've done that, we're gonna enter in these menu links
so to do that, what we need to do is click on appearance then we need to go to menus and now what we're gonna do is create some new menus. and we're gonna click up here now the menu that i'm gonna call this would be footer 2 menu and create that menu so drag in the pages that you want to be displayed on that first column so i'm gonna choose about, blog and contact okay, so about, blog and contact. i'm gonna add that to menu and i'm gonan rearrange the order of that. like that now i'm gonna add in another menu so i'm gonna create another new menu
and this time, i'm gonna do returns, delivery, and faq so it's gonna be footer 3 menu. and create new menu you can name it any name but i just want to name it so you know which one to put it in so it's gonna be returns, delivery and faq. add to menu so we can reorder that if you want to like that, okay. so save menu and all you need to do now is go to widgets then we can drag in a custom menu into widget 2 first and we can select the menu that we just set. so i'm gonna select footer menu 2. click on save
now drag in another one, put it in footer widget #3 click on footer 3 menu and click on save so let's refresh our page and see what that currently looks like okay, so that looks pretty good. we're gonna style everything later so don't worry about what it looks like now so what we're gonna do now is add in our e-mail subscriber boxing so what we need to do is go to our dashboard again okay, so we're in our dashboard and we need to click on mailchimp for wordpress. if you don't have it, make sure you install that plug in. so click on that
now what you need to do is if you don't have an account and you want to enable people to enter in their e-mail and subscribe to your e-mail list then make sure to sign up for an account so you can click here and then you can sign up for a free mailchimp account okay so you can create an account and after when you create an account, you can get the api address and then just paste it into here and then just save changes. i'm not gonna walk you through this now 'cause i think some people might not want to do that yet but i just want to show you how to add it in to your website and also customize it so in the future, you can come back to it
so let's go to forms and i'm gonna name this form maybe just form 1 and add new form so if we preview this form now, preview that form, you'll see that it say email addres here and i don't know why because there's two email addresses i think this is a waste of space it says your email address here already so why have that there? so i'm gonna delete that and also i'm gonna show you how to change that button text to subcribe, the one that you see on my website here subscribe. okay so what we're gonna do is delete this
delete the label, email address. delete that and move that up like that and for the input type, submit value, this is where we change the name of the button so change it to subscribe or or as sign up, sorry so after when you've done that, then can save the changes and if we preview that form then it looks something like that. don't worry about the styling, we're gonna edit that later so what you need to do now is you can copy this shortcode here
okay, just copy that to your clipboard now we're gonna go back to the eidget section. so click on widgets and then this will be the footer widget #4. so click on that and what you can do is you can add in a text module and then paste in that featured shortcode or you can just drag in the mailchimp sign up form here so let's just drag that in. and you can change the title to whatever you want. for example, my title is newsletter so you can keep it as newsletter if you want to. save that and now let's go preview our website okay, looking pretty good. we've got that layout done. now we're going to
edit the footer text 1 and footer text 2 so what we need to do is go to my dashboard okay, since we're here, i want to close all those things let's just close all of these, we don't need them anymore close this one. close that and also close that one okay, so go to themify ultra. themify settings if we go to theme settings, scroll down you'll see footer text 1 and footer text 2
so if you don't want to put anything on the footer text 1, all you need to do is hit space like that so if we click on save now and refresh the page you should see that's just disappeared what you can do if you want your footer to be something like that, let's just copy that or you can type in your own, that's up to you and what we can do is we can put that into here paste it like that or you can type in your own copyright or whatever you want
and type in your name here and that's it so for footer text 2, if you want to support my channel and myself for creating this tutorial, then what you can do is go back to my website here and click on inspired by hogan footer text so what this does is basically add a link back to my website and if you don't want to add it in, that's fine it's already cool that you guys are following my tutorial. thank you for that. but if you do, then you can just follow these steps. so just copy that to your clipboard and then go back to your website here and then just paste it into the footer text 2 and you can change the text here if you want even if you want to put in another link in here
then you can change it to yourlink and your name or something like that save that and leet's go to our home page visit that site okay, let's check if that works. open that link in a new tab okay, so that works. that;s all good. thank you for that if you did want to put that in but if not, then it's fine as well so we're gonna style our footer section now so this is pretty fun. so we go to customize and let's just make the footer skinnier first
so go back to my wesbite and we want to reduce the footer size so find how to make the footer skinnier copy that code and paste it into the custom css section and paste taht into there. scroll down and there you go. so i think that has made it skinnier okay, so what we're gonna do now is i'm also gonna move this subscriber box subscriber button up as well since we are here already so click on enter and go back to my website
okay let's look for that. how to move subscribe button up. click on that copy that and let's just paste that in okay, so that's perfect and that looks really good um, yeah. so let's just minimize that section and now what we're going to do is we're going to change the color of the footer so what you need to do, i selected the advanced options so click on that and go to footer. now this will be the footer wrap background color and we're gonna change that to a light gray so f2f2 like that. okay, once you've changed that, then click on save and publish
now what we're gonna do is cahnge the link font and link color so i'm gonna scroll down and look for that okay, so the footer link. go back here we want to change it to the dark gray okay, so change the color .see how that looks okay, that looks pretty good and i want to change that to lower case and i want to change that font to maybe pt sans as well 'cause that's the same as my header so i want everything to be consistent click on that and that looks good
and let's say you want to add in a hover color. you can cahnge that here: footer link hover let's change that a light gray as well and see how that links okay, so that might be too light. we want to change that to maybe a darker color let's change that yo maybe 6666 okay, like that okay, that looks good.let's take a look at our example and let's see okay, now the only thing that we need to change is the button here. i'm gonna show you how to do that so let's save and publish first okay, let's close that
now we're going to forms. so this sort of like a form and the contact form is also a form as well so if we go to the contact page okay, we haven't added in our contact form yet but this is also a form so whatever you change in the form section will sort of edit the styling for these forms so it's universal. so let's go to forms again and we're gonna scroll down and you can play around with these settings but i don't want to go through those at the moment so i would go to form buttons and we can change the background color of that so let's change it that sort of dark gray so type in 292929
okay, so that's really cool and now what we're gonna do is add in a border as well so we're gonna add in a solid border and i'm gonna change the border to the exact same color and i might change it to 2 pixels in width so you got that there and now what you want to do is go to the form buttons hover and as you can see when you hover over that button, it turns white okay, so i'm gonna change the hover color to white but you can't see the font now so we need to change the font color down here we're gonna change that to the same color, dark gray and let's hover over that
okay, so that looks pretty awesome and i think we're pretty much done so let's click on save okay, so as you can see, you might notice that the font of these things the font here is different from the links so to change that, what you need to do is we need to close that and then go to footer and then change the footer font because that is not a link so you can change that or leave it as is i might change that, actually, so i might change that to pt sans again pt sans like that so it looks all the same
then you can change the color, of course so all the colors are pretty much matching and that's pretty cool or you can cahnge it to red and see the difference click on save and publish and let's close that let's take one final look to check if we pulled off everything right okay, that's good good okay, that's very good. so awesome congratulations, you've finished the footer and, essentially, you've finished the entire home page
okay, so that's really cool now what we're gonna do is set up our about page set up our about page and then we're gonna do our faq page and then we're gonna move on and do the contact page and then after that, we're gonna configure the layout for the shop page and that's realyl cool as well okay, so we're going to be doing our about page now. we're going to make it look like this so the first thing that you need to do is to turn on your builder so you can see, it's sort of separated by 3 columns but it's actually one column and then a larger second column and the text here in another text column
okay, so i'm gonna show you how to do that so what we need to do is change it to this one here or you can change it to this one here, i think it's this one so what we need too do is drop in a image module. like that and then we can browse our library and if you haven't uploaded any files, just upload your image filed but if you've been following along, then we need to upload this image here it says about us image and we're gonna click on insert file url. something that is really cool is if you copy this, copy that link
and then if you actually put it into here, and then you open link in a light box, what happens is when people click on that image then a light box will actually appear so let's just close that and people click on that and that should be cool okay, so you can also link back to another page for example, in displaying the watch here, you can actually link it to to your shop page, directly to the watch just by just by putting the url into here okay, so that's really easy. and you can also add this so it shows a zoom icon okay, so what we're gonna do now is edit the 2nd column
and we're gonna do that by first dropping in a text module. so drop a text module into here and type in about us. -oops- okay and we're gonna set in i think it was the h3 tag so as you can see, it's really easy if you put in the h3 tag settings beforehand so you don't have to edit it everytime here so it keeps everything coherent and then very professional. so we save that and then your text appears here. okay, now the next thing that we need to do is drag in a text module and then we're gonna paste in lorem ipsum text just to show you an example so just copy that and obviously you can write your own about
click on paste as plain text, your own about page. so i'm just showing you quickly how i arrange the layout so let's just click on save and you can keep it like this, you can add more text or whatever or you like and then you can use other modules and build your about page but i wanna show you how to do this one, okay so how would you do that? you would actually split the column for the text. so split it into like that and that means you can put another text module into here or you can drop in other widgets into here so if you want to add more text over there, then you just duplicate that
and then you can just move that over and then you can edit that text and, yeah, that's really easy okay, so that's really simple. it's a really simple about us page i think it's really beautiful, actually and close that and that looks pretty good okay, so now we'd be moving on to the faq page. so i'm gonna show you how to make it look like this and when someone clicks on this, it opens up like that okay, so that's really simple. we just turn on our builder and then add in a text module and we can just change the title to faq
and we would put in heading 3 click on save and, you know, if you want to center it then you can center it too. click on save and now what we weant to do is drag in an accordion module. so this one here and just paste it below that okay so for the module title, we want to keep that empty. and for the accordion layout, i wanna select this one here or you can select this one, you know.that's up to you and for this one, expand and collapse, i wanna select the accordion one.this is if, for example, if we click on this one then it closes up automatically so that option is this one here but if you choose this one, then when you
open this one, you have to click this one again to close it. so that's totally up to you and for the accordion type color, you can change any color that you want but i want to keep it transparent as it just looks nice and professional so you can edit the apperances here but let's just leave that empty for now and let's just type this title in so "the item i want is out of stock. what now?" you'll just enter into the accordion title so just type it in: "the item i want is not..." what was it again? ".......is out of stock" "..what now?". okay
and then you just paste in your answer here so i'm just gonna grab some text and paste in some dummy text so paste that in there and another really cool thing that you can do is add in media so you can add in images to explain your point to make it clear for your visitors so you can use images to do that and another thing is you can actually add in a video as well. so for example, just copy this video and you can actually just paste it in like that. okay and that video will show up. so if you want to add in the next row, all you need to do is click on add new row so let's just do another one so you get used to it
for example, i wanna add in "do you have a size guide?". okay and the reason why i put this + sign is it gives the impression that this thing is clickable wehen you click on it, it sorts of gives the impression that it opens up or something like that so just type that in "do you..." -oops- okay, now let's just paste in the text and paste that in and for e xample, if you wanna link some keyword up to another website, then you can just click on this button here so insert or edit link. click on that
and you just paste in the url there and if you want to open that up in a new tab, then you just select that. okay and you can also click on this button here so you can link it directly to one of your current pages really easily without grabbing their url. okay so for example, i might just do an example, let's type in returns maybe. so you want to link that keyword to the returns page just add that link and then, that's about it. so i'm gonna save that save that like that
save it like that and then close it okay, so if we open that up, you'll see that video is nice so you can use the video to explain your solution and then click on that, that closes up and when people hover over that, they can actually click on that and it'll open up directing to the returns page so that's really cool and i'm gonna show you how to change the color and then you can add yours in and then i'll add the rest of them in by myself so just double click on that and i wanna change the color of the text that's really easy. click on styling
and for the font color, i want to change it to that dark gray again. like that and then you can also change that link color right here as well. click on save and click on save here you go and that's about it. i'm gonna add the rest of it by myself so right now, we're going to do the contact page i'm gonna show you how to make it like this and i'm also gonna show you how a different layout of it so that's really cool so what you need to do is click on the contact page down here. so click on that okay, and let's just turn on the builder
the first thing that we need to do is separate it into two different columns separate that. like that and then, what we need to do is get the text into there and click on contact okay, and change that to heading 3 so again, that's so useful and before we can paste in the contact form, i want to show you something so what you can do is to go to your dashboard and right-click that and open in a new tab that's really useful
so scroll down and you should see contact here. click on that and you should see contact form #1. so we can actually just paste in the shortcode and it will show up but i want to show you something first. so click on edit and then click on mail. make sure your mail is set to the email that you want for example, when someone sends you a message, that message will be delivered to this email address here so make sure to change that whatever email that you want there are also a lot of things that you can actuallydo with this but i'm not gonna go through that in the tutorial. you can browse in the documentation and it can show you how to add a drop-down menu and things like that. so what we need to do now is basicallly copy this shortcode here
just copy that and then we can drop in a text module and i'm gonna paste the shortcode in plain text and select that and then just paste that in like that and that's done. the button looks really nice because we've actually set the font styling before when we're editing the footer and the newsletter theme so that's really cool and now we're gonna drop in a map module so drop in your map like that and what you can do is you can type your exact address or whatever you want so so i'm just going to......
...type in a random address and then click on preview so you can see what that looks like you can actually zoom in closer so i might zoom it in to 10 like that and preview that and if you're happy with that, then we can click on save.there are also a bunch of settings here but i don't think that's really necessary that is pretty good to me. click on save and then we're going to drop in a text module below that type in location and you can change that to your opening hours, location, anything that you want, really. i just want to show you how to do it
so change that to heading 3. click on save okay, so as you can see, it's a bit close to the map so we want to add a little bit of padding on top of that so click on styling and then we can add maybe just 3% and see how that looks. okay, 3% looks pretty good and what you can do, you know, you don't have to drop in a different module all the time you can add the text down below as well. so you can copy that and you can add that below here and paste that in. but make sure that's not set to the header 3 tag. otherwise, it's gonna be really big. so what you can do is just click on save and there you go and that look's pretty good. our contact form is really good
and there's just one more thing i want to show you so let's just click on save first and let's say for example you want to move that map and it's really easy to do. for example, what i'd like to do is zoom out of the page. just zoom out a tad like that so you can see the other modules, the other rows on the site so you can easily drag it wherever you want so for example, i want to drag that thing down here. all right so to have the map down there and i wanna zoom out just a tad. like that and i wanna move the map all the way up there. so it's really easy to use if you actually zoom out and then i can zoom back in.click on save so that looks pretty good. and another thing that is really cool is let's say
you don't want to move that. you want to redo and undo everything you just did then you can probably click on this button here, undo click on that. as you can see, it brings it down here. that was the last action and then you can try that again and there you go. so that's really, really awesome and, yeah. i just can't believe how good this theme is yeah, make sure to recommend to your friends 'cause it's really easy to use so, yeah. so click on save and close that and we're pretty much done now we're going to be going to our shop page and then i'm going to show you how to change the layout to look like this
okay, so now we're on our shop page and the first thing that we want to change is we need to move this sidebar area to the lefthand side. and also if we click on the products, we want to remove the sidebar from the products page so let's go back and what we need to do is goto the back end. so go to your dashboard hover over themify ultra, click on themify settings click on default layouts and what we can do now for the archive sidebar option, this side actually the second options so the sidebar on the left and then let's just open up our website for a second to show you what that looks like
okay, click on the shop page and if we click on save and then if we refresh this page then you'll see that the sidebar has moved to the left and that's what we want now we want to remove the sidebar from our products page so scroll down here and go to default single post layout and select the fullscreen option with no sidebar and then click on save and then if we click on that product, then it should be gone so that's pretty cool. now since we're on this page as you can see on my
demo website here, you've got some slight styling and the prices moved down just a little bit as well as the text spacing here it's a little bit closer now. if you want to change then you can follow this part but if you don't if you think that is fine then you can leave it as is so what we need to do is we need to go back to our website and visit our site, let's just close this for now go to the shop page and click on that and then go to customize and we go to my website again. go to the same blog post and what we need to do
is click on individual product page layout and styling edit. click on that and let's just copy that so copy that and what we want to do is click on custom css so hit enter once. you can paste this on top if you want to or below that but i'm gonna paste it on top so ctrl+v or command+v and then if we save and publish, and we close that and then if we refresh the page, then it should edit everything like that. so it's really cool. now, let's say you want to change that heading here. we can find out what type of tag that is and right-click that
and click on inspect as you can see, that's a h1 heading. okay, so we want to change it to look like that now that's really easy. all you need to do is click back here and then click on customize and then you can click back here and click on typography. default typography and then heading 1, that's the heading 1 okay, so you can change the font family. so just hit that and then type in avril and click on avril fatface and then that should be good. after you've done that, then we can just click on save and publish and then we can close it like that
close that and then i think that is done.if you want to change the links here, you can change it by going to themify options for body scroll down to body link and you can change the color here to gray or whatever you want. like that and then click on save and publish and close that and ther you go. so that is done and now let's head back to our shop page
now we want to edit the contents of the sidebar to something that you see here so what you need to do is we need to go to the dashboard so the back end and then hover over appearance and then click on widgets okay, so that section here, this is the sidebar widget. so we need to remove all the current ones 'cause we don't need them. so let's just delete them quickly delete that delete that like that so the first thing that we need to do is add in a title and then the filter and the categories
scroll down to the text and drag that up and paste that into here. so let's type in the title so "refine by" and with that arrow okay, leave this part empty, click on save so you can close that for now. we need to scroll down a little bit and you've got a lot of woocommerce widgets that you can add in but i think that's not really necessary we want to add the most important ones. so the price filter is really important so we're gonna drag that woocommerce price filter. and let's just drag that up. okay and put it under there okay, it will show you filter by price and you can change the title but i think that's fine. click on save and that's it
scroll down and the next thing you want to show is the woocommerce product categories we don't want to drag in this one 'cause this is different. so this pulls in the blog post categories the one that you need is the woocommerce product categories. so drag that up and then just put that under there. you can change the title and if you want to show the product counts which is that little number beside there, then you can select that and if you want to show it as a drop-down, then you can select that but i think it's pretty good like that. so we're going to save it. now, let's head to our shop page, visit site and click on the shop page and that should be good.so that is pretty good. now what we need to do is i want to make things perfect
so i want to move this down a little bit as well as i find that there's a bit too much spacing here so i want to move this closer. so to do that, it's really easy now what you need to do is just go to customize. let's go to our website here and then what we need is the sidebar top padding just copy that like that. and then go to custom css and what i want to do is click on that. hit enter once move the arrow up there and paste that in okay, once you've pasted that in it should actually move down
um, it should automatically move down but for some reason, it didn't do it so let's just paste in the other one first as well so copy this in here let's just copy that so that moves the content part. it makes it a little bit bigger so the spacing is not as much there okay, so just paste that in. like that okay, so let's just click on save and close that and refresh that okay, so that automatically refreshed just then and i think that looks pretty good. okay, so if you want to make this area just a bit bigger because you think this price them doesn't fit properly, then
i can show you how to do that and it's really simple as well. so go back to the customize and click on themify options. okay. custom css and you'll see that the content thing here is 80% the sidebar is set to 17.5% and then that spacing there is 2.5% okay, so let's just say we increase that to maybe 18%. let's just try 18.5% and let's just make this area 79% so that would shrink this area and that would increase the area here and if you want to change the padding for the sidebar, then you can change the numbers here
so 10% moves it down this much. so if you want to move down a bit further, then you can try 20% so let's just save and publish. and close that okay, so that looks pretty good. now, i also want to show you how you can actually edit the sidebar the sidebar fonts and colors and things like that because you may want to do that even though it looks kinda good right now so let's click on customize and i'll show you where you can edit those things so themify options should pop up. and now 'cause this is the sidebar, then you need to click on sidebar here and you can set the sidebar font color here. for example, you're gonna change that like that that's up to you but i want to keep that as default. and this is the sidebar links
so you can change those links specifically to red , for example and you can also change the fonts here if you want to so there are a lot of things that you can do.this is the widget container so like that and scroll down and you can change the widget title as well, the color, as well as the font down here and the sizing, you can change it here gonna leave those as default. okay so let's click on save. close that okay, so i think everything is pretty good right now
so what we can do is we can try this out. filter and that seems pretty good to me okay, so congratulations. we've just finished styling the shop page as well as the individual product pages which look s really cool. and now, i'm gonna walk you through the woocommerce settings such as the tax settings, the sipping settings, the coupons and some other stuff okay, to set up woocommerce, what we need to do is go back to our dashboard and hover over woocommerce and click on settings okay, so before i get to setting everything up, you guys can also go to google and search up woocommerce documentation and then click on the first result getting started, here
and they also have a lot of documetnation as well as video tutorials on how to set things up. for example from installation to your selling products and managing orders read up on that if you want to as you might find that helpful so let's go back to our dashboard here so you can also hover over this thing here and it will explain what each thing does so this is very self-explanatory which is your base location. you just set that in, that's really simple and then you can set your selling locations. you can sell to specific countries and you can set those in you can change your currency here and then after that, you can click on save click on products
now this is where we can change the weight unit so all the default weight units that you see on the products page we can cahnge that. so for example, i might change that to kilos and centimeters and scroll down here. you can also enable this one: only allow reviews from verified owners so i might tick that and then click on save now, i'm gonna click on display so the only thing that i might change is the default product sorting so what this does is it basically it sorts your shop page with the products by price so it might be the most expensive item first if you choose this one
and then the last item will be the cheapest one. so you can change it to whatever you like i might change it to that one. click on save afterwards, click on inventory and then if you enabled stock management, then you can actually send a notification to your email if your stock is actually low and you can set the threshold thing here like 2 and then you calso hide the out of stock items from teh catalogue which i'm gonna do. so save changes now click on tax okay, so enable your tax and tax calculations
i generally keep is as "i will enter prices exclusive of tax" and the reason why i do that is because not eeevryone will have to pay sales tax so from my understanding in the usa, you only have to pay your sales tax you have a presence in that state and that person who bought your product is in the same state so for example, if you shop was located in california and your customer is also from california then the sales tax like 7.5% will be added on to the original price but if that person buying the product is in new york or something, then they don't have to pay any sales tax. so that's why it's a good idea to keep this exclusive of tax so we're gonna keep all the other ones as default. so just save it
and then we're gonna click on standard rates here and this is where we set our tax rates so if you have been lowing along, then earlier we actually set in the default rate for california that's when we installed the woocommerce plug-in at the very start of the tutorial. okay, so... to basically insert a row. actually, before i teach you that, okay so this is a good website that i found if you live in the united states: www.taxjar.com/dates and you can click on the actual state and it will tell you all the information that you need to know and which customers you should collect the sales tax from okay, so again from my understanding, i'm not an accountant or anything like that but from what i've read, you only have to collect sales tax if you have a sales nexus in california. so
a sales nexus means that you have a presence in the state and what it means is you have a physical location on that state. for example, you have a warehouse or an office or something like that you have someone else working for you, you have an affiliates or affiliates making over $10,000.00 or you have a presence at a tradeshow. make sure you just read up thoroughly on this type of information or ask your accountant. okay so so for example our shop is in california. that means i would set up a tax rate for california because the people in california would have to pay 7.5% because you, as the seller, would have to pay that to the state government, i think. okay so for example if you have a presence in new york as well, then this is how you set it up. so you insert a row
and you need to put in your country code. to get that, click on this thing and then you have a list of all those 2-digit codes and then you can just add that in for example, i might type in us and for the state code, then i might type in ny. okay and if you don't put in a zip code or post code in here, that means it applies fopr the whole entire state same for this. if you don't input a city it includes the whole entire state so i'm not quite sure about the tax rate so you can go to a site taxjar and for example, you would find new york and you would just click on that: ny and then you'll see a sales tax of 4%. okay, so let's just put that in. so 4.0%
and then you just type in state tax or something like that and you can actually see if that is a taxable thing or not on this site here, i think. so let's just quickly look for that. i might actually just type in shipping and then it says "should you collect sales tax on shipping charges?" if you're selling taxable goods and charge for shipping as part of an order, then it's taxable okay, so if you actually charge for shipping, in your settings here, you charge that to the customer then you'kll have to pay sales tax to the state so if you don't select it, then you don't have to pay, i think
so make sure to read that information carefully after you've done that, then all you need to do is click on save changes and if you want to remove that, then you can just select that and then remove selected row. i'm not gonna do that okay, now i'm actually gonna go to the shop and show you. okay so lewt's go to our shop. click on your shop and let's add an item to the cart. let's add this watch to the cart and for example, let's calculate the shipping and if we select california, we update the title and you'll see that a sales tax was added
if for example you... if the customer lives in alaska, you update the titles then you'll find that there is no sales tax added because you haven't set it back here and let's try one more thing. so if you go scroll down to... new york and then update titles then you'll see that a sales tax has been added for 4% and then i'll just proceed to check out. okay after you've done that, then we can go to check out
and this is where we actually set in our payment processing stuff this is important. so what i'm gonna teach you is how to set up your paypal so just click on paypal and then make sure your email address is in here. your business paypal address is placed in this field here and if you don't have a business acount, then you must go to paypal and sign up and then you can click on open a business account only with the business account and the premium account you can accept payments online but personally i have the business account and if you're wondering, you can have a personal one for your personal use
and then you can have a separate one for your business. i think you just have to connect it to a different bank account afterwards when you've done that, scroll down and if you want to do a test payment, then you have to enable this the enable paypal sandbox and then you actually need to sign up for a develop account for free here and you can test a payment and then test an order or whatever so i might do a tutorial on this so make sure you subscribe to my channel as i'll probably be uploading a video for that
now just leave those as default and we're gonna click on save you can also have multiple payment options as well. so you can just click on one of those and enable those payment options. and if you click on check out options now by default, these should enable the use of coupons and okay, so that's it for this one. so save changes and then go to shipping and this is where w set up our shipping so we're gonna enable shipping and what we're gonna do is click on flat rate. the name doesn't have to be flat rate. it could be standard rate or something like that and then you could just add in a shipping cost. so maybe $10.00
maybe i'll just call this standard rate click on enable this shipping method and save changes and then after when you've done that, click on free shipping i'm gonna enable free shipping because most ecommerce sites do that and i think it's a really great way to increase your conversions. so click on that and the minimum order amount, i might set that to $50.00 but you gotta have to ensure that this is ticked here, free shipping requires a valid shipping coupon or it could be both a minimum order of $50.00 and a coupon or it could be a minimum amount or a coupon so it could be either. actually, i might set it to this one here
now, we want to click on international flat rate.so you might not ship internationally so you could enable this and change the names to express shipping and then you could select the available countries and whatever you want so i might change the price of this to $20.00. click on save and you can also select local delivery as well as local pick up as well. you just have to enable it and then make sure you save it okay, so afterwards when you've done that, let's go to our shop page again and let's actually refresh that page. continue okay, so you'll see that these things popped up. so standard rate, free shipping and express shipping
those are the settings that we've set before but as you can see, you probably want free shipping to be up here, right? all you need to do is you need to go to shipping options and then you just need to drag and drop it so drag it and drop it above the standard rate. click on save and then refresh that and free shipping appears up there. okay and if we delete this item here, and let's say we go to our shop and we add in this product here which is $29.00. select optioons
and then we just add that to cart review cart okay, so you'll see that the free shipping option disappears this is because we set the minimum order to $50.00 and that way, the customer only has two options: the standard rate and express shipping and the sales tax because we're shipping to new york so afterwards when you've done that, you can click on save changes and click on accounts the only thing i want to change here is to enable registration on my account page
and what that does is when people click on my account, they can actually register an account so they can fill in the details and then that way when they're buying something, they don't have to always fill in the details so it saves them time and it's just more convenient for everyone. okay so we're gonna tick that and save changes um, we're gonna click on emails so this part is the email notifications. okay so when a customer places an order, they will get a email. something like "thank you for your order" and they'll have the details what this section does is you can actually set the color and styling of it. for example, the base color
the background color of everything. and you can also add in a logo so if you want to add in a logo for this header image, then you just paste in the url of your logo. so for example if we right-click and open link in a new tab for the media library we got this logo here. it's a bit big . you can actually change the size of it by editing that image and then you can actually re-size the thing here. for example, you want to make it maybe half the size so 320 like that. then you can scale it and then save it. but i don't think you should do that. i think you should upload another logo and the reason is because if you do that, it might affect the other logos on your website maybe just upload another logo like this one and then you can edit the sizing
because if you don't edit the sizing, let's say we get that url and we copy and we paste it into here. oops paste it into there and let's just save that scroll down and view that template. you'll see that the logo is pretty big we might want to make that just a tad smaller so you can edit the footer text which is which is this section here, you might want to edit that and whatever you want. so after you've done that, you can do that for all these things and then you just save the changes
and then for the api, just leave that. and finally, i'm gonna show you how to set up your coupons so click on coupons. okay, so click on add coupon and for example, you want to set in a black friday sale so you would just type in maybe "black friday" and then scroll down here. you can either choose a cart discount or a cart percentage discount so a cart discount may be a $50.00 discount a percentage discout might be 50% off of the entire cart or you could select it for individual products only. so i might choose cart discount and the coupon amount might be $50.00. you don't, have to put in minus or anything like that
and if you tick this box, then it allows for free shipping the coupon would enable the free shipping and you're gonna make sure that the free shipping method is enabled. so i'm gonna tick that and the coupon expiry date, then you just set in the date then the usage restriction, so you can set in a minimum spend so for example, my watch is $450.00 so i might set a minimum of $450.00 and then you can set in a maximum. you can also exclude particulars items or include them that's totally up to you but i'm gonna leave it like this and i might exclude these sale items because they're on sale already and you don't want to give them another coupon on top of that
so we're gonna click on the usage limits and you can set your usage limit per coupon so i might set it to 100 and limit it to 3 uses per person afterwards when you've done that, you just click on publish so let's go back to our shop page and i'll show you how that coupon works it's really simple. so go to my account and just click on the cart here so if you're gonna apply a coupon now, it's only $29.00 and we set the minimum to $450.00 so i don't think it will work. so apply coupon and it 'll say that the minimum is $450.00 so you're gonna add another item so let's add that watch in and view that cart
let's type in that coupon again apply coupon and then you'll see that $50.00 is discounted from the total price and then sales tax will be added and that's the total price okay, and the customer will proceed to check out fill in the details here and they can pay via paypal and if they don't have paypal, they can pay by credit card via their paypal accounts. so i've shown you a test transaction at the beginning of the video when i was doing the website tour. so you can skip back and watch that section if you need to um, yeah. so congratulations. we'e finished setting up our woocommerce settings
and basically we've finished the tutorial so i want to congratulate everyone who reached the end there's one last thing i want to show you before i sign out. click on the dashboard here and go to themify ultra.themify settings and then for the favicon section, click on upload and then go select the online store tutorial images that you downloaded and then click on this one, logo.png and then click on open and if you want to upload your own logo, make sure to save it as a png file and the size of the file is 32x32. so 32 width times 32 height. after when you've done that, click on save
and then we can click on visit website and then you should see your favicon logo up here so guys, there's just one more thing and the tutorial wouldn't be complete without it so for example, when you minimze the screen or when you view the screen on a ipad or a mobile device you'll see that the menu icon here that you click is black. so you probably want to change that color and to do that, you need to go to my website and scroll down here and look for edit mobile menu icon color and copy this code into your clipboard and go back to your website and click on customize and then just wait for that to load
okay. and then click on custom css and then what we need to do is let's just scroll back up here hit enter once and then move your thing up there like that and then ctrl+v or command+v. paste that in and once that is done, i want to hit enter again and i also want you to go back here and click on the edit mobile menu panel color and copy this in. so this basically edits the mobile menu panel so what i mean by that is when you click that, it edits this part here so let's click on enter one time and let's paste that in
so after you've pasted that in, you'll see that it's updated. so the menu color has turned white and if you wanna change the color, then you can find the color code on www.colorpicker.com and enter in your code there. and the same with the mobile menu panel thing, we're gonna click on that if you want to edit the colors, you can change the colors here the background color, this is the background color of this are here. and then the hover color when you hover over these items and yeah. let's just save and publish and let's just see how that looks let's just close this for now click on that and you'll see when you hover over those items, it turned into that sort of lighter gray and it looks really nice
and you mobile menu icon is looking good. so congratulations. thank you guys for watching make sure to subscribe to my channel. i'll also be showing you how to make a blog page make it look like this. i'm also gonna show you how to add your blog post in as well as how to style and edit everything as well as adding in your sidebar and yeah. and i'll also be uploading a test payment transaction to show you guys how to do that using the paypal sandbox feature and if you have any questions,. leave that down below if you have any requests, leave that down below as well. make sure to give the video a like and share it with your friends. and thank you guys. see you on the next tutorial