Shopify Store Design & Creation Masterclass: Learn Everything Shopify From A-Z | Auto Pilot Passive Income | Skillshare

Playback Speed

  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Shopify Store Design & Creation Masterclass: Learn Everything Shopify From A-Z

teacher avatar Auto Pilot Passive Income, Guides To Help You!

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

24 Lessons (2h 1m)
    • 1. Introduction To The Course

    • 2. Shopify Dashboard & Themes

    • 3. Theme Setups and Preview demo


    • 5. Hero Banners

    • 6. How to create products and collections

    • 7. PRODUCT SEO


    • 9. The Art Of Creating Split Banners

    • 10. How To Add images To Our Website

    • 11. Creating A Second Banner To Our Website

    • 12. Editing Split Banners

    • 13. Previewing our Website Banner

    • 14. Editing the collections page

    • 15. Exploring Features, Banners and Blogs

    • 16. Instagram Gallery

    • 17. Exploring Product Look Books

    • 18. Create A Look Book Background

    • 19. Branding, Collections, FAQ's and Galleries

    • 20. What Are Shopify Store Requirements

    • 21. How To Create A News Letter Popup

    • 22. How To Create A Contact Us Page

    • 23. How To Create More Custom Pages

    • 24. How To Edit Custom Pages

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

An a-z course of how to design your Shopify store from scratch! If you feel that you need a guide to help you every step of the way of then this course for Shopify design is for you!

Meet Your Teacher

Teacher Profile Image

Auto Pilot Passive Income

Guides To Help You!


Class Ratings

Expectations Met?
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.


