All right what’s up guys? This is Nishat Sharma in this article, I’m going to be showing you how you can go ahead and customize and build a store using the Dawn theme with Shopify. So Dawn is the new default theme (Buy Dawn with wholesale area)
Whenever you set up a Shopify store we’re going go ahead and take a look at how you can set it up to make your store look good so the first thing you need to do if you don’t already have a store, you can go ahead and click the first link in the description and you’ll be taking to this page right here and you can just enter your email address and go ahead and start your free trial and we can go ahead and get started studied up your store so once you’ve gone ahead and started your trial.
You’re going to be taken to the back end of the store right here and we can see that by default the current theme is going to be done. So what we’re going to go ahead and do first is take a look at the base template of this theme and then we’re going to start building it out. So I’m going to come over here to action and click on preview. And now we can go ahead and take a look at the base skeleton that dawn provides us. So we can see here that we have a little announcement bar up top. We have our logo, we have our menu and we have the cart and search icon. We have a nice header wallpaper right here along with what they call to action right here. We have another little call to action with some information right here. We have four featured products right here in this section.
Then we have a media collage that includes a video, a collection, and a product. And then we have a video section down here and then we have a multi-column section which includes three different text sections right here and then we have the footer. So this is how Dawn looks out of the box and we’re going to make a couple of small changes to it. But mostly we’re going to be Building out this store using the base skeleton of the theme to keep things as simple as possible. So with that said, we’re going to go ahead and come back over here, and quickly we’re going to take a look at the things you’re going to need to go ahead and build out your store using the steam.
So the first thing you’re going to need is a logo. If you don’t already have a logo for your business or your brand, you can make one over here at logomaker.com or you can come over here to fiver.com and search for a logo designer and get one made for relatively cheap. The next thing you’re gonna need is some wallpaper photos as we’ve seen, especially on the header. You’re going to need some photos to use for that, so these are going to be pictures that are related to your brand or your product.
And if you don’t have any of those yourself, you can go ahead over here to unsplash.com to look for free stock photos that are related to your product or niche. And then obviously we’re going to need product photos as well as product details. So this is something that I assumed you would already have. And then in this case we saw that there was a video section, so you can also optionally have a video of your product or maybe a testimonial or something that we can use to throw in there. So once you have these things ready, we’re going to go ahead and get started with the customization. So we’re going to go ahead and just click on, customize on the theme, and go ahead and get started. And we’re going ahead and starting from the top to the bottom.
So the first thing we’re going to do is edit the header so I’m gonna click on header right here and the first thing we’re going to do is we need to go ahead and put our logo in here, so I’m gonna go ahead and click the select image and I’m gonna go ahead and upload an image. So in this video, we’re going to just be making an example clothing store, so we’re going to go ahead and use this example logo here of ABC Coogan and we’re gon to go ahead and put that logo in right here and we can go ahead and select a custom logo width. So right now I think this looks a bit small, so I’m going to make it a bit bigger and if you thought that was too big then we could go ahead and shrink it down a bit more. So in this case I’m going to keep it at 200 and 10 and then we can change the logo position on large screens to be the middle left, The top left or the top center.
In this case, I’m going to go ahead and keep this as middle left and then right here we can see we have our main menu right here and we can go ahead and change which menu this is. Or if we click on this right here we can actually edit the menu links, but we’re not going to go ahead and do that right now, and then down here we can choose to enable a sticky header, so what this does is this means that the header will show up on the screen as customers scroll up so as we see if we scroll down, that hair goes away. But once we scroll up the head comes back and if we were to get rid of this and scroll down and then we scroll up, the header is not showing up. So in this case I’m going to go ahead and just keep the sticky header on, and now I’m going to go ahead and just click. Save and whatever you’re making edits inside of the theme editor you’re going to want to save pretty often just in case your internet cuts out or there’s something wrong with your computer, so that way don’t lose your chances. So the next thing we’re to do now is head over to the announcement bar. So this is going to be what’s up here.
We can go ahead and click on this right here to go ahead and edit it. And this is where you can go ahead and put in any text you want here. So if you’re having a sale, you can go ahead and say like 50 percent off the entire store with a coupon code or anything like that. In this case, I’ll just keep the text default as of right now just for the sake of this tutorial and then you can go ahead and link to a specific product or collection if you want as well. So if you want to go ahead and have people be able to click on this announcement bar this is where you put the link right here. So let’s say you wanted to link to a product you could go ahead and search for forgone right here and in this case, we can just make it link to all of our products and now you can see it has a click link and we could see type in something like browse.
Our products and then the color scheme right here we can see that we can. It’s by default set to background one and if we change the background two we can see that the color is changing. We have an accent.
And accent too. Now the thing is we are going to have to go in and edit these different backgrounds now to go ahead and make sure that all of our colors align with our branding right here. So I’m going to go ahead and click save. And now we’re going to go ahead and get into some of the theme settings. We can make sure our colors align with our Brandon, so I’m gonna come down here to theme settings and I’m gonna click on colors right here. And the first thing I am going to do is I’m going to make an Accent one, so this is going to be a lot of the backgrounds right here. We’re going to make Accent one this blue color from our logo right here. So what you want to do normally is you want all the colors in your store design to match up exactly with your branding. And normally your branding is going to be based on the logo.
So you want to make sure you get the hex codes from your actual colors right here. So if you don’t have Photoshop or any way of getting this, you can go over to image picker.com and upload your logo right here. Click on the color you want to use, and then you can grab the Xcode right here and we’ll be using this throughout the store design. So I’m going to go ahead and change one.
To that code, you can see that that changed our button color right here and I’m going to go ahead and make A to.
Black which is the second color in our logo. So depending on what colors your branding is using, that’s going to determine what you’re going to be using here with Acetas. And then we have backgrounds here by default we have the white background and we have the gray background. So in this particular case, I’m going to keep those backgrounds default, so I’m going to go ahead and click save on that and we’ve gone ahead and set up our colors, and in just a second, we’re going to go ahead and utilize our colors up here on the announcement bar. But first, we’re going to go down here to typography and this is where we can change the font throughout our store. So you can go ahead and pick a font that suits your Brandon. You can godhead click change and you can browse through a bunch of different fonts. Now one thing to keep in mind is the more different fonts that you use on your store.
These are slower than your store is going to load, so I would recommend sticking to one or two fonts. Max, I wouldn’t use like five or six different fonts plus that kind of messes with the branding. So if you want to keep it simple, you can just use one font and you can see we can edit our font for all of our headings right here. And then we can edit our font for our body text right here as well.
So in this particular case, I’m going to go ahead and keep the fonts default, but I would recommend just Godhead ahead and going through and looking at the different fonts and picking one that you think aligns with the branding that you’re trying to go for and choosing that.
The next thing we’re to go ahead and do with the theme settings here is open up social media and this is where you can go ahead and paste in your different social media links if you have social media for your business here so you can put in. Twitter, Facebook. Pinterest. Instagram. A bunch of different social media links right here and they will show up in your store if you choose to go ahead and show them. So in this case I’m not gonna put it in and the next thing we’re to look at on here is the favicon so I’m gonna go ahead and open this up and the favicon is the thing that shows up in the top left. It’s the very tiny logo that shows up next to your URL, so this is essentially going to be a very small version of your logo. So I’m going to go ahead and you can see it’s going to be scaled down to 32 by 32. So I’m going to go ahead and upload that right now.
And once we go ahead and do that, where is go ahead and select that? And I’m going to click save. So now that we’ve done that, that’s all we’re going to do within the theme settings, for now, we’re going to get back to actually customizing this entire home page, so we’re going to come back to the announcement bar quickly by clicking on this and I’m going to go ahead and change this color scheme here to accent one which we set up earlier, and we can see that now this announcement bar does match with the accent of our branding that we have set up here in the logo and on the buttons. So I think that looks a bit better, and now that we’ve done that, the header is pretty much all set up and we’re gonna go ahead and go down here. Start editing this first image banner right here. So the first thing we’re going Tonga go ahead and do is upload a background image. So I’m going to go ahead and do that right now.
By uploading a wallpaper image right here related to clothing and once this goes ahead and loads in I’m going to go ahead and just click select. Then you can change the banner height here. So if I were to make it small we can see it would shrink down. Or if I were to make it large we can see it would show up a lot bigger. So in this case I’m going to keep it as large and you can also make it adapt to the first image size. So in this case the full image would show the full image right here, but I’m gonna just keep it at large instead. And then we can go ahead and edit the desktop test text position here. So this is going to be this little text box right here, so we can make it top.
We can make it bottom or we can make it centered. In this case, I’m going to keep it centered right there and we can go ahead and choose to get rid of this text box if we don’t want it and we just want the text or we can go ahead and have the text box here and then we can also edit the image overlay opacity right here, which is going to essentially make the image a bit darker. If we drag this up so we can see this darkens the image a little bit which makes the text a bit more visible versus where it’s like this. It kind of blends in, but when it’s like this it makes a lot more visible so you can play around with this to see what looks the best for you. So now that we’ve set up these settings here, the next thing I’m going to do is click on the text to where we can start editing this, so all we have to do is click on this and then I’m going to go ahead and come up here and we can change the head in text right here so we could say.
Welcome to ABC closing and we can change the font size from medium to large. In this case, I’ll just go ahead and keep it at medium and then we can go ahead and click on buttons right here and then we can edit this button so we could change it from shop all in a shop now whatever text you want and then this button link right here is going to link us currently to all products. If we were to click on this we can link to a collection or anything like that, but in this case, we’ll keep it as all products. If we clicked on use outline it would change our button to this but instead, we’re going to keep it as the solid color, so I’m going, to go ahead and click save here and we’ve gone ahead and filled out the first section and we’re going go ahead and come down to the next one. We can see the next section here is going to be more of a text section so we have one heading again right here we can put it in a different heading quickly so we can put in something like that and then we can come down here to our text. Then this is where we can go ahead and put in different text.
This is where we could put in something about our store right here. So in this case I’m just going to put in some dummy text for now and then down here. We can go ahead and choose to go ahead and use this button if we want. So we can see the button is kind of showing up as graded out, and that’s because we haven’t put in a link. So if we already go ahead and just put in a link to all products quickly, we can see the button would actually show up and then this is how we can change the button. Text.
Just like we were editing the other button right here now. Since there’s already one button right here, I’m not going to have another one right here because it seems kind of redundant. So in this case we could go ahead and actually click on the button right here and then come down here to remove the block and we remove it and we can see just like that the button is gone, and if we wanted to add one block in, we can add the button right back in. But in this case, I’m going to keep the button removed all right. So now we’re at the featured collection, and at this point, this is where we have to start adding products and collections to our stores. That way they’ll show up here on the home page. So since we don’t have any products and collections, we’re going to go ahead and do that now. So we’re going to go ahead and save our progress right here.
And what I’m going to go ahead and do is I’m going to go ahead and exit, but I’m going to do it in a new tab just so we can keep this open and what we’re going to do now is come over here to products and we’re going to go ahead and add our first product. So in this case I’m just going to Add in a Dress shirt and so in here you can put in the description of the product. In this case, I’m just going to put in dummy text but this is where you want to go ahead and make sure you put in an actual product description right here we can change our product status to active and then right here. This is where we can upload our product media. So whether we have images or videos I’m gonna go ahead and click add files. So once we add in our product image right here, the next thing we can go ahead and do is edit some of this stuff under organization. So we can go ahead and select a vendor or type in the vendor. If the product does have a particular vendor or if it’s your product you can put in your brand here we can put in the product type here so in this case we can go ahead and see there are a lot of standard types. So we have apparel and accessories.
We have clothing and in this case, we have shirts so we went ahead and selected that and if we don’t want to use one of the pre-selected types we can go ahead and add a custom type if we want and then we can go ahead and add a product to a collection but in this case, we haven’t created our collection yet but we can go ahead and add it to this homepage collection which is already created for us which is what we’re going to want to do in this particular case and then we can add some tags to our product as well. So adding tags is going to help people to be able to search for specific products on your store. So when people use the search function up here the tags of the products are going to be able to help them find stuff. So you could just put in like dress shirt and anything else that’s relevant to your product. So then we can go ahead and set the price for the product. So I’m gonna go ahead and just put in a price right now and the compare at price is how you can create a sale. So if I were to put the comparison at a price higher than the regular price this would create a ten-dollar sale. But in this case, we’re just going to have them.
The same, so we’re not going to use the compare at price. The cost per item right here is something you don’t have to use. This is something that Shopify just allows you to go ahead and put in to help keep track of your profit margins. So if you know your costs per item, it can be beneficial to go ahead and put this in there and you can see right here. It shows your margin and your profit and then we have skuas right here. So if you want to have a barcode or an SKU associated with your product, you can go ahead and put that here and then we can choose whether or not we want to track quantity or continue selling once we’re out of stock. So in this case let’s say we have 100 in stock and we are keeping track of the quantity if this is a physical product, you will keep this checked right here. And then you put in the weight of the product and this is going to impact your shipping settings and shipping prices. And I’m not going to be covering that in this video because I’ve covered setting up shipping in another video. So if you’re curious about that. I can leave that in a link in the description and down here. We have product options here, so this is where we can choose different options for the product. So in this case we’ll go ahead and do option one is size and then we can put in option values. We could have small, medium, Large and Extra, and go ahead and click done now if we had other options, so let’s say we had colors we could go ahead and add in color.
We can do black, white, and navy and click done right there, and then right here we have variance, so we can change the price and the quantity that we have in stock for all of our different variants right here. So in this case we’ll just keep the price the same and I’ll just add stock to all of these quickly.
But this part is pretty self-explanatory and pretty easy to go ahead and set up, and you can also set up to compare that price with this as well. So we have our product set up now and the last thing you can do here is you can see your search engine listing preview this is where you can edit the website SEO which I’m not going to cover in this video because I’ve also made a standalone video for that which I’ll leave in the description. So I’m going to go ahead and click save. And now we’ve gone ahead and created the first product. So what I’m going to go ahead and do now is create two more products quickly and I’ll be right back all right. So I went ahead and created two more products right here. We can see watches and boots and what we’re going go ahead and do now is go ahead and create these collections. And once we’ve done that, we can go ahead and start adding this stuff to our home page and we can see what it looks like. So if we come over here to collections now, we can see by default we have this homepage collection. So if I open this up, we can see that the homepage collection does contain the three products that we have right here.
So that’s good. So this is what we’re going to use as our featured collection, but we’re gonna need three more collections as well to use in another section on our homepage, so I’m going to go ahead and create those now, so I’m going to go ahead and just click. Create Collection, So the first collection I’m going to create is going to be shirts. So we just need to add a collection image for this collection. So I’m going to go ahead and add this image right here and there are two ways we can go ahead and add product to the collection. So the first is manual, and the second is automated, so for this one, I’m going to go ahead and do it manually and for the next collection, I’ll show you how to do it automated so first off. If we select manual and just click, save here in a second, we’re going to be prompted to be able to go ahead and add products to this collection. So if we search our products right here, we can click browse. I’m going to go ahead and select the dress shirt and add it to the shirt collection. Now if you have like 100 products, then this might be a little bit harder and more annoying to do it manually. So that’s why we’re going to create the next one with the automated method. So I’m going to go ahead and go back and I’m gon to go ahead and create another collection here and this one is going to be watches. I’m going to go ahead and add an image.
For that right here and then we can go ahead and set this as automated. So what I’m going to do is I’m going to make the conditions down here so we can see we can make the product match all conditions or any condition. So in this case we’ll just make it all conditions and we’ll make it the product tag. So these are the tags that we set up earlier are equal to I’m going to go with the watch and if I go ahead and click save right here we can see that it went ahead and auto-populated this collection with the watch and that is because if we were to open up this products product page, we can see that I would have set the product tag to watch and you can add other conditions if you want based on product titles types, the price, the weight, there’s a bunch of different things. You can go ahead and choose to make your conditions, but the product tag is probably the most common when you’re going to use it. So now that we’ve created two collections, I’m going to go ahead and create one more and I’ll be right back. So I went ahead and created the last collection here for shoes and now we have all of the information that we need to go ahead and.
Finish designing our home page so we’re to go ahead and come back here to the Editor.
We can see here that the feature products went ahead and auto-populated because I put them in the home page collection right here. So we can see the feature collection right here. We can change the maximum amount of products to show, so in this case, the maximum number of products it shows is four, but we only have three products, so only three are showing up right now. Obviously in this case we can see that this image right here is a little bit too big.
So what you want to do is go ahead and use a smaller version of this image because we can see it’s kind of getting cut out. But for the sake of this example store, I’m not going to change that, but that is something you’d want to keep in mind that this image is too big and another thing that you could also take a look at here is you can see that this image and this image both have white backgrounds, but this one has a gray background, so to keep everything completely congruent, you would want to find that image of this product that has a white background as well and that’s actually why I used this photos. Otway. I could show you an example of what it looks like when all of your backgrounds don’t match. So you either want all your backgrounds to be white like these or all of them to be gray like this. So that way it looks congruent because if not you can see here that it looks a little bit off. So that is one tip for you right here and you can go ahead and change the heading of this feature collection as well to something like maybe our best sellers.
We can go ahead and change the actual product card right here so we can change it from square to adapt to the image. So now we can see adapting it to this image right here made this picture look better, but we can see that now it looks uneven because this picture is bigger than this one. So this is another tip for you guys. When you are getting all of your product photos, you want to make sure you keep all of the images the same size. So let’s say you make them all 1600 by 1600 pixels or something like that, for example, because it’s going to make the design process a lot easier if they’re all the same size with the same background. So that’s definitely a good tip for you and you can go ahead and change the portrait here and you can see that one looks even worse, so the best thing to do would be to use.
Product photos that all have the same size and then use Adapt image. But since this is an example, I’m going to keep it on square for now and then you can see right here that we could choose to show a second image on on hover if we wanted to. So if you had multiple product photos which we don’t in this case, they would show up when you hover over the product. So now what I’m going to go ahead and do is click save. And the next thing we’re going ahead and do is edit this actual collage down here. So I’m gonna go ahead and click on collage. So I’m going to go ahead and change the heading to shop my collection and this is where we’re going to showcase the three collections that we just made. So we can see right here that these are the three sections that are actually by default in this collage, so we have a video, a product, and a collection. However. I just want three collections, so I’m going to click on the video and I’m going remove that block. I’m going to click on the product and remove that block, and I’m going to go ahead and add a block in a collection. And I’m going to add another block for a collection. And now we can see we have three collections showing up right here, so what I’m going to go ahead and do is I’m going to go ahead and select the first collection here click select collection, and the first one’s going to be shirts. So I’m going to go ahead and put that in, and then I’m going to click on it.
Select and then I’m going to come down here to the second collection. I’m going to select a collection, and I’m going to click shoes. I’m going to click select, and then I’m going to do the same thing down here with the third one, and I’m going want to select watches and go ahead and add that in here, so we can see that just like that. We’ve now set up this section right here with three different collections, so if we were to click on any of these, it would take us to all of our shirts, all of our watches, or all of our shoes. So I’m going to go ahead and click save on that. So the next section here is.
A video so this is optional so you could go ahead and put in a video if you want. If you have a video of your product or your brand, you can go ahead and put in a YouTube URL right here. So in this case I’m going to just grab a video off of YouTube just to put it in here just to show you what it would go ahead and look like. So I’m going to go ahead and put a video in right now and then we could go ahead and select a cover image if we wanted to as well. So by default, if I go ahead and select an image, let’s say I just selected this image again. We can see that this will show up right here and then when someone clicks on the video the image, will actually show the video right here and then you can choose whether or not to make this section full width.
Not right there. So in this case the video section is optional. If you don’t have a video, you don’t have to use it. You can just come down here to remove the section and get rid of it. The last section we’re going to be finishing up with here is this last multi-column right here, so you can use this in a lot of different ways. This is going to be very fit for something like testimonials. You could have three different testimonials right here. In this case, I’m going to use it as a featured section. So let’s say that our brand has been featured in different magazines or something like that. So to make this like a featured section, all we need here is three different logos. So we’re not actually to need any text or anything so we can change the secondary background to none. Then we can come in here to column and I’m going just get rid of the text. I’m gonna go ahead and just select the Vanity Fair logo right here and then for the other two columns I’m going to just go ahead and do the same thing I’m going to go ahead and just use the same logo.
For the sake of time but obviously, you’d be using different logos here in a section like this, and then we can click, save and we could see that this section would be filled out. And then lastly the last thing we have to edit our home page here would be the footer.
So we can see right here. The footer has different blocks, so it has quick links and it has a heading so quick links right here. If we open this up, we can see that this is our footer menu, which right now just has search, but your footer men’s menu would normally have things in it such as terms of service, frequently asked questions, privacy policies, and stuff like that. I have a video about creating those pages which I’ll like in the description as well. So we can go ahead and so you go ahead and just fill out your footer menu right there. And then we have a heading section right here where we can go ahead and put whatever we want. You can go ahead and add another block if you want, so you can add a menu block, a text block, or an image block here. So if you want to do it instead just like put an image down here for some reason you could. But in this case, we’ll just remove that block and we’ll just keep this as default. In this case, it could be something like need help and then the text could be Email us.
