Lessons

Lesson Info

Build Your Shopify Store

it's time to build your Shopify store in this lesson, I'll show you how to implement the e commerce design principles and branding principles you learned in module one and two to build your Shopify store. Great. So as you can see in front of us, we have the default Shopify store. And this is a great starting point in this demo, I'm going to be installing a theme and customizing it to meet my brand needs. So first let's jump into the theme store, I'll click online store themes will automatically pop up and then at the bottom we'll see more themes. So here you can go into the Shopify theme store for me, I'm gonna go ahead and explore a free theme. Perfect. So once I've done that, I can see that there's a few options that are available right off the bat. I've done a little bit of digging prior to this and I really like the look and feel of Brooklyn. The main reason being for this theme is it complements imagery quite nicely. It allows me to put really effective headings and I really like ...

the cart slide out once you click at the cart. Yes, so now that's gone ahead and downloaded into my store, I'll click actions and then I want to publish it right off the bat. Rest assure already have coming soon in place, so I don't have to worry about any customers looking at my store while it's in production. Perfect. So if I were the preview this store once again. So as you can see in front of me, I have the Brooklyn theme installed and this is the very bare bone settings that it gives me. So let's start customizing it to customise this theme. I'm gonna go ahead and click customize what I'm doing is an opening Shopify customizer. The customizer is a really neat tool that Shopify gives you so you can customize your website without any coding knowledge needed for my customization. I'm gonna start from the top and make my way down, starting things off. When I look at my website, I can see design your store and that's because I haven't had my logo as of yet. Let's go ahead and update our logo to do so we click the header where we'll see customizable options that focus specifically just on the header, starting off with the logo. I have my logo already pre uploaded in this case I'm a little worried that it might be too small, so I'll increase the size of it and in the Brooklyn theme in particular it gives us an option for a secondary logo just for the homepage. Now, contrast is very important. So in this case I'll be uploading a dark overlay image. So I want a homepage logo that has white text and contrast it well. So I'll select my image. Yeah. Mhm. Yeah, and there you'll see. I have an identical logo just with white text. Mhm. Perfect. So far, I'm pretty happy with everything. I'm gonna go ahead and scroll down and see my announcement bar up here at the top. This is where we can go ahead and communicate crucial information. In this case, I'll say free shipping on all orders over $50. Sure. And I'll go ahead and customize it with the proper look and feel. So I'll go ahead and find my exact color scheme I need, which is perfect right here. But also keep in mind they will have to update the text just because of contrast reasons, it's a little bit hard to read. Great so far, so good. The header is looking pretty solid. Next is what we're gonna do is we're gonna make our way down and start updating this home homepage slide show to do. So we can see we have slideshow as an option. We'll go ahead and click in it. We have two of them available right here in the repeatable sections. So I'll scroll down and just remove it because I only want one slide from my slide show. I'll go ahead and click this slide, which is available. Select an image. Yeah, let it display just so I can get a visual representation of what they look like. Great. And then we're gonna go ahead and update the text. So here I'm going to say phone cases and below it in the main text, you're innocent. What I'll do in this case is play around with the typography just to make sure it's looking great. Yeah, perfect. And last but at least I can see this button is associated with my slide show. So I'm pretty happy with the way it's his shop now. Or in this case I'll link it to all of my products. Second creating collections. Yeah. Mhm. Great. Now we can see so far we're making great progress just on our homepage alone. No continuing our way down, we can see that we have so many available features that we can apply to our homepage. Now. For the sake of simplicity, I want to go ahead and remove some of these. So we have our rich text area that can be found here. We have our collection lists. And that'll be the first thing I'll be removing. So you can remove sections in many different ways. But my case, I'll just hide this for the time being perfect. Featured collections. I'm going to go ahead and create a collection right after this and I'll sign it to the feature collection and for the newsletter, I'm already quite happy with the way it looks, but I'll jump into it and update some of the text here. Subscribe to our newsletter is a great way to get started. I'll say join the community boho Yogis and right off the bat you can see it's already populated. Perfect. So before we jump out of the customizer, let's really take a look at our brand. Look and feel you can see that there's a couple things that kind of stand out that don't meet on brand, right off the bat. The way I've been going with my tone overall has been more or less consistent, but we can see things like the typography and some of the color arrangements is a little bit skewed so far. So what we'll do is we'll jump into theme settings right off the bat, you can see that the theme settings are almost complementary to this course so far, we have an option to customize the color, the typography, the cart page and the checkout and so much more from there. So now we're gonna go ahead and change the typography, which is the second option underneath colors. So I'm going to click into typography and remember my heading for this theme. We were using a font family called Railway and for the body font we were using Helvetica. So let's go ahead and change these first. As you can see, we have tons of options for fonts. I'm going to go to the search bar and just making a little bit easier for myself, we can see Railway is available, perfect. Railway is a little bit more adventurous, but it's very clean and straight to the point. Perfect. Now for my body text, I'm gonna go ahead and choose Helvetica awesome. And in this case we're only sticking with two fonts. So if your other options try to stick with the default body funds you originally using. Perfect. So we're gonna go ahead and take a look at colors and make sure our colors are on brand so far. When we click colors, we can see that our buttons are the correct colors. We want our body text originally as we planned out and everything is looking quite nice so far. The only thing I'm going to go ahead and change is just my accent color, which is a darker gray. Perfect. So I've changed my button colors but the slideshow button didn't seem to change. So you might just need to take an opportunity to kind of dig right into the theme options and see if this isn't updated here. Perhaps it could have been updated right on the slide show and in this case that is the case. So we can see our recent colors. I'll make sure to click the correct color palette and perfect. And as you can see we're now back on brand with all of our correct typography as well as colors. I'll go ahead and say this already. So now I'm gonna go ahead and create a collection for those who are familiar with collections. Collections are just the way that we can bundle products together in a certain category. So the creative collection, we click create collection. In this case I'm going to call these my best sellers. There's a couple options for collections whether you want to make it an automated collection to manually or sorry to automatically add products to your collection based off criteria. But in this case I'm going to make it a manual collection mm from there we're gonna add my top three best selling products. So they do. So we just click browse. Mhm. And we can go ahead and click on some of the products we want to go ahead and add. Perfect. So I have my top three best selling products now we're gonna go back into the theme and assign them. No. So just to remember back to online store theme and click customize. If we scroll down as I mentioned we have a little bit of verb. It's which I'll go ahead and attend to very soon. But I'm gonna gonna go ahead and add in my collection. So under future collection we can go ahead and update the heading which will be best selling products. Mhm assign my collection which is best sellers. And in this case what I'm gonna do is I like this collage format, but I'm a bigger fan of just keeping it simple with the grid. Perfect. So we have our homepage, we have our header almost good to go. We have our typography and our colours in a good spot. So now we're gonna talk a little bit about the content, the voice and tone of this homepage so far here we can see we just have some default content, but I'm gonna go ahead and populate it with some of the content I've prewritten, making sure that it fits the voice and tone that I've defined earlier. Starting off with the heading, the heading I've picked is handpicked organic materials. I want to give precise and clear information about the products I'm trying to sell to my customers now that their titles in a good spot. Let's go ahead and add in our additional Burbage here, we can say we hear the reinvent faux cases that are easily recyclable and reusable. That's exactly what I'm trying to portray. The headline was nice, too catchy. But the body copy is what's trying to really engage with the customer. So to reiterate, we have our slideshow header for the most part in a good spot. Our verb, it's our best selling products, our newsletter and our footer at the very end. So let me just add in one more feature and we'll be in a good spot for our homepage. So the very last section I'm gonna go ahead and add is an image with text section that's available to me in this theme. The order is a little weird because by default it's underneath the newsletter, but all we have to do is just drag and drop the position of it and that's the beauty of sections. First off, we're gonna start by assigning a great image to it. Now I don't really have an image right rightly available. So I'm going to be leveraging burst, which is Shopify eyes image library that anyone can go ahead and use and kind of take a chance to look back at my brand pillars and one of those is keeping things natural and keeping things focused with nature. So I'm gonna use nature as my keyword to see what photos appear for me. Yeah. And right off the bat, a lot of these images works perfectly with my mood board. I want focuses on people and I want nature in the background so I'll scroll down a bit and see if we can find an image that works perfectly for me. So I've chosen this photo because I like having people in my photos and I like having nature in the background. It works perfectly with what I'm trying to portray. But if I ever did if I ever needed to change a photo, I can easily do so by just going back to the burst library and choosing another photo. Perfect. Now with this photo comes a bit of text associated with it. Yeah. Already so the content I have here is saving the world one phone case at a time. It's a little bit more bold but it's exactly what we're trying to do with the neutral ist last but not least. I'm gonna be leaving this with a call to action. It's always great to give customers a little bit of information but let them wanting more so to do. So I'm gonna go ahead and say shop cases because that's what the call to action I'm trying to portray is where I'm trying to lead the customer to. So I'm going to lead them to a specific case in a specific collection and that will be shop organic cases. Great. At this point, my homepage is pretty much good to go now. What I'm missing here is some influential pages like my collection for my catalog, my product detail template to display my product information as well as in about us for people to really engage with the brand. I'm trying to build and myself of course, as well as a contact us to give them essential information in case they ever have any questions, comments or concerns. Let's start off with creating some of our pages. So starting things off to create a page, all we have to do is under online store click pages 1st. We'll start off with a contact us page very simple. And the reason why I say very simple, it's because in a lot of themes, I'd say the majority of themes, all themes will come with page dot contact indicating that he created a specific template just for contact us. Now this template will most likely include a contact form, but you can leave some additional messaging. Mhm. Perfect. Now, if I were to say this, I can go ahead and preview it right afterwards. Here you can see we have our contact us ready to go. I'll apply a little bit of spacing underneath this just to make it a little bit more aesthetically pleasing. Now that we have our contact us page done, we're in a good spot to start creating our about us. What we can do here is we go back to pages, we'll click add page from there. We'll go ahead and name about us. Mhm. Now we could do a variety of things. We can insert an image. Um we can maybe insert a video but in this case, what I'll do is I'll just stick with a simple image for the time being. Now, if you don't have an image, a quick tip and trick is incorporate one of the images and burst and then later on incorporated in your about us page. For example, I've used this image already for the home page and I'll assign it an all title. I'll say, well think fun outside for accessibility purposes. Of course, I'll assign it original and I'll insert it. So what we'll do next is we'll add a little bit of content just to better explain about our business and give a user a much understanding of what we're trying to do by having this online store. So let's preview this page. Great as I mentioned, almost likely change this image afterwards. But this is just an example that you can go ahead and choose any image from burst and add this to your about us page or any template. You're looking attitude down the road. So so far what have I created? I've gone ahead and created a homepage and about us contact us. But we also have to collections. So what I want to do is I want to link these all of these specific pages to navigation items. So to do so I'll go back into online store and then click navigation in your navigation. You'll have by default a main menu and a footer menu. Well, first get started with our main menu which can be found at the very top of our header. I'll go ahead and remove catalogue which appears by default and start adding in four navigation items which will be my best sellers shop cases about us and contact us. So in this case I can even delete home 1st. We're gonna go ahead and name bestsellers. I want the priority of my user to look from left to right as they typically would and see the hierarchy that I'm trying to communicate first with my best selling products. Perfect. Next is we're going to say shop cases which will be my secondary products that I'm looking to sell to them. Mhm Yeah from there we'll go ahead and add in our about us and last but not least we'll go ahead and add and contact us. Mhm. Perfect. Now once I save it you won't see much but once you head over to your store you can now see that the navigation is now in place from, as I mentioned the best sellers shop cases about us and contact us. So if I were to click into bestsellers, I can go ahead and see my products, which I most likely will reject just very slightly to put it more in a grid. My shop cases, my about us as well as my contact us. So as I mentioned from my collections, I'm just gonna change the format ever so slightly just to make sure that I can fit a grid based layout, which I find a little bit easier when customers are looking for products. So we'll click customize once more. Well now, see our navigation is now appear so we can click into it and you can see in collection pages we have an option to click it to change the grid style from collage to grid. And that's exactly what I'm looking for for. Three products like this, it works quite nicely. But when you're looking at more than three products, you can really get a strong understanding of how this can look last. But not least. I want to go ahead and just update some of the colors in this scenario here, we have this very light gray, which I'm just going to move into a white background just so it looks nice and on brand and very clean. If we wanted to take one more step, we could go into the footer and see that it's lacking ever so slightly. And that's because we only have a search navigation item associated with it. So what we can do is we can go back into our navigation under online store and start assigning proper, proper pages to it. But what are these pages that we might want to use In this case we might wanna incorporate a return policy or in terms of service or additionally or contact us because we want to be able to communicate that trust to our customers. Now, if you've never created content for a privacy policy or terms of service, that's definitely not a problem. Shopify has a brand new feature that's under the legal portion that you can go ahead and click and actually go ahead and define some of this information by the templates Shopify gives you So for the refund policy I'll click create from template and right off the bat. Shopify hasn't created an incredible refund policy. That's industry standard. But keep in mind you're probably going to have to tweak it to meet your business needs. But I'll create one page for the refund policy under online store and assign this information to it. Question. Okay, perfect. And now we have it. I'll leave it at that for now. But you get the general idea. So clicking into footer menu, I want to go ahead once more and add in correct navigation items. So first we'll add in maybe all products because we want to redirect because we're very sales focus at the end of the day and want to link users directly to all of our products. We're then going to go ahead and build that trust with our refund policy, we just created the page, so it's easily accessible and we're gonna end it off with contact us in case users perhaps are viewing uh your website on a mobile phone, spend all the time scrolling all the way down. And they might have an initial question for yourself. Mhm. And there you have it. Not only do you have a great navigation at the top of your head? Er but a great secondary navigation to complement it at the very bottom of the footer. And as you can see, we have a great looking homepage that displays are primary messaging with your voice and tone. We have our best selling products to really build confidence and trust into our customers to see what other customers are purchasing. Additional ver bitch to build that much more trust and really have an emotional connection with your customers that would make them want to shop or at least preview some of your cases. A very simple collection page that comes default with Brooklyn. But wait just a moment. The product page looks slightly strange as you can see I have tons of different variant options because I'm selling not just the phone case for a specific device but many different ones. So keep in mind we're not done just yet. Back in the online store, we're gonna go ahead and click customize. Okay from there we're going to navigate to a specific product so we can see edible options associated with that template. As you can see. I have a lot of options here for a variance. So I'll click product page and then when I get to the options instead of buttons, I want to go ahead and add a drop down. It displays a lot more options effectively instead of making the page extremely long and is very effective in terms of what you're looking to find. So we can click at the cart or buy it now. But keep in mind we want to look what we want to see what the cart looks like as well. So clicking at the cart gives me the options for our cart based layout which can be customized but in this case it just needs one minor adjustment. Uh huh. Perfect. This is one of the main reasons why I chose this theme is a cart slide out. It works very effectively when you click add to cart because you can see it ultimately on any page. But one last step is where is this car going to take me? And that's the check out. Now with the car page in front of me, it leads me to the last portion of this experience, which is the checkout. So I'm gonna go ahead and click check out and go ahead and customize my overall check out. So now that we see we have the check out in front of me, I have an option at the very bottom of theme settings called Check Out. I'll click into it and I'll see that I have a variety of available options just to customize my check out. So first as I mentioned, let's get started with consistency with our logo. We'll select our image. Mhm. See what it looks like once it renders and once we're happy we can go ahead and continue. So we have our logo in a good spot. I could say our accent and are buttons could be a little bit more on brand to what we originally have which is are very defining yellowish orange color. Perfect. And our typography, we can see we have a variety of options, luckily in my case railway, which I usually use for all of my headings previously it's accessible in the checkout. So I'll go ahead and choose it. But if it doesn't it doesn't hurt to play around with the available typography to try to at least get as close as possible to any previous custom typography you may have used and in my body I'll see that we have Helvetica also available. So luckily enough for myself I can make sure my brand is completely consistent to a T. Great. Now the checkout is pretty straightforward. So luckily all I have to do is update my colors, incorporate my logo as well as my color palette and right off the bat we have a much more consistent full on experience from the beginning of the homepage all the way to the end of the check out. Your sight isn't a good spot and there you have it. You see my step by step process to create a Shopify store and edit the look and feel. So it's on brand with your business. I've also included a short checklist of other information. You need to set up your store before you go live, like into your payment information, your shipping and so on. So join me in the final lesson to hear my advice on how to move forward with launching your store. Yeah.