2. Introduction To The Course: Hey everyone, welcome to the introduction of the course. Welcome to the course, the masterclass on shopify design. We're going to take everything from steps a through Z when it comes down to shopify design, to let you create a store that looks as professionals, the one that you're seeing here today. There's a lot of features that come behind creating a professional Shopify store. But if you want to go ahead and create one, let's talk about what's actually going to be in the course so we can get started. So to get into in terms of the course, all the lessons that you're seeing here, exactly what their title is, exactly what you're gonna be seen in the actual course. We're going to be going over things like creating galleries, creating split manners. We're going to get as granular as creating the SEO for the products that you have on your Shopify store. We're going to talk about things that are a little bit basic, like hero banners. And we're even talking about things that are a little bit more complicated, like how to create your first newsletter pop-up and what are their Shopify store requirements and basic things that are required for every single Shopify store design. You're really getting a whole lot in this course. Now that you know the structure of the course, the amount of time that each lesson is. And as you can see that they're, the times here for each lesson are presented right under the title of each lesson of the course. Let's go ahead and talk about who this course is for. It's for really anyone who wants to build a Shopify store. The only tools that are actually going to be required here is you're going to need a computer and you're gonna neither Shopify store. Those are the things that are going to matter the most. Now, you can also get a premium Shopify theme that's optional. There are different Shopify themes out there. It's really your choice depending on what style you want to use. But we will talk about that more. You'll see in lesson number two where we talked about all the different Shopify themes that are out there. All right, the next thing we're going to talk about is this introduction is, what's the value of this course? Well, point-blank period is that attractive stores generate revenue, guys. The reality is, is that in 2022 and beyond 2022, If you're gonna be creating a Shopify store, you're going to need it to be as attractive as possible and nobody wants to shop at an unattractive store, it creates distrust within consumers. And so if you want to generate income on Shopify, you're gonna need to have an attractive store. This course is exactly for that. It's going to show you exactly how to create an attractive store. Like I said, just like the one you're seeing here. Now, We're gonna have a class project. You can complete the class project after you finish the course, taking the course and basically what you're gonna be doing a step-by-step, you're going to be designing your store. And once you complete your design of your store and you feel comfortable that I want you to go ahead and copy and paste your store link the dot my Shopify link in the class project and also add the password. The password is not a private password, it's a public accessible password so that we can go ahead and view your store and see how it looks from the inside without editing any of your data. Without further ado, let's go ahead and get started. I'll see you guys in the first lesson. Alright, see you. 3. Shopify Dashboard & Themes: Okay, so welcome to the first lesson of the course. Now, we're gonna be talking about is the Shopify Dashboard and the different themes that you can select. Okay, so what you're seeing right now is the Shopify dashboard for this website that you're seeing right here. Okay. So what you're seeing right here is a website that I created previously, just for fun and for design aspects. And this is the back-end to that website not to get to here, you have to go to shop plan, you have to create an account. And when you get to the count process creation section, you're going to see a section or the homepage that kinda looks like this, right? And the first thing you want to select is the online store button. And what it's gonna do is it's going to take you now to the page that where you can upload themes, right? And so what is a Theme? Let's go ahead and discuss this. So a theme is the overall design behind your store. So, you know, certain aspects to the store. Like, for example, the way your banners are designed or the way your countdown timers design, different aspect designs to your website is all incorporated within what's referred to as a theme. Now there are paid and there are free themes out there. Alright, so what a paved theme is, is the same as a free theme. The only differences that are gonna be different features and they're going to be different benefits. Now, a paper in specifically is going to be a design of a store that can typically better, be better than a free theme. I always recommend to my clients and to my students is that we go with paid beams because paintings are typically better now that's not always the case. There are some paid beams that aren't worth a dollar to spend on, but there are free themes that are much better, right? And there are some paid themes that are beneficial and there are some free beams that are not beneficial. So the theme that I personally use is the wolf of Shopify theme. This is their website, but there's a host of other themes available. So for example, if we go to, you know, free themes here, explore free themes, right? We can explore the different theme designs that Shopify provides for us. And we could visit the Theme Store where there are paid beams by Shopify. Now there are third party themes such as well for Shopify turbo, all these different brands. What you're going to see me do is you're gonna see me create a story using willful shop, fine. But you can use any kind of theme or any kind of setup that you wanna personally use. Okay? Remember that picking a theme has to do with your creativity, but you also wanna make sure that your theme is functional and creative, right? So when I say functional, the main goal of the theme is that it will convert at a higher level than normal, okay, then a typical theme would typically free themes do not incorporate that, but like I said, it's not necessarily a requirement, it's just an option. Okay, so let's go ahead and move on to the next lesson where we talk about different theme setups. 4. Theme Setups and Preview demo: Okay, so let's go ahead and talk about 50m setup. So depending on where you get your theme from, there's going to be different presets or setups that the theme is going to have. So for example, the theme that I'm currently using, what's called the wolf of Shopify. It has five different demos are five different setups or templates, okay, with free themes, they have different templates also. So I know for example, the boundless theme has different templates, right? So there's black and white and there's a vibrant okay, for, let's say for example, for this theme, you have snow boards, you have outdoors, and you have Boxing, right? These are different demos for the three themes here what I notice is that they typically encompass similar designs, just different colors, right? With paid beams that are third-party end on the Shopify store, you're going to notice a little bit more of a difference with a little bit more creativity behind them, right? But if you're a beginner, free themes are a great place to start. But if you wanna take e-commerce very seriously, just realized that paid themes incorporate, most of them at least incorporate different demos. And for the specific theme that we're using here today, it will have different aspects that we can utilize to grow our business with the different demos. And these different demos will come in handy. So if I just a preview for example, here, if we hit customize on homepage for and let's just go ahead and wait for this to load. You're going to notice that there are significant differences between that of homepage for and the regular, Let's say homepage product page. So if we just select on this product page right, for the OG revival languages leggings, excuse me. What you're seeing here is a product page with three segments of focus. This is what I call right here, three segments of focus. And basically what this is is if there's a, you know, a concept that you want to have your viewers focus on. These three segments of focus allow your users to view, you know, for conversion rates and just to kinda spread your message better, right? Why choose us? Information about returns, informations about shipping. When people understand more information about your product and your business, there's a higher chance that they'll convert as a consumer because they know more information about you, right? It creates more trust. So just to view demo for, if we click on product page here, okay, what you're going to see as a product page that is significantly different than the one that you're seeing here. So for example, this is not significantly different, but you have here three points of focus. There are no three points of focus in this demo, right? So there's different reasons and different places where you'd have them. Let's go back. For example, homepage to and will take customize and view that product page and we'll explore the differences between that also. So let's go ahead and have this load and just give it a mini here. And while we're waiting for it to load, let's head over to product page, right, so let's navigate to the top bar here and select product page. What you're seeing here is there's three points of focus now, and there's also a special special offer focus box, right? These are different features that each demo might have that you want to incorporate within your business, right? So for example, if you're creating an ad and this might be a little bit too advanced to discuss. But if you're creating an ad, I'm on a certain product that says 30% off your, you don't want to include that information somewhere here and the special offer box, why is that? Like I said, it's a different feature that different themes allow and they just have different benefits to them. Okay, now let's get into the actual design part. So we're going to start by using a specific design that we like. And we're going to review the design in the next lesson, and we're going to make the final decision to get into it. And I'm actually going to be explaining to you guys why I selected that particular design and how we're going to choose to set it up, right? So let's get into lesson three. 5. PUBLSIHING OUR THEME FOR PREVIEW: Okay, so now that we've gotten through different setups and different designs, here in lesson three, we're gonna be talking about what theme or what demo that I'm gonna be picking. So I'm gonna be picking demo number three. And to be able to just go ahead and publish that, we're gonna go here to the actions button, and let's go ahead and hit Publish. Now I know that the demo's not yet created, but once it's created, it's gonna look a lot better. So let's just go ahead and hit publish and wait for it to publish. Now that home number three is now our published demo. There's really not much to view on the page except for the basic. So let's go ahead and customize here. Okay? And let's just give it a minute to load while we are waiting for to load. Remember guys, that when you load your demo, it could take just a minute or two to get going. So the general mockup that I'm seeing here is that we have a hero banner, right? And this is referred to as a hero banner because it stretches from the left side all the way to the right side of the theme or of the website, right? We have underneath it a split banner, followed by a product grid with a product selector on top. This is going to be a very useful tool that we're going to utilize. And like I said, this is why picking the right theme matters a lot. So if you find a theme that has these benefits, you should definitely pick it up. Right here is a banner that has a promotional banners. So ideally there would be an image here and there'll be an image here that where you could kinda promote the business. Not sure from going to keep that, but we'll see as how, how things go with the design. We have our new arrivals section here for different products and different collections that will be creating. And we haven't Instagram stops shop section, excuse me. And we have a a footer. So what we're going to be doing here with this whole, entire website and this theme is we're going to be making things a little bit different with our design. Alright, so let's go ahead and get started with our mockup. So just to go ahead and make things easier for myself, I like the concept of having this hero bounded here. So I'm actually going to choose to keep it the least. Split banners is something that I am very, very much of a supporter of them advocate, I'll split banners. And we'll explain that in later parts of this lesson or this course rather. But split boundaries is something that's going to stay for us and our general product grid here. What I'm gonna do is I'm going to get rid for, I'm going to get rid of this banner and this banner. So let's go ahead and hit just removed section here. And so we got rid of those products are those boundaries rather. And so we have our products, we have new arrivals section here. I'm gonna go ahead and get rid of the new arrival section. So we have our flash sales section here. We're going to get rid of that. And just to get rid of something or a section right here, you just click on the section. You hit these little three dots, you hit remove section. And let's go ahead and get rid of the Instagram shops section. That's something that I'm gonna get rid of also. Ok, so let's hit remove section. So currently we have our homebound or, or our front are our hero banner, our split banner, and our product grit. Okay? Now something that I need everybody to do is to make sure they add their own products. So that's what we're going to go into the next lesson, is we need to add our products and we have to create collections for these products to be able to categorize them and have them show up on our website. Alright, so let's go ahead and just save our progress thus far. Let's hit the save button and let's go ahead and move on to the next lesson. 6. Hero Banners: Okay, so arguably one of the most important lessons where we talk about banners. So when we talk about Hero banners specifically, so typically a here banner is going to look something like this, right? It stretches from left side all the way to the right side of your website. We have some settings that we can implement. Like for example, we can make our header transparent and he can leak into the actual banner you can see here. So if I, you know, an excuse me, if I click on this button, it will create its own banner. If I click on transparent, let's click on this banner. It will basically leak the banner into our header. I think I like this setup. So what I'm gonna do is I'm going to select a banner image or better backgrounds. So in my case, just, you want to remember guys, that banner has one purpose and its focus. You know, what do you presenting, what focus or you're presenting to the consumer? Are you selling t-shirts? Are you selling clothing? Are you selling pencils or he's only notebooks. Whatever you're selling, it should be somewhere in the banner. Also a good place for a banners if you have multiple ones like this, like a sliding banner, is you want to try to implement the factor that where you can kind of promote stuff and showcase your sales, showcase your discounts, showcase your offers. To be able to do that. You're going to have a better chance with conversion rates, right? That's what hero banners or for every piece of real estate on our website has a purpose, and this is the purpose of that. So let's go ahead and go into slideshow here. And for our first slide, which is going to be slide number one, we're going to select an image. Now, I have some preloaded images. You guys can select any image that you want. So let's just give this attest. This was a banner that we had available to us. And I think it looks overall pretty decent. And we can select the different headers. Now if you're wondering what this block is that says a 160 by 46. It is simply a logo so we can't edit that within the Banner. Like I said, that's kinda header stuff which we'll talk about in the future lessons. But just for this video sake, we can select one of the lower layers that we have saved. In this case, obviously it's not gonna look too good. Maybe we want to make the logo a little bit smaller so it doesn't take away from the image. So as we did, it looks very, very clean. We might even want to make the text and the color a different color for the banners. So you can see here, now it's a lot cleaner. We can even edit the text. So there's a Shop Now button here. To do that, we'll just head over to slideshow, also known as a banner. We can edit the text. So in this case, color button. We can make the default to be orange and hover to be white, for example. So whenever somebody hovers and the colors are gonna change of the button, and let's go ahead and hit save. And let's just refresh the page so we can view how that looks. So I'm gonna go back here and let's refresh. Let me just wait for the saving. Okay, it's saved. And let me hit reload here. Let's just give it a second to load up. Because as we know, there's a lot of content on the store. Okay, there we go. So we have our text, we have our button. Anytime I will hover over the button, it will turn white. And we have our logo that's minimized and we have a transparent header. Now you guys can add different banners. I'm only gonna keep this banner for now just for the sake of this video, like I said, so we covered now Hero manners. Let's go ahead and move on to split banners. 7. How to create products and collections: Okay, so now to create our products and our collections, we're gonna go back here into the exit button. Let's hit the exit button. Let's select products. Now, you're gonna see that I have a list of products are ready loaded. Now this is something that you're gonna wanna do and I'm going to show you guys how to do this exactly right here, right now. Okay? So the first thing you're gonna do is you're going to hover over to the right side and you should see a button that says add product. Okay, we're gonna go ahead and select that. And to be able to add a product who would need a title, a description, media, and pricing. So we don't necessarily need all of these aspects like We don't need description, we don't need an image. But in order for our store to actually look decent, we're going to do that. And since we're modeling our store off of the alpha2 business, we're going to be doing that for the sake of this video. So if I just searched athlete athletics, I'm going to find a product that we're looking to promote, so are not promote, but we're looking to put on our website rather. So let's just say in this case, I'm looking for a t-shirt. Let's say it's this t-shirt, right? I'm gonna go ahead and download the images. And now in your case, you're not going to necessarily be downloading images from anywhere. You're going to be creating your own products, or maybe you're drop shipping or whatever the case may be. So in this case, I'm going to hit this little download button. And we're gonna just hit download here. Download here, here, and here. Okay, so now that we have everything kinda downloaded the way we want to, let's head over back here and let's just drag and drop each image. Remember that you can easily drag and drop images onto your media section for your product. Now, now that I know that I have the images available, this mean image right here is going to be the focus image on our product. So if I was to just give this name, a product named calls shirt, and just hit Save here. And if I was to preview the product and we'll go ahead and do that now. Let's go ahead and view the view on my online store. How kinda looks like. As you can see, this is the product of the main photo. We don't obviously don't want that. We want to show this photo as the top one or the main one. So we're just gonna go back here. And we're just going to drag and drop the photo at the front. Okay, and let's go ahead and you can see here our media has already saved. We hadn't notification that popped up. Now in this case, I do want my product pricing to be correlational. So basically what that means is if we have other shirts on our website, we want to charge the same price all throughout the website, right? So that's just, it makes the website look a little cleaner and a little bit more simple. Alright, so let's go back here and let's make it $28. But first we actually have to create variations. So if you don't have any variations to your products such as differences in size and color, etc. You can just type in 20 here with no problem and you could just save your work. But in my case, we have variations to the product. So I'm going to scroll down and go to variance here. And let's go ahead and hit here. And we're gonna type in size. That's a variant for us. And we're going to add the different sizes. So small, we have medium, we have large, and we have extra large. And for anybody that wants to know how we added these, all you have do is type in the word and once you want to add the word, you just hit Enter. And so we hit save here. And so as long as our products are all the same price, carbon all show up here at 28. And what we can do is we can take the time to preview the product. So if I just search shirt here, we should see the shirt pop-up. So here it is. And let's go ahead and just view the product. And so the shirt is available. Obviously, as you can see, the Only One problem that we have is that it's out of stopping. It can't be ordered. So how are we going to be able to manipulate stock? Because we're gonna go back here and we're going to edit our quantity. So in this case I might write something like ten. I might write a 100 here, or a thousand. I might write 40 or 30, I might write 20. And let's go ahead and hit save. Now, if this is your product, you bought something you wanna do is you want to actually count your quantity. Or just, you can have a setting within the store where you don't want to even count the quantity, but that's something that's a little bit more advanced in my case, I always recommend everybody to count quantities for your products, okay? Now, I'm also not going to name the product shirt. I'm going to call it blackout. Blackout t, right? The blackout t. Let's go ahead and hit Save. Ok. So we have our product name, we have our photos, and we have our pricing. Now. Now just to feel comfortable, I just wanna go ahead and preview the product one more time and make sure that it looks real good. And so we can see here that we have the main image that we have. If we keep scrolling, we have the other images and we also have it in stock. Okay. So if anybody is just going to ask a quick question about and this hurry section. With this section right here, this is like I said, a theme. And this is a theme defaults. So depending on what theme you have, you're going to have different benefits and different looks to your pages. And my case with the theme that I purchased in the theme that I have is that I get to have this feature, which basically what this feature does is that it is an incentive advisor. So when people come to my website and I have like an ad that's running or something like that. It says limited stock available and they see something like this. It's going to motivate them to purchase more. Okay, so that's just a little tip there. Now, before we go ahead and end the lesson here, we need to do two more things. We need to add a description and we need to add this product to what is referred to as a collection, right? So to add a description is very simple. You just type content up and you save so you can make content and bolt. You can italicize the content and you can underline it, right? You can add bullet points. So if I wanted to add bullet points here, I would say, you know, all of these different bullet points to my products. I can add images. So if I wanted to add an image to my description like this image and hit ins, or I could do that, right? There's a lot of things that I can do in this case. It's not something that I want to do. So I'm gonna go ahead and get rid of all that. And what I'm going to do is I'm just gonna copy and paste the description that's available to me. Now, obviously, this wouldn't be the case in a real life store. Basically, you'd have to have your own description, your own photos, you're your own product name, all that kind of stuff. But what I'm doing here is I'm just remodeling the store ticket to kinda show you guys and give you guys a feel of how the design should be. Okay, so let's go ahead and go back here. And so we have all these different products that we have available. Let's go ahead and go back. These are just kind of a list of products were created once you guys create a list of products that you want or that you finished, we're going to have to create collections. Ok? So basically what collections are the different categories for certain products? So we have our product category here or collection called men's tops, right? And by the way, to create a category, you just click on the collections and create collection, right? And it will look something like this. You're going to select Manual for manual product uploading. And you're just going to search for every product that might fit the order. So in this case, we have men stops and one of the men's tops are this blackout T. And so let me go ahead and hit done. So you can see here it's added and we can add a description if you want. It's really optional. In my case, I'm not going to be adding it, but this is a decent way to go ahead and start. So you want to do this with all the products that you have. You want to fit them into different collections. And more than one product can fit in more than one collection. So imagine if you had a accessory like a pair of sunglasses. That person glasses could fit into the accessory collection and it could fit into sunglasses collection. So products can fit in more than one collection at the same time. Okay, so make sure you get that done. You add all your products, you add all your collections. All right, then let's go ahead and move on to the next segment where we talk about SEO for product pages. 8. PRODUCT SEO: Okay guys, welcome to lesson number five, where we talk about performing SEO for products. So this is just a small little, I guess, segment on SEO. There's definitely ways that we could talk for hours and hours and hours on SEO. But what SEO just means is that it stands for search engine optimization. And basically, if you don't know what a search engine is, a search engine is, for example,,, You know, these are all examples of search engines. And basically what SEO is where you optimize your website for a search engine. Now, part of that optimization that you could do on Shopify is making sure that you're telling Google, hey, I want to rank for this specific keyword. So in this case, if I was selling this t-shirt, like if I was truly selling it, alright, and just click on the teacher. We call this t-shirt a black out t, right? If I was truly selling this t-shirt, I wouldn't want to rank on Google for the keyword blackout T so that when anybody searches for it and they can see my product. Well, how can I tell Google that I want to rank? Well, this is something that you guys are going to want to do with every product that you have. You're going to want to have to have the keyword that you want to rank for in the title of your product. You want to have it somewhere in the description. And you want to have it as the product type and you want to have it as attack. So this is just a little trick that I do to make sure that I rank on Google, or at least I'm telling Google, hey, I want to rank for this keyword. See what happens is Google ranks off of something referred to as keyword density. And like I said, we can talk about this a lot. But keyword density just means how many times is that keyword dense? How dense is that? How many times does it found within the webpage? So if I add blackout t here, right? And if I add it here, and I have it in my description somewhere, even though it might not be. But let's just say it is and lets say Tier I hit save. Now when Google starts to crawl, the website may can tell and they can say, okay, clearly this website wants to rank for blackout T. Another way to also are another thing you want to pay attention to is alt text. So whenever you hadn't image, you want to tell Google what is this image, right? So you just hit on alt text and you add the keyword in your alt text. Let's hit Save alt text here. And let's go ahead and get rid of this and do the same thing for every product, right? And you can actually test different keywords and things like that for different alt texts. But overall, it's kinda good approach to have, right? And the reason why is because if you get an extra 100 visitors among 25020, whatever the number is, it's basically getting free traffic to your website that you don't have to pay for. So this is why we do SEO and this is actually how we do SEO. Alright guys, so let's move on to the next lesson. 9. ADDING ONLINE PRODUCTS: Okay, let's go ahead and start lesson number six, where begin product implementation, right? So let's go ahead and head over to online store and let's hit customize. Now the first thing that we're gonna wanna do is any section where we see empty products may have to be filled in with certain products that were selling. So as you know, we're selling male and female related products. So anything like this is unacceptable. We need to make sure it has product images. So let's go ahead and hit product version here. And we have different tabs of products. So in one tab, I'm going to name a tab, men's for men's products and another tab, I'm going to name it Women's. Okay. So we have a women's and we have a men's. These are different tabs that people are going to be able to toggle through. Now let me go ahead and add a collection for that. So let's hit select collection. And let's hit men's, let's hit select. Ok. So we have a selection of men's products here. And we have a selection that we're going to add for women's here. And we're going to select our women's product. So let's search for women's. And women's is right here. Let's hit select. So whenever a consumer clicks on our product grid here between women's and men's, they're going to be able to flip through our products. Now, what if I want this to look a little bit cleaner? What I'm gonna do is I'm going to organize how my products look. So how do I do that? Well, let's go ahead and just take a look at this here. And let's just memorize what it's, what collection it is. So we have men's collection and we have our women's collection. Let me go ahead and add it collection here. And what I'm going to do is I'm going to edit the design of how the men's products are, are selected. So if I just hit browse, We have a few men's products here. So I'm going to select this one, this one, and any other men's related products. So we have these, right? The varsity joggers, the varsity shorts. These are all women's products. We have a t T-shirts for men. And that's basically now kind of like how in life you want to bring the best impression for forward. This is, goes the same thing for websites. So what I'm gonna do is I'm going to hit menu here. And what I wanna do is I want to kind of edit the order of where the products shown, why they show up at a certain stage, because that will give me a better chance at converting one. My website is just designed more cleanly. So cleanly, if that's the right word. So 1234 shirts Here. We have another few shirts here. Then we have some short. So we have ten total products. Let's go ahead and it's already saved. So if this button is grayed out like this, then that means it's already saved. So we can go back here to our collections and we'll just search for Women's. So it'll be the last one here. And we're gonna do the exact same thing here. So let's go ahead and browse. And let's select all the women's products. So we have two hundreds products here. We have, start from the bottom, we have this, this, this, this, these. Let's see if we missed anything down here. I'll just continue to scroll up. And that seems like a good setup thus far. Let's go ahead and hit done. And now let's sort through manually by selecting the order. And I think I want to select this product to be first. This to me first. Third here, let's bring in the seamless jackets. And this seamless jacket, We have the shorts and we have the bikini top, so That's going to be good enough. Obviously it's already saved. So let's go back to our customized page here and let's just refresh our page and see how our product, product collections kinda look when we implemented our own kind of product configuration. So let's just give that a second to load and it should be all ready for us real quick. Maybe if I just exit out here. Okay, so you can see here we have our products uploaded now. So something that I'm gonna wanna do is I'm going to want to bring this one to the bottom right with this. And I'm going to want to make that edit, but overall, it looks pretty decent. So you can see here obviously first-time loading. So something I might wanna do is get rid of these products because they're shaped differently or smaller sizes. But this is something that you guys are gonna wanna do with your websites too. And you're gonna wanna make sure that the images are all uniform and all the same size. Okay, and that's just a little tip for you guys. So let's go ahead and just do that on camera real quick. So this chord performance T has to be brought to a bottom, if not just totally hidden. And this, whereas here, these three products should be just, let's just totally hide those. So what we're gonna do is we're going to jump back into our collections. So let's go over here into our banner, and let's go ahead and just excuse me, not our banner. We have our product v3. Let's go into men's, let's hit Edit collection. And like I said, we need to edit our core performance t and move this all the way to the button just for size features. And what I actually want to do. In this case, since the core performance t is much smaller, let's go move this to the bottom here. And let's pull up the, let's just make only ten products at the top. So if I just go ahead and save this and make sure the identity jogger and the core performance T. So we have the identity jogger here. I'm gonna go head. And so we have this identity jogger. And we have the varsity jogger. So what we're gonna do is we're going to get rid of this root of this. We're gonna get rid of this and rid of this now, typically guys, normally, I would have these products available on the website. How ever there too small? The photos are just don't look good. So I don't want to risk quality. Or the design aspect just to have them available like that's not interesting to me. So we have, let's just see how many products we have. We have 12 products of visible. So it should be the first 12. So let's look through one through 12 here. So we have 1234567891011. This should be 11 and this should be 12. Okay, let's just go ahead and make sure that we have nine products available. So let's get rid of this. Let's get rid of this. Let's get rid of this. Let's go ahead and update this real quick. Okay, so nine products available. And if we just refresh this, it should look exactly the way we want it now it should look all uniform, all very clean. Let's give that a minute. Ok. Yes, it does look all uniform. Look very clean. Now, we have this one product kinda hanging out here with no other products with this empty space. And that just doesn't look good to me. So what we could do is we could, let's just check out kind of some settings here. We can edit the product item style. I don't know if I really wanna do that, but what I do want to do is I want to show, let's say ten products. Let's say nine products in this case, her eight. Yeah, eight products as good. Let's stick to eight. And I can obviously edit how many products are there in the row here, but that's not interesting to me currently as we speak. Just not something I want to focus on. We could obviously edit the item style. So in this case, we have item style number six. Let's just give it a second to preview item style number five. See if it makes that much of a difference for our design. And let's reload real quick just for speed's sake. Let's go back here. Should load up in just a second. Remember guys, this new design for Shopify is a little bit buggy. So Shopify has changed their user interface. So it could be a little bit buggy, but you can see here now the actual design is different, right? So we have this design now, so it's up to you kinda what style you like. So if I go back here and I just have used style, let's say number three, let's see what sound number three looks like. And if I go back here and I refresh, should take few seconds. So this is Style Number three. I like style number three a lot. What do you guys think? You guys will let me know? But, you know, if if the colors get in the way, I think I think this looks pretty decent for what we're doing. But we have mens and we have women. So with women's, we have these three products hanging out, so we'll have the same thing. So we might as well just select eight products for women. So let's go to V3 here, and let's select eight. So eight, let's hit Save. All right, let's go to women's. And there you go. We have eight products for women's. Now in order for this kind of setup or the style to look good, we'd have to have this text to look a little bit different. Maybe it would be orange, are ready to start off with. But we'll not worry too much about that for now. So this is exactly how you create and manipulate and implement actually your products for your store. Okay, let's move on to the next lesson. 10. The Art Of Creating Split Banners: Okay, so split banners, we want to have some sort of matching theme. Okay? So with a split banner, you really have to analyze your products, what you have for sale, what you have available. And the reason why that's important is because consumers want to see segmentation and your products. So for example, this is a men's and women's clothing store. Well, an idea of that is we have men and women coming to our clothing store. We want to present to them what they're most likely going to buy as soon as possible. Alright, so let's go ahead and hit slideshow here, or let's go back here rather. And let's hit banner. Now, there's going to be different banners that you can add when this theme, you can use whatever theme you want. But let's just go ahead and select a banner. And for our first banner image we have, remember we have Setting number one, okay? Which is this image right here. And we have setting number two for this banner image. So ideally, we have men's and women's products. So we would want to split the banners into something that's kinda equal or similar. So let's click on this. Let's see how this looks. So we have a split banner here. Maybe we could just click around and see kind of how other products are shaped. Let's see here. So this kinda looks good. We have a whole bunch of different products. That nice thing when working with a brand like this is that they have a lot of images that we can upload and test. See what looks good and what kinda doesn't look good. So we can try a whole bunch of different things, right? We have a whole bunch of different images to select from. So like I said, you want to upload different images and test and see kinda how they look. You want to have some uniformity obviously. So if one image is one size, you want to have another image kind of correlating. And you want to show also a clear difference between the two. So imagine if this was imaged number one, and let's say this would be imaged number two. This is not really an ideal way to utilize your split batters because the concept is we're selling men's and women's products here and then men's and women's here. So we want to separate the identities. So we have an image here, let's say, and let's say, let's see if this image kinda see the images sizes don't match. So we don't want to go with this. We want to make sure that the image sizes match. So maybe we can click on, for example, this, right? The basic store that we have available here, or the photos rather I is we have a few different images that will show like for example, this one. We have this image, right? Just kinda like how we had in the demonstrated that I created. And we have, let's just go ahead and load more so we can preview. And we have this one. So you can see here there's a huge difference. So for example, on the right I would say something like maybe workout programs. And on the left it would be something like workup clothing. Alright, so it'll be a little bit different. We can edit obviously the button colors and things like that, but this is just a decent place to start with our split banners. 11. How To Add images To Our Website: Okay, so let's discuss how to add images to our theme into our website here. So we can add images in two different ways. So we can go to, for example, like a banner or something like that, change and then just upload a bunch of content here. But there's other ways to do that, and that's what I'm going to be sharing with you guys today. So if you can see here, I've downloaded a bunch of images. If I could just take it, drag it and drop it, it will be uploaded right here. Or what I could do is I can head over to Shopify homepage so I could go to exit and I could type in files. And you'll see here an option for files. Let's click on that. And it will load all of the files. And we can just hit upload files here and we can just drag and drop all of the images that we want to add and hit open. You'll see they're actually going to start to load. There's this little green bar that's considered a loading bar that's loaded everything. So the reason why I added all these images is this is something you want to, going to want to do too, is you're going to want to have to accumulate all of your content before you begin your theme design. You want to have generally similar sizes. And you want to have like a mock-up of an idea of how your theme should look or how your website should look. And that's why this course is for, right? So we can guide you through that. But you definitely want to upload some content. And that's just something a little tip that I found that makes life a little bit easier throughout the whole building process. Okay, so let's move on to the next part. 12. Creating A Second Banner To Our Website: Okay, so now that I've uploaded some content, I want to actually create a second banner to our website. So let's go ahead and go to online store here. And let's hit the Customize button. And let's just get rid of this little loading bar here. And what we're gonna be waiting for is the whole theme to load, right, for, for everything to load up. So did right now. And you can see here on the right side of the battery we have a 123. Now these are empty. I could choose to use this specific banner or slide shows they call, but I can also use other things. So we have banner, one, banner to ban or three, banner for ben five, right? And this boundary is not necessarily like this. It's all the way across banner six, right? As one system across like this. And we also have slideshow. So let's go over here and hit load more. And like I said, this is not going to be the same for everything that just depends on what theme that you have. And so I'll scroll down a little more. And so we have different sideshow. So you have slideshow one, right? Which is a large hero slideshow. We have slideshow to slideshow three, right? Slideshow for Slideshow five. So you guys kind of get the idea what I'm going to go with them, just going to stick with the slideshow we're currently using. And I'm just going to add a new banner. So let's hit select immature. And let's select on the image that we want. And let's hit select so we can see kinda how it will look. And that looks good to me. Now once I save my progress and I go back here, it's going to have they're not going to be on top of each other like this. There's going to be the little arrow here with 123 and it will be available to us. I'm actually going to get rid of number three here because I don't think number three isn't necessarily needed for sideshow number three, let's go ahead and hit save, and let's just refresh. So let's go ahead and just refresh real quick. And it should give us exactly what we need, which is going to be 21 slideshow with two different images or as banners, they're going to be playing his banner. So we have one here and we have to, there we go. So that's good enough for us. You can see there's like an animation of things moving out, right? So that's good. And then i like that. And that's something that I'm going to stick with for our theme. So we have 12 now if I wanted to make this one the first one, I'll just drag it like this. And then it will be the first one, and then the yellow one will be the second one. So this one will be the second one. This will have position number one. We can also edit the margins. We can make them larger or smaller. In this case, the default margins are perfect than they work for me. But if you want to change them, you can just add a number like 40 or 20 or something like that. And that will change the pixel preview. And my case, like I said, the margins are perfect where they are. So I'm just going to save my progress, okay. And like I said, what you're seeing here is this is the theme loading, right? It shows slideshow one slideshow to, once this green bar has loaded all the way through, it will be on top of each other the way it's supposed to be. It's going to have a little one here, a little to kinda like this. And that's exactly how it will look on the consumer's end and on your end. So that's just something to keep in mind. 13. Editing Split Banners: Okay, so something that I'm gonna be doing is I'm going to be editing our split batters. You're going to find that there are times where you need to edit the content on your website, just like I have here. Now if you guys remember, the whole point of a split banner was that we can basically segment our products on our website, right? So we have men's and women's products. So we want to make one for men's and one for women's. Well, it just so happens that I have the content for that. So let's go ahead and change things up. So for example, I have this image, right? And I have this image. Whichever image might be better for women. So let's select this one. And for men's, I'll select, let's say this image, right? And you can see here the, they're both the exact same size. And they look really, really well together, right? So it just shows the, accentuates the different features of the theme where you can have sportswear and you can have clothing for going out, right? Both for men and women's. And we can play around with the different settings and different images. So if we don't like this image, we could test how this one looks or maybe how this one looks, right? Maybe this one looks a little bit better and that's what only go with. So I'll just select on that one. And that's kind of the way I designed it. Now, what we're going to want to do is we're going to want to edit the text on the split banners. So in this case, I want to have my text to white, right? Because the background is a little bit lighter. And it says here bestsellers. Let's make this text white. Okay, and so this part is should be white. We can also change the color like it doesn't necessarily have to be white to have a light gray tend to it. It can have a red tint. We can do all different things. I'm going to stick with white here. Let's go ahead and stick with white. So there we go. I know that white's gonna come out really, really good with this image. So let's go ahead and do that. Let's go with white right there. And white right there. Right? So here some text. And let's make the button white also. Ok. So the color button white should be this button here. And that's going to take a little bit of time to change once it just save the settings because it's not necessarily text. And let's change that here. We can also change the color, any kind color we want within this gradient. So if I wanted to make it like a blue, or if I wanted to match the colors that I have here, like an orange, yellow kind of thing. I can also do that. So let's just say I wanted it to be, you know, whatever we want. So let's say it's a orangeish yellow type color. And we can just tech test and see how that would look. So that orange, yellow. So that's not really my style. I don't think that looks too good. So I'll keep the vl. Let us just keep the white. The white looks good enough. So we could do that. And let's keep that white also. So let's go ahead and save our progress. Kinda assert how things look. And let's give it a shot here. And so, so far, I mean, it looks decent. As this is loading, the button color will change. But something we need to do also is we need to make sure that our split manners match the right match the right product. So in this case, we have our all products for banner one. And obviously we don't want all products. We wanted to be women's products. So let's hit collections here, and let's search for women's. And that will lead to women's, right? And for men's, we obviously don't want products who wanted to be Men's. So let's click here and say men's. And let's hit Save. Ok. And let's just go back. And once we refresh this or even website preview, we'll be able to kinda see everything in the aspect that we want to see. So if I just hit, well, it's actually refreshing for us. So I don't really need to do that. Malicious. Give it a second here. Let's scroll down. So there we go. If we click on it, it will take us straight to our background or not our background, our collections page of products. Or that's what it should do at least. And there we go. It's taken us to the collection page of all the men's products. But what it did do is took us to the wrong collection. So I'm going to have to make those kind of changes on my own time. Alright, so that's something you want to pay attention to also. 14. Previewing our Website Banner: Okay, so what do we do? A little short demo just showing you guys kinda how the banner works and how it works on a previous section. So this is me previewing the website on the outside. Sometimes the editor might not pick it up and I was just a little confused and I wanted to see and confirm that it works. If we just go here to the actual web, suddenly scroll down to one of the buttons. We click on the button, you'll see how it takes us to the right category now, so are the right collection. So it's not like we made a mistake. Sometimes I guess that will just happen with the editor. And since we're talking about collections, I want to talk about the collections page and how to just kind of make some changes to that within the next lesson. 15. Editing the collections page: Okay, so let's get into lesson number 13, where we talk about editing the collections page. So to do that, let's head over back to our editing station here. Within Shopify, you can see here how our website is actually coming together. Really, really nice. We have our banners, right, that consumers can click-through, right? It has a animation that it's almost like zooming out anyway. We have our images here that when you take your mouse and hover in, it zooms in, right? And we have our best-selling products for each niche or each section within our website where we have mean's, we have women's, it's all configured in a very clean, very professional look. Ok, so what our next step of action is to edit our collections page. So to do that, we have in editing station here and we can edit different aspects. But what if we want to edit a little more? We want to get a little bit more nitty-gritty, right? Well, it's very simple. Let's just go ahead and navigate to our collections page. And what you're going to be seen here is this little like section where you can kind of choose where you're editing or what's your editing. And to do that, we kind of just got to that page. You want to get to that page. And now we can make some edits. Now to be clear, not every collections page is going to necessarily look like this, right? Like we have peg Nation down here, right? Which basically means that people can switch through different pages of products, right? We have a whole list of different products, right? In our case, this is a little bit different. A lot of people's collection pages are kind of designed differently, meaning they just have like a product grid. And I realized that this is the collection page that really drastically helps it conversion rates. Because what's happening here is that it's giving information on the product, right? And it's giving you an image of the product to clear image of the product. And then you have options here, right? You can select an option to purchase. You can click through the product. There's a lot of things you can do. The first thing that we're gonna wanna do, let's just go ahead and head back here to our, our setting on our collections page, right? And what we're gonna wanna do is we're going to want to head over to our header. But first thing we need to do is have a logo, right? It has to make sense. It has to look good. We have a logo here that says enable sticky, but this is not the same case all the time, meaning on our header, if you look here, it says header homepage, we have a logo available, but what about the rest of our website? And so that's how we navigate right here it says Header other pages, and we can select our logo. So let's go ahead and scroll your toward logo and hit select. Now, great, our logo just finally here. The problem is now the website looks a little ugly with a really, really big logo at the end of the day, this is not conversion optimizer, optimized when you have a very big logo, right? People are not purchasing your products for your logo. They're purchasing for what you have to offer. So what we need to do is make this a little smaller. Those there's no And thankfully with the Reno, the theme, we don't have to do any graphical editing. We just drag this little slider and make it smaller. So let's see what the small size looks like. This small size, a little bit too small for me. So let me go to 70, maybe this is actually good enough. Right? Now, we can make some edits to the header, right? We can change colors like different texts colors. We can make the background black, right? And we can make the text to white. If, if that kinda improve something, right? Or excuse me, white. And we can make the background black. There's a lot of things we can do. In my case. I don't like to have a black background, right? I don't like it at all. But, you know, that's something that sometimes people like to do. In my case, I like to have a transparent background. You see here, and this is something you guys seen time and time again. In my case, I'll just make this portion Black also. So the text will be black, right? And so we have our logo, we have our, our links, we have our black buttons. Okay? Now we have a banner. So this banner, this is designed within the collections page, right? So with our collections page, these are the styling can edit here. So we have style 1234. So there's four different styles. Style one, and let's just go ahead and view it. It's going to be handling this like it's all crammed up. It doesn't actually look good. In my opinion, doesn't fit the design. Like if you're going to have a header up here that's not transparent, you can't have style one. Styled to is a little bit more spacious, but very similar to start one. Style three IS, I believe what we previously had or know what we didn't have. Style four was what we previously had. If I do select style through, you guys will see it kinda like In the meantime where it's basically it's not these, these icons and these images are not actually vertical and vertical like this. They're actually horizontal. Once the page is published, let's go ahead and just view how that looks real quick. So it looks kinda like this. So if I wanted to, I can make the background, right. Something like a banner. So if I was to select, this is my banner, right? And hit select. This is going to load my banner onto this and let's go ahead and hit Save. And so it's going to just preload everything for us. Okay. Let's just give it a minute here. Sometimes, like I said, things can take a little bit longer. If the images are more, you know, heavy duty, then we're just going to click here it enabled background image. Should only take a second or two. Let's hit Save once again. And you can see here this is the image that we have as the background. And you're going to be seeing that there's a lot of things that we're going to have to make changes to throughout the course here. So the course of the website design and why is that? So we have our logo, we have our texts, but we can't read it anymore because the way our banner is designed. So we're actually going to have to do is make some edits now. And if we scroll down, you can see here that our, our, our header is like dark and sows are text and we also can't see. So we're going to have to make some changes. Okay, so something we need is that the text to be like an orange, light orange color at all times. How are we going to do that? Let's go ahead and go back to our header. Okay? And let's just make sure that our header on the other homepages such as this one is orange. So let's just go to the orange here or maybe even select colors that we've already used. And you can see here now it's orange, so now it's a little bit more feasible to read into C. Okay, now if I scroll down, right, what we should be seeing, let me go back here. What I should be seeing is a little header, like a sticky header that will come up in just a minute. I just said, and this is something that you're going to have to do when you're editing your theme. So just give it a second here. Okay, so you see how it scrolls down like this. Now it's visible when it's black, which is very, very clean. You see how the rest of the website has this kind of white design transparent by scroll down its this black feature, which looks very, very nice. Okay, so now the actual images here, I have to edit these images and I have to make sure all of this kinda makes sense and readable. In my case, I don't want to necessarily go with this collection design, but for the sake of this video, I mean, why not, right? So how are we going to do that? We do that simply through here. So if we go to the collection page, right, this collection Pedro here, and we scroll down to Settings, theme settings. We have the option now to edit every single one of these little buttons, I guess you can say, right? And so we have all items, we have accessories. I know it's a little hard to read, but we can just change the color of the title I can read so that you guys can see here of this specific button. Alright, so in red, make this, let's say red and make this read, write. And maybe it'll be a little bit more visible. But what I can do is I can add an image. So if this is all items, I might want to have a picture of a male and a female in that image, right? Since it's all items and that might be the homepage collection, right? If I wanted to, Let's say Go to the image collection for men's and I wouldn't have mans out, change the logo. I would say caught men's, right. And I would have just a picture of a guy standing there. Right. Maybe this picture, whatever it is, and then maybe if it's a women's, right. So I'm gonna change this to women's. I'm going to select an image of just a woman. So maybe it's this image, okay? And so we have three photos here. Now, obviously, read is not going to be the color that I'm gonna go with. I think we should match our branding. Maybe make it orange or maybe even white. White might be a very, very clean look. So let's go with white and let's see how it looks. See here. Sorry about that. Ok. Make it all white. And let's see, we can actually get rid of some of these, these different options here. And we can just break down our categories a little bit further. Let's just go ahead and save our progress thus far and see how things turn out and how they look. So let's give it a second to load. And it shouldn't take too long since our theme is kinda designed pretty well so far. The only thing I want to say in the stipulation is that not every theme, like I said, has this kind of collection setup. So you kinda wanna look for that. So you can see here we have all items, accessories, men's, We can add, I'm gonna miss, made a mistake here. So this should be actually the men's products. So in this case, let's go for this image to be Men's rather. And then let's change this one, which is not even I mean, we could do accessories, I might as well remove it, but, you know, in this case, we could go with accessories and we'll just make it an image. We can go with women's here and select an image also. So select this one. And for fun, last one which has shoes, we could change that up into, let's say t-shirts, right? So these are not necessarily different, different ones that I recommend. Just because, you know, you're going to want to have it set up a little bit more cleanly. And just what I mean by that is just have, you know, photos that actually fit the image type size, right? The 460 by 560. So it looks a little bit cleaner. The text, you're going to want to have it all uniform in terms of color, right? So it has to be if you're going to do it all wipe, keep it all white. If you're gonna do, you know, whatever it might be if you're gonna do black, keep it all black, right? So in this case I'm going all white. So you can see here, White, White is the things that were going with. We can change the link. So if I just scroll up, we have all items, we have accessories. I'll leave the accessories where it is. Let's have a collection here for let's say not, don't know. For the men's, let's go with men's bottoms maybe. And like I said, these don't match, but you do want to make them match if you're gonna go with this route. And let's add links here to, you know, collections of whatever, whatever it might be. So Collection women's bottoms, Something like that. Let's hit save. In my case, like I said, and I said this earlier, I'm not going to be going with this setup for my kinda store design. I don't think it takes up to just the cleanliness of it. So I'm gonna go with style for style for is by far my favorite for this specific one. Now that's not recommended to everybody. You know, you guys might like style three more than UX style for you might extend a one. It just depends on who you are and what you like, right? I do believe that style for and style three will lead to better conversions just because you have an option to view all the different situations here, like men's clothing for men, for women, whatever. But like I said, kind of up to you what you wanna do. And it's edited the same way. So if we go to Theme settings, it's the same thing, right? We edit instead of all products, who will say all are products, right? Instead of clothing, it will say, let's say men's, right? For, instead of four man, it will say women's. Instead of four women, we could just take that out completely. Accessories. We can take that out completely also new arrivals, let's get rid of that. Or actually, you know, we might as well keep new arrivals, but I'll move it up. New arrivals. We can add sales, let's say. Right, so Sale. Or clearance. Clearance, sounds better. Clearance, right? Okay, and maybe we can add just some collections here. So collections, I'll add all products for clearance for the new arrivals. I'll have a collection that might be maybe like browse or something like that for women's, we're going to have just like all women's products. So let's click on women's and men's. Let's get rid of what we currently have. And let's go to men's. So Mendel's right there. And now that it's all there, we have our background color. We can change our background color to like a pure white, kinda how the rest of the pages so that it blends in. And overall, I think that looks pretty decent. The text will be blacked, which looks cleaner and my opinion. And yeah, I think that looks over all pretty decent. The only way to edit this orange color we can edit in this theme settings like the overall theme settings. So from collection page we go theme settings. But let's just go ahead and wait for this to reload and see our new design. This, I'm really excited to get rid of this little bar here. And let me just go here and just preview the website. And this was our old look. So I kept this old look for a reason. And let's go to shop now. And we can see here, it's designed a little bit better, so it looks a little bit cleaner overall. And these are, like I said, all products we have Whitman's, so will take us to the men's, right? You can see how fast that is two, it's nothing like the way you edit the theme, right? New arrivals. So you see how everything just load so quick and clearance. Alright, so wherever couldn't section. So there's a lot there's a lot that's that's that needs to be addressed. Right? So let's go ahead and go back to our collections page. We noticed that there's this empty image here. This is a sidebar stuff. So there's a lot of things we can edit. And there's just, I mean, there's just so much, right? So we can There's collection banner, modern. So what does this mean? So if you want to enable it, right, there's going to be some things that you want to take into consideration. The Whitney collection banners guys. There's, there's things that can improve your conversion rates. There are things that take away your conversion rates, right? So if, if I was just to select the image and let's just say they want in 1920 by whatever. So if I was to select this image, or let's just pick a different image for, for the sake of this video, let's just pick this one. Ok. What's hit Select. All right. And by the way, we have a collection sidebar. While we wait for this to load, we might as well just talk about this. Okay? We have a collection sidebar. So Collection sidebars right here, okay? If you're on the product page, it will look differently. But you have sidebar, left-hand side bar, right? I like sidebar left generally. But if it doesn't look as good, we could get rid of that. Like, I don't mind. Let's hit Save, which is preview, how that looks. Should take about a second and we can enable a sticky left sidebar. So basically what that means is stickies wherever you move, you scroll up, scroll down. If you're on a bigger device, you know, it's going to stay there. So in this case it's not sticky so it doesn't move us. But if we enable the sticky sidebar, so to save, right, it's going to move with us. And let's go ahead and go back to our, we can also edit the background here. So if we want like white, let's go to the white, right? Products per page, products per row. There's just so much we can add it. So this is kinda how sticky would look, where this doesn't move, but this does. And I just think that's a little bit cleaner of look. I'm Mike. I said it just looks overall pretty decent. If you want. We could just save this. And we can view like a product, right? And so this is what a normal consumer would do, is they would click on a collections page and they would view a product. And they would also have the filters set up based on kind of what v like. So if you're taking a look at it, so I, all I can see here is the product now something that you're going to want to pay attention to also is right here. So this is the product page, right? Previously I selected that I want a transparent header, right? So in this case, the header is not transparent anymore. I don't know where it is, but it's interfering with the product. So that's gonna make me make more edits. And mean that, hey, I can't have a transparent header. So I'm going to have to go back to other header pages and just remove transparent header. And you can see here it looks much cleaner. And so if I go back to home, right? And I just view are different pages that we have available to us. Right? So let's just give that a second and we click on. So you notice how it is transparent here because this is, like I said, it is Homepage right at her homepage. But if I click on shop now, right? Okay, so leaks cannot be opened inside the editor, it will be opened in a new window, that's fine. So there it is. So it's not transparent necessarily any longer. So hopefully that just make sense to everybody. If I wanted to click on like let's say Shop Now over here should meet, Take me to various different pages. So this is like the collection page and it's the same feature. So this is a sticky sidebar and it doesn't matter what collection it is, it's all uniform throughout. And that's kinda what we, what we needed. In this case. I'm gonna get rid of this. We don't need it. If there's going to be things that kinda way down your business are kinda weigh you down. You don't need it. The configuration. This has to do with everything that the filter, excuse me. You want to enable the filter feature or disable it, enabled sort by. So I love these different features like sort by best-selling sort by a to Z, low price, high price, et cetera. Let's hit Save here just so it kinda reconfigures itself. Okay? And it just has a clean look overall. And we can also move this banner down. So we can, we can do a lot of things here. We can filter our accordion. So we haven't accordion for the, for the Excuse me, for, for the, the sort by, so the filter layout, we can edit kind of how things work in there. There's not going to be too much edits on my end and Matt area. These are the different settings for the filter. So if we have, we have a shop by colorless tags, so we have black with purple, we have whatever. You're going to want to add certain tags to certain products. So the way it would work is let's say this is the surface infinity bra, right? If I just go over here to the product homepage and go to products, alright, and I searched that same bros, so I'm gonna search abroad or search here rather. And I search. Let's see where it does here. Let's take a look. So this is the green one or should be the green room. And you see how it's green. If I add inside my tag, I type in green, right? So you can see here it's tagged now. So let's go ahead and save that. And if we just go to our collections page, let's go back to, and this is how it originally looked, so it doesn't look like this anymore. I'll just reload this page. And so if we just click on women's, right, because it is a woman's product and we just hit the green button. There it is, it's green, right? So all the products kinda have to be tagged in colors if you want to use this. And it will improve conversion rates because like let's say somebody only purchases black clothing, then they're going to be able to click on black and see the list of black. Now, do we have black clothing? We absolutely do well, right? If we go to all products, we have black shirts here, only threes. And why they didn't show up is because they're not tact and that's the only reason, right? So these are things you're going to want to pay attention to when it comes to designing your kind of like your collections page. So keep that in mind. Now, we can do some more edits to the collections page. So let's go back to online store here. And let's hit customize. Alright, and the reason why we're putting so much time and effort into our collections page is because we want it to reposts sales. We wanted, we wanted to repos conversions. We want it to be beneficial to our business, right? So let's just hit here and let's say collection pages. Okay. Now that we're at the collection page, let's just make a quick edit here. Let's go to Theme settings or excuse me, let's go to collection page, then go to Theme Settings. And let's just look at kind of the things that we can offer. So we have a, if you notice here there's a banner here, this is a batter. Why is this better important? If you have something unique to offer to people some kind of discount something, this is where you're going to be placing that image. So in this case, I'm just going to be pasting a random image that we have. So let's say I want to click on this one, right? And hit Save. Let me go ahead and hit Save real quick. So it's going to show up right there now. Is that is this what you want to be putting like a product picture? No. You don't want to be doing that unless these are like all upsells to what's referred to as the main product if you're doing a one product stored. But this case. I would add like a discount or something like that, something that can benefit somebody, right? So this is just a widget, right? So it's a widget tag or would your banner. So this is six, which is a widget banner. If I wanted to add a widget tag, I can do that. I can also add it none. So I can just get rid of this section completely, right? Which is also nice to. And like I said, you can edit all these different tags in different settings by adding, editing the, the settings here. Okay, so there's a lot you can do with that. And just overall, just more things that you can edit and configure. So that's something to pay attention. When you, when you perform these edits, guys, Just be patient because what you're doing here is you're dealing with a lot of stuff and you're consumer wants to make sure that you're giving them the best of their ability. Now to just close off the collections page, let's go to our back here and let's click on footer. We noticed that the footers empty, so we need to add a background. So if you look here when you click on footer, there's not much that you can click on except for like 44 for a one. All those settings for footer, foreign footer one, you go to Theme Settings, right? And you edit those footer settings here. So footer one for the two from three, et cetera. But I don't wanna do that. So let's go to footer for and let's hit theme settings, and let's just select our logo image. So this is the image in this case, right? And it should select, and this is for our logo image, for our footer, we can also change the size of it. So if I wanted to make it smaller and can make it smaller, let's just preview how it looks. Actually like it the way it looks. And now, if we wanted to edit colors, we could do that. All that stuff is available, right, because we're on footer one right now. We'll just go back to here. We'll go to our theme settings. It's all available right here. So footer one and we can add it, like I said, our colors, we can edit kinda how things look. So if I wanted to go to colors, we have our main color, body color, mean color to I can go to Footer six, let's say take a look at what they're offering. I can go to Footer three and see what they're offering in a different style designs. And if I want to actually put these styles to the test, I would have to go to, let me go here. Let me just say my work so far, I would have to go back. Let's go back. And let's go to this the footer section and just edit kinda what we see here. Now, I don't want the color gray, that's just something I want to be clear about. I don't want the color grey. Think it looks a little, you know, just either black I'm okay with going with or just white. So let's test how it looks. And let's change this to white real quick. And let's just see how it works. If it doesn't look good, then, you know, I might just stick with white. Yeah, I think I'll stick with white. So in this case I'll just stick with white here for the background color, and then text will be black so that it looks very clean to me. And what's it save? And that's how you edit your collections page to kind of make it fit what you want and how you want it. So make sure you guys get that done before we continue moving on and building out the rest of the store. 16. Exploring Features, Banners and Blogs: Okay, so in this lesson, we're going to be exploring the different banners and the different tools that we can utilize within the theme to make it look a little bit better and to add a little bit more feature. So just for clarification, we have a hero banner. We have was to split banners that are as a paired couple, right? We have our bestsellers. We can change the tax, we can change the setup of the images. We can change how everything is viewed, things like that. Let's see what else we can add. We have a section, but we can add, so we can add blogged sections. So if you wanted to add blogs sections, we can give it a test. Let's go ahead and add blog version two. Now let's go ahead and add blog version one's compare kind of the way they look. So let's go to blog one, which is what we're staring at now. And let's go ahead and just select a blog. And let's hit news and let's hit Save. So this is blog section, I believe one, which is, let's just place it above number two. So everything that's being highlighted is considered blog section one, right? So this section right here is block section one. So ideally, the way it would work is we would have our list of blogs out like this. And then we'd have an x main blog available right here. And we can change kind of how the text is aligning Center, middle, et cetera. Or we can just edit blog number two. So in this case, select a blog, I'll select News also. And let's see kind of how it looks. And it's actually kind of very similar. You can see here it's got this green almost film around it. And like I said, we can edit this stuff. We can limit the amount of blogs being shown. So in this case, if I wanted to show, for example, no more than two blogs, right? So I could do that. I can actually do that. So I wanted to show, let's say I didn't want to show the category or I just wanted to show the date, just the title, and maybe a button, right, and remove the excerpt. We can do that. So there's a lot of stuff we can do with blogs. Now, I haven't built out in a blogs for this to look good. But if we just hit Save here, we can view how our blogs actually look like. So there's a consumer looking through and they see, oh, I want to read this blog, right? They'll hit the read more button and it will take them to the blog page. Now the reason why I like this is because the blog looks real creative, real nice, right? So you have a blog here, blog post here, two blog posts here. We have article pages, right? We can edit the article pages, we can, and it shows the recent posts. We can do a lot of a lot of different things with, with our blogs. On the right side, we have a right sidebar where people can search for a certain blogs, we can search for certain different texts that come up. We can toggle our blogs through tags, which is crucially important also and helps to SEO. We have our nice header here which looks beautiful. So overall, we, every store in my opinion at least needs blog, every store. And it just looks good. It just looks beautiful and, and, and it gets the job done. Alright, so let's go back to customize here and let's talk about what else we can add other than blocks. 17. Instagram Gallery: Okay, let's talk about Instagram. So you can see here that we have a banner, we have some split banners. The one thing that's left to do that's almost a necessity, is to shore social media, to promote ourselves. And that's going to be done through Instagram, right? And scrim is one of those things that every website or every business kindness should have on their profile page or on their homepage or something like that to promote themselves. Now, we have two options for Instagram to be able to access these two options, just hit add setting, scroll down to in scrim, you'll find it. Now, like I said, not all themes are created equal. Some things might not have those features, but that's like something you wanna pay attention to when selecting your theme. Now, with Instagram, right? There's Instagram version one and version two. I can't actually connect my personal instrument here. And the reason why that I can't do it, but you guys can is because my Instagram is a personal Instagram account. So the first thing you're gonna wanna do is you're going to want to have a business Instagram account. And when you do this here, you're going to add your user ID and your access token. All of these are very, very easy to get. Just search, for example, on Google, search, Instagram user ID. And there's a software right here where you paste in your user ID like this, or excuse me, your user ID. So I already typed it in like this and it says, Fine user. Now it's not going to actually work because it's not a business, Instagram. But if it was a business and scram, it would work and it would come up with the ID for the access token. You would search Instagram, right? Access token generator. And it will show you how to get it within the information. So it with Facebook, they kinda show you how to access the access token. Now with that being said, okay guys, something that we are going to want to do here is we're going to want to see how does an Instagram kinda Gallery look like. And it's actually really simple. So I pulled up the theme demo just to give you an example, would be exact theme that I'm using. And this is kind of their Instagram thing that they have right here. So you can see it is, this is exactly how it looks like. So the, basically the concept is you want to have images and you want to have like a shop it button, right? And this is all created within the instrument. It will preload the images for you. Alright, so in this case, if we go to alpha athletes, their Instagram, so let's go to Instagram here and search Fleet athletics, right? Search alpha, leap. Let's just click on it. This would be their Instagram and all these photos would replace the order for these photos. Okay. So that's what Instagram, like I said, you want to play around with it. There's version one and version two. In this case, we're obviously not going to include it. So we can either hide them or we can just delete them altogether. Right? Now, we can add galleries, but that will be in a whole different conversation, in a different episode of the Course. 18. Exploring Product Look Books: Now let's explore a look books. So if we go to Add section here, there is a section where we can add a look book. So let's say load more and let's scroll down. Let's hit load more. Now, look, books are up there, but I just want to scroll down just so we can see everything that we have available to us. And we have a look book version one, cookbook version two. So I generally don't care which one between the two that you select. I think they're both equally. Very, very nice. So we're going to just select number two for the sake of it, let's hit select here. And basically what we can do is we can add a background image. That's the first thing we can do. Or we can just add different slides to look book. So the first thing that I'm going to do is I'm going to add a slide and you notice there's an image here. It's a 685 by 940. Ideally, you're going to want to have every image the same size. So if I was to select this image here, maybe I would select, go to a new slide. So I'm going to want to go back here and add a new slide and select. And maybe I want this one, right? Ideally, we'd be an image that we haven't used. So in this case we've used this image. So let's go with this one, right? Or maybe even, let's say this one. Or we could select this one and then go back and then add another slide and add, make it this like this one right here. So something like this would be a look book. Now we can actually add what product is invalid book. So the way that would work is we have select product one and we look like, let's say this is the product. Hit Select. And you're gonna see like a little number one on the photo, right? In this case it's their own photo. So let's go back and remove. Let's go to slide one. Let's hit the product. Hit Select, and there we go. So we have a product one here, right? When people click on it, there'll be a little pop-up. Okay. And I'll show you guys how that looks in a minute. This is let's say product number two. So let's scroll down product number two and click on this teacher, right? And let's go back here and go to slide number three and go for product number three and select the product for product number three. So let's just say it's the, this one i here. So you can see here the numbers are pasted on the images. Save. And let's actually preview how this all looks. So let's go to our homepage and it should be already pre-loaded for us. So let's scroll down. Okay, clearly didn't load itself yet, so now it did. So let's go ahead and reload again. And we can see here, there we go, it's loaded in. So we can hit the number one. And you can see here that's a pop-up of the actual product. Another pop up of the product, and another popup with the product. So you can see they match. You want to have the same matching products when you do this, and it's all products that you can select. Now we can edit the text. So if we go back here and let me go here, and we could just edit the text. So instead of spring look book, we could write summer look book and there'll be all in caps. And it doesn't have to be all in caps by the way. Just kinda how you want to set it up in how you want to design it. The description. We can leave the description the way it is or you can edit it, or it can just get rid of it altogether. When it comes to design, something you wanna focus is, you know, it's a very creative kind of sense. If you want to add a background image, we can add one. So if I wanted to add like a photo of, let's say the gym as the background. I can do that. Do I recommend it? Not necessarily. It just, you know, obviously you want to have some kind of background, but you don't want to have a background like this in the next step. So I'm gonna show you how to design a background. 19. Create A Look Book Background: Okay, so what you could see going on here is I'm on Canva and our goal is to create a background for this whole section here on the look book. So ideally like if it's summer, I could, you know, I could have pictures that relate to like a summer look book. In this case, I'm going to write fall because it just makes me feel like this is fall. So something that you want to do is like be a little creative. So something that I like to do and I'll share this with you guys, is I like to go to elements within Canvas and search for something like leaves, right? Or like fall or something like that. And you can see different like photos. A fall. You know, you can add like certain photos kinda like this to your Look Book background. You know, be a little kinda creative with how it looks and just get a little one idea by pulling up like the scene of a, how it would look. We could add different, like I said, different leafs. And we can change the colors of how they look. So we can add like a, an orange right here. And we can make this like a brown, right? So we can make that like a brown. And we can duplicate this image. And we can make it bigger or smaller. And the whole point with this is just, you know, just be creative. That's really the whole concept. Would these backgrounds, you don't have to have it set up a certain way or, you know, designed a certain way. But, you know, people like the customization and having a beautiful website in part of having a really, really interactive and beautiful website is the way it looks, the way it feels, the way designs, you know. We can duplicate these and kinda do different colors. So we could do like a read, write like for like a Redleaf with almost like a, a, a black here. And we can multiply those. And we can handle them different, right? And move them around. And just make something that looks something like that represents fall or just a background that I would personally enjoy. Right? It doesn't have to be the same all throughout. So I can make this one have Be like a yellow leaf, right? We can add more yellow colors. Maybe I like this kind of leaf or this kind of leaf, right? Maybe I wanna make it one piece coming like this and just duplicate those. And just drag, drag around and create like a little animation. Where I got this on. This, like this motivation to do this is I was looking within different theme demos and I saw that they did stuff like this. And I thought, hey, that's like an interactive, cool little thing that you could do for your website. And you know, who wouldn't want to do it if it makes sure website look just a little bit better, right? So something like this, make it a tiny bit smaller and move it to the side. You know, I'm saying so it doesn't have to be the same all the time. So we have run leaves. Alright, something just represents fall. Okay? Or maybe point this one around. And you can see here that looks pretty decent. We can duplicate this over, right? And make it look kinda like that. And just move some stuff here. And then we can just download this. And let's download it as a transparent file. And we don't have downloaded it necessarily as a transparent, but it's really up to you. And let's just drag it and drop it right here. Let's just see how beautiful it may look. So there you go. Look how clean that looks. You know, it looks really, really nice. And depending on what device size you might have, if you're on mobile, the look book is going to look a little bit differently. See, now we didn't create the mobile settings yet, but we'll work into that just a few minutes. And I so clearly looks really, really good. So let's move on to our next aspect. 20. Branding, Collections, FAQ's and Galleries: Okay, so one of the next aspects of things that we can talk about is the brand feature within the theme, right? And this is not just this theme. Other themes have this too. And the brand features a place where you can kinda showcase within your web design the ideal brand that you encompass or that you have something that you can showcase. A place to do that is right here. So that's kinda like the way it looks. You can do big, very creative with this. This is not something that I personally use in my designs, but you can utilize it in yours. You know, if you have different benefits to your store, like free shipping or fast shipping or a quality guarantee of some sort. This is a place where you can make any kind of those promises, you know, by just adding the little icons, right? So is this something that I would personally use? Probably not. But, you know, if that's something that you guys wanna do, now you know how to do it, right? We can take a look at some collections. So basically the way collections are presented is a little bit differently and every situation is a little bit different. So let's go ahead and add each collection feature. So we have collections sub one, collection, sub2, collection, sub three, collections of five. And let's go to collection sub version one or version four. And let's go to another one of collection sub one. Okay, so this should be good. Alright, now, that's a whole lot on our store. It hasn't loaded yet. So what are we going to do is I'm just going to hit Save, ok, and just wait for this to Save. And then we're going to get deep into like editing it and taking, taking a look at what the features can provide a so now that it's all loaded, this looks like a whole lot of nonsense. So let's go ahead and take a look at what it really looks like. So we can select collections to promote. So if I want to select like the broads collection, right? And hit select, That's a collection that I can technically promote. Alright, if I want to select another collection, let's say leggings. And let's say one more selection of like let's pick another woman's products. So let's pick swimmer. Ok. We have three collections there. Alright, let's go back. Now. We can add like, you know, bread crumbs and things like that or, you know, but let's just not even worry about that. Our analysis hit Save. Ok. Let's just wait for that to load. It will take a, take a minute right there because that's a lot of content. But what you're seeing here is that it's, it's, it's still gray, like it doesn't, you know, doesn't change. But the reason why it's not changing is because we don't have images for the specific collections. Okay? We're going to want to add images for the collection that we've designed. Alright, so we created a little focus or focal point for our collections. Let's say I want to have this background and this is just for, like I said, experimentation purposes for me to go ahead and just describe how fingers kinda look like, right? So you have this little banner, right? You're going to want to add a banner and you have the products underneath it. Now, why isn't anything showing up? Well, there's two reasons. Number one, it hasn't loaded yet, and number two. We haven't added images to these specific collection, so let's just give it a minute for to save, right? And let's go ahead and just preview the actual webpage. Make all over again. Alright. See how things change, right? And you can see here it's the same concept. So what we're going to have to do is this 55558 by 700 is where we can add images. Now, you can see here, there's no place to Adam here. Like if I select here, there's no place to Adam here. But what I can do is I can go and hit edit collection, right? And with this edit collection, alright, we'll pull up the collection. We need to add a collection image. So I'm like We've had earlier different collection images so we can add a collection image for each section. Let's hit Save. All right, let's go back to all the collections. We have. V. What was the other collections that we discussed? We had Bras, we had swimmer. So let's go to somewhere. And let's add a picture of, let's, let's, let's do it this way. Let's just add some default images. And of course, these are not the images that we've necessarily use, but you know, this, this does work well enough for us. And let's just reload this, kinda prepare it. So you can see here, it's kinda like a focal point. You see what I'm saying? So is this something that I would necessarily do? Probably not, you know, just for the sake of design. I don't think I would make it bad. Important on the website where it needs to have a full page, kinda the way it is. Are there moments that you would have something like that maybe, you know, I'm saying like leggings, let's say here. And sometimes it does change once you have all the images. But let's just say we go with this image for the leggings. And let's hit save. And let's just refresh this again. You know, it's obviously ideal too. I mean, you could use it. You just have to be creative as to how you would utilize something like this. Clearly, it's not something that I would use and I've kind of explained that before. But like I said, you know, do whatever floats your boat when it comes to design, is this something that I would use? Probably not. So I'll get rid of these collections. You can, you can show them off. And different collections have different benefits by the way. So, you know, if you can, you know, you might want to add three collections per row, for example. And it will change the look entirely. So it's not necessarily, it has to be one full page. It could be something like this, right? So it's up to you kind of how you want to set it up. It's not like it's required to have a certain setup, but we can, just for fun sake, I can show you guys how it looks for all three. So let me select the same ones here. We have bronze. We have, let's go back. We have swim where? Let me select that. This is the next version of the collection, spotlight. Alright. And we have one more, we have lagging. So that's three right there. And we can make this setting of like let's say three per row. So it looks similar. So you can see here, it's a little bit different. It looks similar, but it's not. Let's go to collection number five. Let's do the same thing. Right? So browse. Let's go back here. Let's select three collections. We have leggings and we have swimmer. Right? So this is similar, right? You can see here they're all kind of similar depending on the design, but there are certain designs that I would go with. Certain designs that I wouldn't. This is typically something that I would use maybe once in a while. You know, it's not something that I would do all the time necessarily. But the benefit is it will take you to the actual collection that it correlates with, which is a benefit design. It's kind of up to you how you kinda want to set it up. But let's go back and customize here. Let's just make sure that's not available on our website any longer. Okay, it is. So we might as well get rid of them. So remove, sort of move. So now that you guys know how to do this, the good news is that you can kinda do it whenever you want. So that's the good news, right? So we'll go ahead and just remove that too. Even though it does look nice, but we're going to remove it. Some other features guys is we can add an about us section. And like I said, I mean, it's kind of up to you to add this about us section. It's not something that I would do. What you guys are seeing is different features that we can have. We can add, you know, a frequently asked questions page on the actual checkout page, right? And we can edit the frequently asked questions. We could do a lot so frequently asked questions on the left, right? So these are all the questions that are occurring. We can select a background, we can disable it to. So something like this. And that's basically, I mean, that's something I would include in my homepage. We can include a few more other things like a map. We haven't a gallery grid. Gallery grids are really, really nice. I like garlic grids and almost kinda show you guys how those images kinda look. Alright? So important to make all your images roughly the same size for a gallery grid. Alright? So some, some images are clearly, you know, larger than, than others, but you want them to be about the same size so that it has a uniform Look. Let's go ahead and add some more. Let's go ahead and add another photo in the middle here. Let's see what's gonna look nice. Top it all off. Maybe something like this. Alright, so clearly not the same size. Something I will do is I'll edit that size. So maybe maybe make this can't be a different image. Yeah, it could be a different image. So something like that. Maybe, you know, kinda how you want to design it. So yeah, let's see here what we can do. You want to do? Definitely test different images and each gallery, By the way, people can click, view, right, zoom in, zoom out, move on to the next image, zoom in, go to the next one. So that's something to keep in mind. We have the e-mail section here added after the frequently asked questions, which is another feature that you can add, right? So you can remove this I, in terms of design, I would keep this, you know, just for the feature of it. Editing the text pretty, pretty self-explanatory, right? Instead of our photo gallery, maybe take a look and what we offer something like that. And let me just make sure I spelling is right. That's something you may wanna do too. You can move text altogether also. So if you want it gone, you could do that. But in this case, I'm just going to write Gallery, put a period, it save. So there's different things you can do with different features. Overall, if I was to setup the requirements. There are things that you want to have in your Shopify store as requirements, and that's what we're going to, we're going to talk about in the next lesson. 21. What Are Shopify Store Requirements: So amongst all the different features, there's gonna be some things that are going to be required for every store, in every store should have them, right? It's, it's fair to say that every store should have certain requirements, okay? When those requirements, I'm going to lay it out right here, right now, every store needs to have a hero Banner. Every hero banner should have some sort of promotion. 40% off, 20% of buy one, get one free, free shipping, whatever the incentivization is, it should have, right? Every store should have a split banner assuming that the products are not the same, things are being sold. Every, every store should have a split Banner. Every store should also have a product to grid. That is, you know, section so people can select what they want within the product grid. It just adds for more customization. And also blogs should be available, that's optional. But look books are also optional, nice or the things that are going to send your store to the next level. If everything like this is available on the front page, you'll much hard transect converting and adding these different benefits to your store that intrigued people. Now, also, every store should have some kind of dynamic Add to Cart. So if I was to go here, lets say Click on the product, right? And let's say the small size to the cart. You can see here that I can have upsells available to me. And there's also a checkout so I could proceed to checkout and proceed checkout. Lets can take me straight to the checkout. It's not something I want to do obviously. But you get my point here. This is called a one-step checkout. Why does one step check outs actually matter? It's very, very simple. Once the child is going to boost your conversion rate. Because people are, who are wants something truly, they're going to click on the Checkout and they're gonna go straight to the checkout and they're gonna pay. Okay? That's important. Okay, people forget that, but that's important. But overall, this is a course on design. And hopefully by now, especially in the project. After completing the project, you're gonna be ready to design stores on the fly. So it's something that you wanna do is you have banners. Okay? You're, and especially in the project, just read the product explanation. You're going to have a banner, you're gonna have a split banner. You're going to have a product category. What I want you to do is I want you to take screenshots of every single one that you've created and send it in through the project. Okay. Sounds good. Sounds good. So everybody is going to do that. And that's going to be the absolute minimum for everybody store, I get it that some people don't want to be above and beyond with creating and creating frequently asked questions page and things like that. But that's something that everybody should be doing. All right, let's get into it. So good luck with the project. Get the project done submitted. Of course, if you have any questions, feel free to ask them. Alright. See you. 22. How To Create A News Letter Popup: Let's go ahead and talk about how to create a newsletter pop-up. Okay, so the first thing that we wanna do is we wanna go to online store and we want to customize again. Ok. Now, what is a newsletter problem? Newsletter properties, just a little box that pops up that says, you know, some kind of promotional incentivization message in return for an email. And the reason why that whole concept is important, right? And actually just flash the screen. The reason why that whole concept is important in the business world is because when people visit your website, they're not always interested in purchasing your product right away, right? They might be interested in purchasing later, an hour later or a day later. Maybe they're waiting for a special discount, right? There's different types of buyer identities, but at least the newsletter pop-up will allow us to capture the lead and be able to interact with that lead a little bit relater. So if we just go over here to our theme settings, right, and to get to our theme settings, we just go on the bottom. Hit theme settings. There's different settings that we have, okay? And so one of the settings that we're actually looking for guys is the popup, right? And not top bar, but Popup theme right here. And so we can choose to enable it. And we want to add an image for the, for the pop-up. So let's select an image and it can be any image. So it could be an image, let's say like this that just represents the brand. Well maybe even like this might be a little bit better. Let's just go ahead and wait for it to load. Okay. We can even add a logo to it. I I technically don't really add logos to it. I think it looks cleaner without the logo, but you guys can kind of make that decision on your own. And let's just wait for it to load will hit save. And then what we're going to do is all we're gonna do is we're going to just go preview the website. So I'm gonna type in the website domain here. So I'll athlete remixed up my I might even have to up yeah, I'm going to have to do it in a Incognito tab. So alpha leet re-mix dot my shop We'll see a pop-up. There we go. So the pop-up will look kind of like this. It says Join our mailing list. We can add some prerequisite text right there, and the images right here to represent the brand. So why do we do this? Like I said, we do this to capture emails. And now every single person who's watching this knows exactly what to do to create a pop-up. 23. How To Create A Contact Us Page: Since we now know how to create pop-ups, something we need to know how to create a contact us page frequently asked questions page all of these different pages that we discussed before. Well, to do that, we need to go over here to the pages button. Okay? And you can see here that I have no pages created. I have to actually create these pages within Shopify, right? So I'm gonna hit add page here. And what I'm going to do is I'm going to give the page a name. Let's say it's a Contact Us, right? We want a place where our consumers can contact us. And we just go over here to contact us. We can select version one or version two. I'll just select version one, right, and hit Save. And we can actually preview how that looks. So if we view online store, right, boom, there we go. So we can add an, a banner, right? And we can add a contact us. Let's go ahead and take a look at what number two looks like. So to switch from number one to number two, we just select the number to write Contact Us version two. Let's hit save, and let's go ahead and hit preview here. And so this is a little bit different. You can see here there's some text. There is some information here, some names and email messages, and also the banner. So it's up to you kinda what style you like for simplicity. For simplicity purposes, I like version one. It just went a little bit easier. Takes the headache away from the customer about worrying about your location, things like that. And they could just visit your descend you a message right away. 24. How To Create More Custom Pages: Okay, so now that we learn how to create a contact us page, you can see here there's a lot more pages that we can create. And so that's something we're going to actually want to do. So let's go ahead and go back here and let's create a wishlist page. So basically what a wishlist is is if I just go ahead and type in the website here, affiliate remixed my You can see her on the products. There's a little heart button, right? And in order for people to be able to save a product to the wishlist, they have to hit this little heart button. But if I click on it, you can see here it just reloaded the website. And that's because there's no true wishlist page. If there was a wishlist page, it would take me to a place where I can create an account, right? Once I create the account, it will show me my wishlist. So I'm going to have to create a wishlist page. So I'm just going to call this wishlist, alright? And then I select wishlist here and hit save. And there's not much I have to write or I have to do. Everything is built-in for me. If I just go ahead and view page, it will show me what the wishlist page looks like, right? So it says please login register now. So obviously I'm not registered. So there's nothing that's going to be shown. But if I'm consumer and I saved some stuff and I want to come back to it. The wishlist page is going to be there. I tend to find that wish lists are not used as frequently in today's world. However, they are still used, right? So if you're a very big company with millions of traffic every month, there definitely can be used, right? Like if you get a million traffic, you can expect a 40 to 50 thousand people use the wishlist, but they're definitely not used as frequently write back and 050 for people would use wishlist all the time. More than half of your website traffic would be saving wishlist and saving the products for later. Typically, we find that when the brand is a little bit bigger and there's more people that come to that brand. The more the wishlist will be saved. And you write, you want to have your website almost like as a hallmark for people, but they keep coming back to consistently for data, for information, for new products to purchase, and so on. 25. How To Edit Custom Pages: Okay, so something that we wanna do is we want to edit our about us page. And if you notice here in the drop-down, there's not necessarily page for that. So the way we do that is we add the pages to the menu on top, right? So if I'm at the customization location for the theme, we add the pages to the menu on top. And if I wanted to customize something like the About Us page are contact us page or any kind of those tertiary pages, right. That are like Frequently Asked Questions or something like that. I would just click on the actual page. It will show us the data for that page. Click on the contact us button and edited so I can edit this like I can select a background image. So once again, if I want to select, let's say the picture of the gym that I had. So like let's say this is the picture, right? I can have this picture and it will say something like contact us. But ideally, I would want that into be a lighter version of text. So I would have to go into my settings and make those edits, but you can make the changes for the actual Banner. So maybe I need something a little bit light colored. So I don't have too many banners here, but this is just a quick example. So if I clicked on something like this, you can see here it says contact us now this is not necessarily the image I would use unless I'm promoting swimmer. But you guys kind of get the point right. So you don't want to have an image like this because it will come out pixelated, right? These, these photos aren't designed really for that, right? You can see here they're all pixelated. There only pixelated because they're not designed for banner size. They're designed for like photo size, right? So you want to find banner that fits the criteria of the page. So in this case we have black text. And we would have to go into the main typography and colors settings to change that. But, you know, you can choose to, you know, what banner you want, right? So if you want to just remove the banner and select like a free image that they have available. So if I type in Jim Wright and I want something light-colored cannon like this, right? This will work the same way. So I mean, there's, there's a lot of things that we can do. We can make it kinda like this, right? So that even looks better in my opinion, hit save. Okay, and there's not all the time where I would use my own custom image. I mean, they give us free images. But like I said, you could do the same thing and we're gonna go ahead and do that real quick with the about us page just so that everybody can see and that can, everybody can understand. So here we have the About Us banner and we have different like supporting text. And then we have the reasons to shop section. We have an Instagram section. All this stuff is within this button right here. It says about us and we can actually do some editing. So we have the background image once again. So let's say we wanted to use this image for about us, right? And obviously, this is probably not an image I'll use. I'll use something more like a banner of some sort that kinda promotes the brand or something like that. But maybe if I typed in 4k out, this would make it a little more sense. Let's see here. If I click on this image, like I said, you gotta kind of pay attention to what kind of banner you're selecting and make sure that it looks good overall. Let's see here you can edit some text, add some images. So we have a so if you look here for the text, it says Justin, whatever all that stuff is not here. That's actually right here. So service number one, right? And so service number one, service number two, the introduction. So I want to edit the introduction. I would call it, let's say our team or something like that, right? Our team. Maybe changing the description too about us. Right? And then adds, you know, change the text appear which is perfectly fine, and select an image for the team. So maybe it won't be like an image like this. It would be like a team related image with a bunch of people. So let's find the one real quick. So maybe something like this, right? Would like more than one person. And that's actually works really well for stores that have like About Us pages to have more than one person within the photos and just kind of show like the company and the people. You know, there's a lot of things you can do. Maybe I'll get rid of this introduction portion, right? And so yeah, that's really it. Like it's, it's pretty self-explanatory to customize these kinda pages. But nonetheless, if you guys wanna do some customizations, now you know how to on your custom pages.