[MUSIC PLAYING] 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 1 and 2 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 going to 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 Add to Cart. So now let's go ahead and download it into my store.
I'll click Actions and then I want to publish it right off the bat. Rest assured, I already have Coming Soon in place so I won't have to worry about any customers looking at my store while it's in production. Perfect. So if I were to 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-bones settings that it gives me.
So let's start customizing it. To customize this theme, I'm going to go ahead and click Customize. What I'm doing is an opening Shopify's 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 customizations, I'm going to 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 added 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 home page. Now contrast is very important. So in this case, I'll be uploading a dark overlaid image. So I'll want a home page logo that has white text and contrast it well. So I'll select my image. And there you'll see I have an identical logo just with white text.
Perfect. So far I'm pretty happy with everything. I'm going to 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. And I'll go ahead and customize it with the proper look and feel.
So I'll go ahead and find the exact color scheme I need, which is perfect right here. But also keep in mind that you'll 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, what we're going to do is we're going to make our way down and start updating this home page slideshow.
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 for my slideshow. I'll go ahead and click this slide, which is available, selected an image. Let it display, just so I can get a visual representation of what it'll look like.
Great. And then we're going to go ahead and update the text. So here I'm going to say Phone Cases, and below it in the main text, Your Inner Zen. What I'll do in this case is play around with the typography just to make sure it's looking great.
Perfect. And last but not the least, I can see this button is associated with my slideshow. So I'm pretty happy with the way it says Shop Now or in this case I'll link it to all of my products. Let's see, I'm creating collections. There you go. Great. Now we can see so far, we're making great progress just on our home page alone.
Now, continuing our way down, we can see that we have so many available features that we can apply to our home page. 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 in 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 then assign 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 the customizer, let's really take a look at our brand look and feel. You can see that there's a couple of things that 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 complimentary 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 going to go ahead and change the typography, which is a second option underneath Colors. So I'm going to click into Typography.
And remember my heading for this theme, we're 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 it 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 going to 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 font you're originally using. Perfect. So we're going to 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 texts 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 dig right into the theme options and see if this isn't updated here, perhaps it could have been updated right on the Slideshow.
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 save this. All righty, so now I'm going to 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 to create a 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.
From there we're going to add my top three best selling products. So to do so, we just click Browse 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 going to go back into the theme and assign them. 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 verbiage, which I'll go ahead and attend to very soon, but I'm going to go ahead and add in my collection. So under Featured collection, we can go ahead and update the heading, which will be Best Selling Products. Assign my collection, which is Best Sellers.
And in this case, what I'm going to do is-- I like this collage format, but I'm a bigger fan of just keeping it simple with a grid. Perfect. So we have our homepage. We have a header almost good to go. We have our typography and our colors in a good spot. So now we're going to talk a little bit about the content, the voice, and tone of this home page so far.
Here we can see we just have some default content, but I'm going to go ahead and populate it with some of the content I've pre-written, 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 Hand Picked Organic Materials. I want to give precise and clear information about the products I'm trying to sell to my customers. Now that our title is in a good spot, let's go ahead and add in our additional verbiage.
Here we can say, we're here to reinvent phone cases that are easily recyclable and reusable. That's exactly what I'm trying to portray. The headline was nice and catchy, but the body copy is what's trying to really engage with the customer. So to reiterate, we have a slideshow header for the most part in a good spot, our verbiage, 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 home page. So the very last section I'm going to 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 going to start by assigning a great image to it.
Now, I don't really have an image readily available. So I'm going to be leveraging Burst, which is Shopify's image library that anyone can go ahead and use and 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 going to use nature as my keyword to see what photos appear for me.
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 backgrounds. 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-- 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. All righty, 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 Neutralist. Last but not least, I'm going to be leaving this with a call to action. It's always great to give customers a little bit of information, let them wanting more. So to do so, I'm going to go ahead say shop cases because that's what the call to action I'm trying to portray.
It's where I'm trying to lead the customer to. So I'm going to lead them to a specific case and a specific collection, and that will be Shop Organic Cases. Great. At this point, my home page 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 an 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. First, we'll start off with a contact us page, very simple. And the reason why I say very simple is because in a lot of themes-- I'd say a majority of themes-- all themes will come with page.contact, indicating that they 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. Perfect. Now if I were to save 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 Now we could do a variety of things. We can insert an image. 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 in first and then later on incorporate it in your about us page. For example, I've used this image already for the home page and I'll assign it an alt title, I'll say people having 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, I'll most 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 to add it to down the road. So so far, what have I created? I've gone ahead and created a home page, an about us, contact us, but we also have two collections. So what I want to do is I want to link 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. We'll first get started with our Main menu, which can be found at the very top of our header. I'll go ahead and remove Catalog, which appears by default, and start adding in for navigation items, which will be my Best Sellers, Shop Cases, About Us, and Contact Us.
So in this case, I can even delete Home. First, we're going to go ahead and name Best Sellers. 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.
From there, we'll go ahead and add in our About Us. And last but not the least, we'll go ahead and add in Contact Us. 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 Best Sellers, I can go ahead and see my products, which I most likely will rejig 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 for my collections, I'm just going to 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. We'll now see our navigation is now up here, 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 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 pages to it. But what are these pages that we might want to use? In this case, we might want incorporate a return policy, or terms of service, or additionally a 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 has 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. 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 focused 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 going to end it off with Contact Us in case users perhaps are viewing your website on a mobile phone, spend all the time scrolling all the way down, and they might have an initial question for yourself. And there you have it. Not only do you have a great navigation at the top of your header, 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 home page that displays our 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 verbiage 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 a 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 going to go ahead and click Customize. From there, we're going to navigate to a specific product, so we can see editable options associated with that template.
As you can see, I have a lot of options here for our 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 dropdown. 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 Add to Cart or Buy it Now.
But keep in mind, we want to look what the-- we want to see what the cart looks like as well. So clicking Add to Cart gives me the options for our cart-based layout, which can be customized. But in this case, it just needs one minor adjustment. Perfect.
This is one of the main reasons why I chose this theme is the 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's this cart going to take me and that's the checkout. Now with the cart page in front of me, it leads me to the last portion of this experience, which is the checkout.
So I'm going to go ahead and click Checkout and go ahead and customize my overall checkout. So now that we see we have the checkout in front of me, I have an option at the very bottom of theme settings called Checkout. I'll click into it and I'll see that I have a variety of available options just to customize my checkout. So first, as I mentioned, let's get started with consistency with our logo.
We'll select our image. 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 accents and our buttons could be a little bit more on brand to what we originally had, which is our very defining yellowish orange color. Perfect.
In 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 had to do was 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 home page all the way to the end of the checkout. Your site is in 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 enter 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.
[MUSIC PLAYING]