CREATE SHOPIFY WEBSITE, CREATE LOGO USING CANVA, HOW TO CREATE SHOPIFY WEBSITE STEP BY STEP

what's up lovelies in today's video i am back with part two to how to create and design your own shopify store if you haven't seen our video on how to brand your business how to add shopify apps to your website make sure you go ahead and click these two videos right now watch these two videos first moth more in-depth video but we're going to go ahead and create a totally new custom store today together so the first thing you're going to do when you get into your shopify dashboard is you're going to go over to the left hand side and you're going to click online store and then themes once you click themes we want to go ahead and try to find a good theme for our website so let's go ahead and click explore free themes once you click explore free themes shopify has several paid themes that are much more professional looking and they have much more options for customization however for example purposes today i'm going to be showing you guys how you can create your own custom branded store using one of shopify's free themes so they have this theme called simple right here which looks like it's ideal if you're selling like clothes or something they have this boundless theme that i really like that has a big feature of the product at the front and then they have the store underneath of it we have venture debut supply narrative express minimal brooklyn okay so that is 369 different free themes that you can choose from all of which are great themes and they all have different purposes and different things that you can use them for but for today's example i think that i'm going to go with i'm probably going to use the debut theme okay so i'll show you guys what this theme looks like i'll give you a preview of it and everything but this is the thing that we're going to be using in today's example it is debut is our signature theme designed to beautifully showcase your brand and products it gives you the features that this specific themes has which is pick up availability you have the ability to use a slideshow predictive searching which i like that customer testimonials and then they also have two different styles they have a default theme and a light theme so you can see that this is the same style theme with the same features there are just two different styles and you can choose which style you'd like i'm going to go ahead and stick with the default style for right now okay so first thing i'm going to do is click add to theme library once i click add to theme library it will appear over here in my theme library and give me the option to customize it whenever it's finished loading okay well i already have the debut theme installed right here so what we're going to do is we're going to go to preview so you guys can see exactly what this theme has to offer and what it looks like okay so before we get started with actually designing our website as you guys can see i am currently previewing the debut theme with shopify free themes that they have on their website i actually really like this theme as you can see it starts with just your menu at the top you also have the option to put your logo or your business name over here on the left hand corner your shopping bag is over here on the right and then the thing that i love most about this theme is the fact that you have a huge header with an image and you can also put text over top of that image this way you can give your customer some sort of insight to your brand and you can use image that directly relates to your brand so this is a great place to put promotional graphics graphics that show off your favorite products or maybe even a customer review or something important that you feel like was going to grab your customers ascension right here at the top of your website as you scroll down this is basic there is an image with text right here that you can put if you have different images that are not available like on your instagram or you have stock photography or even a customer review or something like that you want to showcase right here would be a good spot for that as you scroll down a little bit more there's no there's another option to put blog posts or products right here so i really like that you get the option to see a huge image another smaller image with some more text and details maybe a description or a product review right here and then you scroll down you get right into the products your top products as you keep scrolling there's a feature collection which is basically going to be whatever your collection is that you are selling so for example if this is my store i would probably have the feature collection section i would have it say skincare products and i will be featuring all of the different skincare products that i have as you can see you click over to the picture there's your product's name and the pricing of the product directly underneath i believe they show eight different products on this page right here and then you continue to scroll and there's another reiteration for another image and text overlay these are really important because you want to make sure that your customer is seeing your best graphics your best branded designing elements things like that or something that's going to relay the information that you want your customer to see when they very first come onto the home page of your website i love this portion of the website you guys this theme already incorporates customer testimonials and reviews into the actual theme so right here you have the option to put three of your best reviews right here for your customer to see before they had to check out another option for more images images images images you guys like if you can just spread as many pictures as you can across your website so that your customer can see every different aspect of the product that you are trying to sell keep in mind this is an online store so your customers only going to see what you allow them to see it's not like they can actually touch the product in person or things like that so you want to show them everything you can show them all at once here we have this is an implementation of an app that i have installed on my storefront it's showing to you guys here because i'm logged into my shopify store right now but i have this app installed that is called an app that will upsell to you which basically every time you click a product it's going to recommend other products to you so for example if someone came up here and they clicked a body butter and added that to their cart they can scroll down and shopify over the app is actually going to recommend other products to them that is related to what they already had in their cart so i really love this app and then you have your footer at the bottom which all of this is customizable you guys i'm going to show you everything that you need to do to customize this theme and make it look popping for your brand but next thing i want to do is we're going to head over to canva and we're going to start to design a logo and some graphics to plug in on this website for this custom website that we're doing for example purposes we are heading over to canva as you guys know i use canva to design all the graphics and things like that for my website and i also use canva to create graphics for my instagram my facebook any type of promotional graphic or things that i'm doing for my business yeah i love canva it's a really easy tool to use to design graphics if you are not an expert in graphic design so what we're about to do right now is click over to logo we're going to design a sample logo for this website that we are designing today i'm going to walk you guys through exactly what to do okay so once you click logo it's going to open up some logo templates over on the left hand side which is really really helpful because some of us are not really graphic design savvy and that's okay can't forgot your back y'all all you have to do is go over onto the left hand side and you can actually scroll through all of these different logo templates that they have most of them are really really cute and all you have to do is change a couple of things so example purposes like i said i'm going to design a skincare brand logo and you guys are going to watch me do this so that we can go ahead and design our store i'm pretending as if i'm doing all of this from scratch that way it seems very helpful to you guys hopefully this tutorial is going to be helpful for you so i'm searching through i'm looking for a logo that speaks to me so i'm just scrolling through to show you guys some of the examples that they have first things first i'm going to go and change the background color i'm a very neutral palette person so i'm going to pick a neutral color um bear with me okay i like that i'm going to change this business name to new skin we're going to call it new skin body care we're going to call it new skin and we're going to put new in the center this is just an example you guys keep in mind okay so now i'm going to change the color of these boxes let's do a pink color okay maybe not that pink let's change it to a more i want to say like a muted pink i guess i don't know if that's the right word but okay let's do this pink all right if you don't like this logo i'm sorry y'all this is literally just going to be an example so i can show you how to create some different brand elements that are going to match all across the board for your website so i'm changing all of these different elements to the same pink and now i'm going to change the text to black so i'm changing all of the different text to black i love canva because it's super simple to use it's not anything complicated if you're not experienced in graphical design you do not need to be because they give you all these templates like i said that you can go in and just change a couple things for so here's our logo we just designed that in literally probably 30 seconds so next you guys have also asked how to download your logo on a transparent background in canva if you go to download there's this little box right here that says transparent background you're going to select that box which means the tan background will not be included it will just be this logo and inside so we're going to download that and i'm also going to download this logo with the background so that i have two different options to use okay so boom now we've got our logo next what i want to do is i want to create a new file and i want to make a presentation or a header that is going to go on to the top of the website that you guys saw earlier so i want to make something that's going to cover the entire header of the website and that is not a good size so let's go ahead and change the size to 2000 if i go over here to resize we can change this to 2000 by 2000 copy and resize okay all right so now here we are we're about to create a promotional graphic for our new skincare collection so i'm going to pretend as though i have a you know a body butter that i want to use on my website and what you can do is you can go to elements and i will just search body butter and in search and body butter there's going to be some different products that pop up so boom as you see we've got different stock photos that you can use these are all free now some of them you might not be able to use if you are not a canva pro member which is why i highly recommend you become a camera pro member it is only i believe like 13 a month i'm gonna pretend like this is the graphic okay and if you want to put this graphic all across the um canvas that you're using what you would do is drag it and it will pop into place for you like that now i'm heading to uploads i'm going to go to upload media and i'm going to try to find that logo that we just downloaded and i'm going to place that onto our graphical image right here okay so boom now we've got our logo and see it's on the transparent background so i can actually put this on this image and you will not see the tan background that we had placed on it originally let me go ahead and zoom in for y'all so you can see what i'm doing oh that's too far okay so i'm just cropping out some of the extra space and boom as simple as that here's my logo here's my new graphic that's going on the header of my website now i want to take it a step further and i want to put a i want to put a promotion say i'm having a 50 off sale and i want to showcase the fact that i'm having a 50 off sale so what i'm going to do is go to this line and shape section right here and i'm going to get a square i'm going to change the color of the square to the same color pink that we are using if you go down canva will give you this photo colors box that shows you all the different colors that are in the photo that you're using which i love this feature because i want the picture to be branded whatever i'm designing i want it to be branded all the way across so i want this to be pink i'm going to expand this a little bit and i'm going to shrink it because i don't want it to be that big that's really really big i'm going to put it at the top like so and then we're going to use that same font that is in our logo go over to text we're going to click add a heading and i'm just making this a little bit bigger i'm going to put buy one get one i'm sorry you know what let's change that let's put bogo bogo 50 okay well first let's change this text because i don't actually like this text let's use the text that was in the logo which should have been called okay now let me go back all right so something that's important to note when you are designing your graphics for your website is try to make sure that the fonts the colors the elements all those things are the same okay you want everything to look the same in your logo i mean you want everything to look the same on your website your social media because you want someone to be able to tell that this is your brand and not someone else's so we have buy one get one fifty percent off okay so then i'm just going to stretch that out a little bit and let's take it a step further guys let's make this look even cuter than that so now i'm going to type in glitter in the elements bar and all these different beautiful graphics are going to pop up like this i want to make this look more catchy okay right now it's kind of boring it's kind of blah we can actually change this we can actually change the text we can click on effects and change it to neon i often use this neon feature it's really really cute and i don't like the color of that so let's do like a darker pink or we can probably even use like off-white that's cute that's cute and you can change the intensity of it if you want it to be brighter with less shadow or you want more shadow i'm going to put the intensity on 100 and then i'm going to go and find some glitter yeah i want some glitter to be on this um promotional graphic this is going on a header now i'm trying not to spend too much time on this because this is actually supposed to be an example but once i started designing stuff like i actually get a little bit into it so bear with me all right let's just put let's go ahead and cut this in half a little bit and i'm going to put this glitter right under like that okay all right y'all this is so an example i just want you to keep in mind i'm just showing you some different things that you can do if you are playing around with your website so now let's go ahead and download this so that we can plug this into our website as well okay so now that we've gotten the first two graphics design let's go back to our website but once you open up your shopify theme we are using a debut theme once you open up that theme you're going to see on the left hand side your template and all of the different features and elements that you are able to play with and design okay so if you click on header when you go into header you can see that you have different settings for your local alignment we have left or centered this is what your logo will look like if it's centered and you just saw what it looks like when it's on the left so i'm going to click center just to show you what center looks like and we're going to select image and actually upload that logo that we had let's download it okay we have it i'm going to get the transparent file and let's see what it looks like once it pops into our website and here's what the logo looks like okay y'all just the logo that we just now designed y'all and there it is on the header of our website and it's on a transparent background so down here you can see it says custom logo with if you change this your logo will actually get bigger okay but your entire header is going to get bigger as well now something i want you to keep in mind when you are designing your website is this tool up here if you click this you can switch between desktop view and mobile view you want to make sure that you're going back and forth between mobile desktop and even full screen so that you can see what your logo and all the different images that you are putting on your website are going to look like on every different type of device okay so here's what the logo looks like on someone's phone which nine times out of ten people are going to be viewing this on their phone so make sure that you like the way that the mobile version looks as well all right let's go back to desktop i like this all the way at 250 so that my logo is nice and big new skin body care okay that's our business name now if we go down you see the option to show an announcement okay this is an announcement bar that's going to be displayed on your website if i click show announcement it says announce something here which we do want to announce something here because we have just launched and we want to show off the fact that we're having a sale so let's put launch day sale 50 off entire store okay there goes our announcement and then you also have the option to paste a link which will link them directly to a product so say for example we click products and i'm going to click a body butter of mine now once the customer clicks this announcement bar is going to actually take them directly to the bodybuilder that is on sale okay and you actually like that because that way your customer doesn't even have to scroll through your website they can just click that announcement bar and get you know directly to the sale that they're trying to use so now we want to make our announcement bar a nice color let's go back to canva and make sure that we're using the same hex codes okay like i said you want to be using the same exact colors on everything that you're doing for your website so that everything is branded across the board if i click the color and click this little add new color option it will give me the hex code i'm just going to copy and paste and i'm going right back to the website and i'm going to paste that okay now our announcement bar should appear as the color pink boom okay y'all like that that's cute let's change that text though let's change the text to black all right boom i love that like that okay so now we've already worked in our header you guys we just changed our announcement we just added a launch day sale and we added our logo all in a matter of five minutes that was super simple okay so we're moving on let's go down to image with text overlay this is going to be the spot on the website that i was showing you you can add an image with text that you want to share a promotional offer or share review or share any type of products that you are offering a sale on or just want to show something about your brand right here this is a statement piece right and we just designed that graphic in canva so we're going to go ahead and upload it so once you upload the graphic it will appear right here in that section that we just now used now the one thing that i will say is some of this might actually get cut off so did you see the top part of the graphic is actually cut off i don't necessarily like that so let me see if there is a way we can figure out what exact size we need to make that graphic so that it fits here perfectly let's see fixed width okay if i change it to fixed width it will make it a little bit easier so that you can see more of it but i still don't see the entire image and i don't like that so i'm going to have to play around with that and see what size do we need to actually make the graphics so that it fits here perfectly but for right now let's go ahead and keep moving because i want to just show you some more stuff that you can do right here with this graphic so you see right here where it says heading you want to use this space if you are not actually designing a graphic with the entire graphic or entire text or promotional offer already on the graphic you can use this right here and actually add the sale that you're trying to promote so i can actually put buy one get one fifty percent off right here just like that and then i can say launch day sale all body butters are 50 off today okay so that way you can actually put text over top of your image if you are not going to go to canva to actually design the text on the image which i highly recommend so that you can use the same fonts and same colors on everything okay now we're going to go to button label and we want to put a shop button you always want to have some sort of button that is going to take your customers directly to the product that they're looking for if you go to button link i can go to collections and i can just select body care okay that's going to take them to all of the body care products that i have on my website which obviously are going to be body butter so now i want to go out of here we just designed the first section of our website look at that looking cute already y'all all right we're moving now let's go down to image with text if you would like you can go back into canva and what i like to do instead of creating a whole new set of designs is i would just go to add page and i'm just going to continue to add more images in this one slide on camera that way whenever i'm going to edit my website i already have the graphical images with the text and the colors and everything in there already so let's look for more body butter images you guys we want to promote these body butters so let's look for another image that we can put i like oh just right off the back i love this one it shows the texture okay so now what i want to do is duplicate this logo go over to the right hand side and select the duplicate button and i want to drag that down to the center and make it a little bit bigger put it in the center and then let's actually change the transparency on this let's make it fifty percent okay so now we've got our logo in the center of a texture shot i'm going to go to download only download page 2 and we're going to put that and we're going to talk a little bit about the texture of our body butters on the right hand side of that space that we just now we're working with on our website i'm going to select select image again as usual all you're going to do is upload that image that we just downloaded from canva it should appear right here on the website so you can see what it would look like all right beautiful okay let's hit select all right so and you also have the option to select whether or not you want the image to be on the right or the left i actually like the image on the right probably because i'm right-handed but let's go ahead and leave it right there and you see there's a section that says image with text we want to change that heading to say show off your smooth skin with our amazing body butter or something like that show off your smooth skin okay so now in the text section of this part we're going to go ahead and put something we're going to put something catchy we want to talk about the texture we want to talk about how luxuriously whipped and handmade and handcrafted our new skin body care is okay our luxuriously handcrafted with love and intention to help your skin feel silky smooth and achieve the glow you desire okay i don't know i'm just saying anything but you want to have something that's going to be catchy you want to have something that's going to make your customer be like wow i do need that body butter i am trying to show off my smooth skin okay once again we want to put a shop now button on the button label that's going to appear and then i'm going to click again a product i want to show off some type of body butter that they're going to click directly to all right so we've got our shop now button and we've got our picture and so far so good you guys we are creating our new skin body care website really really easy okay hopefully this is helping you guys so far if there's anything that you feel like i should go over more in detail please don't hesitate to comment down below i will try to go back and do more updated videos for you guys and just give you guys more tips and ways that you can design your own storefront easily okay all right so next we're going to go down and do the text with columns okay i want to go back to canva because i'm trying to create as many branded graphics as i can for this website i want my entire website to be branded so that soon as you come to my website y'all just know y'all just know it's new skin body care oh i found another cute picture okay let's drag this pink graphic into the canvas i also want to put the logo you already know y'all should know the drill by now put your logo on everything new skin body care okay and i'm going to add another image let's look for more body butters one thing i do want to say for this section of the website it would probably be really helpful if you had a lifestyle photo so as you can see here i have a stock photo of just our plain body butter i also have a flat lay picture of another set up for body butters showing the ingredients that are in the body butter this shows that there's almonds and that there's oil that are incorporated into the body butter but now you guys you want to show someone actually either using the body butter or someone's skin or something like that so they can see you know lifestyle style photo as well so okay so this shows someone scooping the body butter out of a jar that's what i mean by when i say lifestyle photos and again i already know i'm going to add my logo down here on the bottom okay so now we're going to download these three we're downloading pages two through five all right so this is going to be the same process it's kind of self-explanatory at this point but what i'm doing here is i am uploading the images that we just now downloaded from canva onto our website so that way our customer can see them and we can do a little bit of talking about them underneath of the picture okay these are products that we're offering on our website but we want to give a little bit more detail about them and showcase them off on the home page so we've got one image right here i'm going to say hand whipped body butters try our hand whipped body butters for a soft and silky feel to your skin okay you can put whatever you want to put right here yeah this is all examples and again you want to make sure that you put a shop down button and link them directly to a specific product that you want them to shop for and do the same thing for all of these sections okay if you are into skincare like myself you want to give as much information about what your brand's identity is so if you are selling ingredients that are all natural you want to make sure you put emphasis that your ingredients are naturally sourced and they're not going to have any harsh chemicals in it so i'm going to say all of our ingredients are natural and come from trusted sources and come from the earth we use ingredients that will cater to the overall health and glow of your skin boom all right so now i'm going to also put a shop now button right here and again as you guessed it i'm going to link them to a product that's on my website okay and we're doing the last image right now all right so for this section of the website you guys i think it looks pretty good we have gone through the textbook columns and images and we have added a couple different images and text blurbs about all of the different photos that we have included i showed you guys where to find stock photos from on canva and how to add your transparent logo onto them so let's keep it going let's go ahead and scroll and see what we have next okay now we have our featured collection what you want to do in this section is you have already created a collection if you have not seen the videos that i've recorded previously on how to create collections how to add products how to price your products and things like that i'll go ahead and show a card up on the right hand corner i believe go ahead and check out that video right now in case you missed out on how to actually add collections to your website but for right now we're going to keep it going and i'm going to select the collection that i have i'm going to select body care okay once i select body care it gives me all the different products that are in my body care collection that i have on my store right now what i can also do is change the amount of products that are displayed per row so if i only want two products per row or three products and two rows i can do that but if i want five products in each row and only have two rows you can do that as well it depends on how cluttered or clean you want your feet your home page to look so i'm going to leave it at four products and two rows for now i like the way that that looks and then i can also add this thing at the bottom that says show a view all button you want to put the show view all button because someone may not know that you have more products on your website so i'm going to have that selected and then i'm going to go out let me go ahead and save this really quickly because i don't want this all to erase make sure that you're saving your website frequently while you're designing okay so we have just added feature because it has dots if you're using the mobile version so that they can easily swipe through and then more gallery images at the bottom okay so here's our website so far now we are not done you guys i'm going to go ahead and go down to theme settings and the first thing that you see right here is colors i also showed you how to do this in the first video how to design your website but i'm going to go ahead and do it briefly again i'm going to change headings and links all the way to black okay i want all the headings to be black the body text i would like for the body text to also be black the sale price i'm going to leave the sale price as that pink color that's our branded color okay so for example as you can see this cupcake bath bomb is on sale for 7.50 and the color of it is not going to be red it's going to be that pink primary buttons i want the buttons to be that pink color as well and for the background if i scroll down for if i scroll down to background and go back to our canva logo i want to make this background the same color tan that is on our logo so again i'm going to copy and paste the hex code go back to our website and paste that right here and then that tan color should appear on our background okay so here's what it looks like okay i'm feeling it i'm feeling it it's not that plain white anymore now we've got some more color to our website and here's now that we're done with colors we want to go to typography and you can change the way that your fonts look on your website so i'm going to try to find a font that is closest to the font that we use in our logo which this amiri font right here actually looks pretty close okay so i like that and then for the body text i'm going to find something that is also similar but you can play around with the fonts and things like that all day the main point that i'm trying to make sure is you know that you want everything to look cohesive across the board with your website okay so we just changed the font on our website and i like the way that that looks it's okay so now let's get out of here what we can also do is go to our checkout if you go up to the top and you click checkout page it will show you what the what your website is going to look like when your customer reaches the checkout page and there are some customization options that you can do here as well which i'm going to show you really quickly you have the option to change the background image you can also add your logo right here so let's go ahead and put our logo because we want our logo everywhere we took our time with this we designed it make sure your logo is as many places on your website as possible okay add our logo now let's go ahead and put we want to put a background color we're going to place that same color that we just now put on the entire homepage we're putting that same color on the checkout page so that it looks the same you can also change the typography here as well you can change the colors i'm changing the accent colors to pink again and the buttons let's change the buttons to black all right so we just now customized our checkout page as well that was super simple we didn't do a whole lot here but i just want to show you that you can change the way that your checkout page looks as well so now we're going out to our home page again and look at our website you guys look what we just did so far so good alright so just like we checked out our checkout page if you also click product pages it will show you what your product pages look like as well and i think there's a different a couple different things that you can do on your product page to change it all right so here's an example of what our product page is looking like it's showing our products and the description of our products and the pricing and i like that all of our branded colors are implemented here all right on the product page based on that app that i have it has option to show dynamic recommendations so i'm going to uncheck the dynamic recommendations to show you what it's going to look like if i don't have it be dynamic i don't like it when it's not dynamic so let's go ahead and do the dynamic recommendations as you can see it looks much better i really like the way that that looks it has the you may also like after your person has already got or your customer has already gotten to the point where they're about to check out which we want we want to recommend more products to our customers so that we can fill their cart up and get a larger sale okay let's back out of here because we just now wanted to let's go ahead and save and then let's see if we can preview okay so now that we just now customized everything let's go ahead and do a preview of our theme and see what it's looking like what your website is going to look like when your customer comes to that website all right here's our new skin new body care okay this is our website we just designed some graphics we changed the color we changed the font we changed the text i would like to show you guys how to customize your menu in a second but here's what it's looking like so far you guys nothing about this was any difficult i hope that this video is going to be a little bit helpful for you guys to show you ways that you can actually customize branded graphics to go onto your website okay we got our products right here and we've got okay but i'm gonna get 150 off we got our testimonials and then more products down here okay boom and that's what our website looks like you guys that's everything that we just now worked on you

Channel: SLAY THE RENEE’ WAY

Views: 8,764

Keywords:

Id: wJNORi2UhqQ

Length: 36min 23sec (2183 seconds)

Published: Fri Jun 25 2021