Transcripts
1. Class Trailer: Build Your Website!: Hello and welcome. In this class, I'm going to show you how you can build your own beautiful websites without any coding knowledge. If you've been wanting to make your own site for yourself or for your small business, but you've been a little bit intimidated by the process, or just not sure where to get started, then you're in the right place. I'm excited to show you just how accessible it is to do yourself. My name is Mimo and I'm an illustrator and a creator, a small business owner. Through my studio, Mimochai, I create picture books and sell my illustration products in-person and online. I also have my own portfolio site where I share some of my freelance client work and helpful resources. I built both of these sites myself and I actually really just enjoy making websites. I thought it would be helpful to show others how they can do it too. I started in high school by coding my own super basic HTML websites for me and my friends. Much later on I was a project lead editor at Drill Design Agency focusing on branding and websites. I now build and maintain my own sites using Shopify and Adobe portfolio. Things have come a long way since my HTML days. You can now build these beautiful fully functioning websites just using templates with no coding knowledge. This class is designed for creators and small business owners, but I believe that anyone who wants to make their own websites will benefit from it. By the end of this class, I hope you'll have a clear idea of how to go about planning for your website and building it yourself. So let's get started.
2. What We'll Learn: I'm so glad that you decided to join this class. I want to quickly note that for those of you who need it, you can always turn on captions by clicking on the button at the bottom of this video. What are we going to learn? I'm going to be showing you my full process of building a website from start to finish. We'll go over the back end of Shopify, I'll show you how to go through the templates to pick out the best one for your needs and we'll learn how to plan, design, and build our website to take advantage of the limitations and strengths of using templates. So this is my site mimochai, and I just want to give you a quick preview to show you what's possible using a Shopify template. I have an e-commerce store, I have a gallery, I have a blog and there's an About Us page and Contact Forms and Newsletters, basically everything that you need to start your own website. I'm going to be focusing on Shopify because that's the platform that I use. I think it's great for e-commerce shops. I find that it's very powerful and a good balance between design and functionality. On the other hand, if you're not selling any product or services, I actually think this is probably overkill. I'm also going to add a class going over my personal portfolio site, which is where I keep my client work and my personal blog posts and resources that I share with people who are on a similar journey as me. I use Adobe portfolio for that, which is a free service that comes with any Creative Cloud subscription. So I also want to be really clear on what this class is not. This isn't going to be your typical website building design development class in the sense that I'm not getting into any coding here. I'm not going to go really deep into UX and UI principles because a lot of that is actually already considered in these templates. Instead, this class is really meant for people who are not trying to build websites full-time but want to create a nice website for their small business, for their freelance practice, or maybe for a project that they're working on. They might be computer savvy, but they are a little bit unsure of how to navigate the back end of a platform or how exactly templates work, or to use modules to your advantage. So this class is going to be created for that. I think that the sites that these templates can build are more than enough for small businesses and freelance creatives. Actually, a lot of the brands that you might love shopping with are actually hosted on Shopify as well. It'll be unfair to compare these sites to say award winning super custom sites because those sites can cost up to seven figures to build and they're built using professional developers and at a minimum, these developers often cost 5-6 figures. On the other hand, I know a lot of small businesses and freelance creatives don't have necessarily the budget to do that, but they do have the capabilities to do that themselves. So I want to show you just how empowering it is to know how to build your own website and to manage it yourself. Another bonus of that is that sometimes when you work with a developer to develop your website, they might build it in a way that's not super easy for you to go on and maintain and manage it yourself down the road so you'll have to keep paying them to do even basic changes in upkeep. On the other hand, if you learn how to do it yourself and you understand how it works on the back end you'll be able to go in and on [inaudible] and change things yourself. If you ever get too busy, you can always teach somebody else how to do it for you. Something about knowing how it works and feeling like you can always go in there and fix it yourself if you need to, is very empowering. So now that we know what we're going to be learning from this class, lets meet in the next lesson where I'll go over our class project. I'll see you there.
3. Your Class Project: I hope that by the end of this class, you will leave with the clear sight plan of how to build your website and you will have no more fear or uncertainty of how to go about doing it yourself. The official class assignment is to create a plan for your website, which is a simple document that'll go over your goals, the purpose of your website, your target audience, and a site outline that goes over the content of what you have in your website framework. This can be done on pencil and paper or a computer, it's up to you. I'll show you what I used, which is just a basic Google Doc, and I'll share it with the class so you can use it as a starting template if you'd like. Then if you're ready, you can go ahead and build out your website, and I hope you'll share it with the class, which would be amazing. But please don't feel like that's the expectation for completing this course because everyone really works at a different pace. Before we get started, I do want to quickly note that Shopify does cost money after their free trial ends. Their monthly plans start at $29 a month, which is the one that I use. I would recommend starting your free trial when you're really ready to start building. For the class example, I'm going to be using a free Shopify template so that everyone can follow along with it, and I'll provide a set of stock photos that you can use as placeholder assets to play around with. I'll then show you the back end of my own website, which uses a paid template, and I'll go over the differences so that you can make a decision for yourself on whether that's worth it or not. The last thing is that I would recommend watching this class ones all the way through so that you can get a lay of the land and then can go back and watch it again more slowly, ideally with the template of your choice open side by side so that you can follow along with me and learn more easily. I really hope that you'll share your site plan with us in the class project stuff. I think it's going to be a great way to get motivation and feedback from others, and I hope it will inspire you to really build out your vision. I'm excited to dive into the actual classes. Let's meet in the next class where we'll get familiar with Shopify.
4. Shopify Overview: Let's take a look at Shopify. I'm going to give you a high-level overview of the layout and show you how to find your way around. You're welcome to also just take a look at their homepage to see the different features that they consider highlights. To get started, you're going to want to start a free trial. You're not going to need to put in any payment information or pick one of the pricing tiers. Just to give you a preview, there are three different Shopify plans, and it goes from basic at $29 a month to regular to advance at 299 a month. I just use the basic Shopify plan and is perfectly fine for my needs. I would say that the main differences are to consider how many staff accounts you need to how many logins you'll need to give to people who help you manage the site, how professional and end up your reports need to be. Some different shipping concerns that you might have and something that might not be super obvious is what volume of orders you have. If you're expecting very high volume orders, and to generate a lot of revenue, it might make sense for you to start at the regular Shopify plan because the credit card payment processing rates are a little bit lower so you might actually make up that difference. I think for most people taking this class, you can just start with the basic plan and upgrade as you grow. Once you start your free trial and enter your information, you should get a dashboard to your homepage that should look like this, its pretty straightforward, but let's take a look around. On the left are all the different navigation tabs that you can see and I would say it's split up into operational tabs up here, and your sales channels down here. Under Home, you'll see a dashboard that will change as your website grows, so when I log in, I see an overview of data such as the visitors to my site that sees sales and different tips that Shopify gives different profiles. For me they tell me things like, this customer has shopped here a lot or people who look at this product tend to look at this product, maybe you want to bundle them. But for now since we're new, it'll give you advice and guidance on how to get started selling online. You can add a product, you can customize your theme, you can connect to your custom domain, and we'll get into all of this in a bit. Instead, let's keep going on to the different tabs. Here's the orders page, as your order start coming in, this is where all the information will live, so you'll be able to see where your customers are, how much they're ordering and be able to sort them and also leave notes to each other. Say there's someone helping you with fulfillment, its nice because you can actually leave notes to that person and they can respond to you as well. There's also a feature where if someone has added something to their cart but never checked out, you'll be able to see that here. I'm sure most of you have probably gotten abandoned checkout emails from shops that you frequent, and this is the same thing. Basically, you can decide whether or not you want to send them. Sometimes it's not that someone just changed their mind, it could be that they were confused with the checkout process or they just got distracted, so it doesn't hurt to send them just a follow up email to make sure that everything was okay. Under Products, this is where you're going to add all of your different products, and so you can import a spreadsheet, say you have all your products or you're living somewhere else, Hudson Etsy sites, or you can add them one by one. The reason why they all live here, is that later on you'll see there's different sales channels and they all connect back to the same fundamental product, and so it really makes it more efficient to keep track of the different products that you have. Under transfers, this is where people who might put their inventory in different places, so say you have some at your office and some at a warehouse, you'll be able to accurately track different transfers that you might need to have. An inventory is more the overview spreadsheet of what's in stock, so you can see how many you have left of things. You can see what's out of stock and you can also even indicate what's coming in. Say, you've ordered a replenishment of something that's going to be here in 30 days. You'll be able to keep track of that in an incoming section separate from what's currently in store. Collections is where you'll be able to group together different products. Things like different categories, you might want to have like tops, bottoms, jackets, and accessories or you might want to have different sales. So 30 percent off, 50 percent off and things like holidays, seasonal collections and things like that. You'll be able to create a collection here and decide whether you want it to be something that's automatically put together such as by product type or by tag, or something that you want to add to manually. Finally, gift cards is something that Shopify actually recently added as a free service to all plans, so that's really great because not only can people buy a gift card when they're not sure what to get their gift recipient. But it my might be somebody who wants to support you, but doesn't really know what they want to get right away. Under Customers, this is where all of your customer data is going to come into. As the orders come in, you'll be able to see the customer information such as where they shop, how many times they order from you, and you'll be able to start to see trends. It's also a nice place to add your customer information that you might have collected from somewhere else, such as maybe information you're collecting at a marketplace that you're selling at or at your store. Analytics is basically steps for your sites, so you'll be able to see things such as your sales, your store sessions, how often your customers are returning, how often those customers are converting, and if this is overwhelming to you or you haven't ever dealt with stats before, don't worry, as your orders and visitors start coming in, it'll be pretty self-explanatory and I think most people really enjoy looking at their stats. Reports are basically the reports that Shopify helps generate for your site based on the data that they collect, and so you can look at things such as sales and acquisitions, your profit margins, customers and their behavior and your finances and of course, as you upgrade your plan though reports get more and more in depth. For me, I find that the basic plans reports are fine. Live View is a place where you can see where your visitors are. So it doesn't share private data information, but you can see right now where are they located, and so I don't really use it very often but I can see for some stores that my guest certain peak traffics from different locations at different times and might help them make some important decisions for their website. Next, under Marketing, this is a place I don't come visit very often because I don't really buy Facebook ads or Google ads and things like that. But for those of you that need to, you'll be able to manage all of that from here if you want. Another great thing is that Shopify email is coming soon, so up until now, most people have had to use third party apps, the most popular is known as Mailchimp. I use one called Omnisend, a lot of people use one called Klaviyo, and so that was always something that you had do separate outside of Shopify. It's just great that they're integrating it with their service and it's going to be free until October 2020 for all plans and after that, there is some cost but it's actually lower than what I pay for with third party apps. So that's really great. Campaigns is where you'll be able to see reports on how well the marketing campaigns that you do set up are performing, and automation is where you can set up some automatic marketing to grow your business.The only one I use is that band and check on emails that I mentioned earlier. But some people do get quite deep into this and this is not a class that we'll get into marketing. But it's just good to know that it's there. Next there's discounts, and so of course you can create discount codes for your sites such as 20 percent off your order or get free shipping, so you'll manage all of that here and you'll be able to see. Just keep track of which ones have expired and which ones are still outstanding, and you can actually make them quite customs. There's an option to decide whether to do discount code or an automatic discounts, and when you go in there, you'll see there's different types. It's like a percentage, a fixed amount, free shipping, buy a jacket get a t-shirt free kind of thing, and you can do all sorts of limitations or specific inputs so that you really create quite accustomed discount code which is nice. Finally, you have your Apps tab, and if you come into the Shopify App store its basically this whole other marketplace. Shopify has some of their own originals, so that's things like printing invoices, creating digital downloads that people can access. But there's also a lot of third party apps and they do everything from managing SEO, to setting up a loyalty rewards program, to handling shopping ads and it gets quite up to date with what's going on. Right now I'm filming this in the middle of the coronavirus quarantine, and there's an app that is helping you set up no contact delivery. There's a lot of really helpful stuff here and some are free, a lot of them are paid but I already said, to start off, don't get overwhelmed or too cut up in here, because it's easy to get tempted to turn all of them on and then it gets overwhelming and messy. Instead, I would just start building out your website and then look in to what you really need to activate over here. Those are the top operational tabs. Let's take a quick look at the sales channel, so the online store is going to be where we're going to spend most of our time in this class, and you can also add other sales channels such as a point of sale, Facebook, Instagram. We won't get into that here, but it's pretty straight forward, it's just connecting to your existing accounts. On the sales channel, this is where you're going to find everything that has to do with your site. Your blog posts, your pages, your navigations, domains, and we'll get into that in a bit. But I want to show you the themes section really quick. This is where we're going to be doing most of our work. You'll pick your theme here. You can browse themes and then you'll customize them here as well. Up here you should see this yellow box that says your online store is password protected. That means that right now if anyone other than you goes to visit your website, they're not going to see your work in progress draft website. They'll see a nice page that just says coming soon and encourages people to sign up for your newsletter so you can let them know when it launches. Under blog posts, this is where you'll set up your blogs if you'd like, so there's not, of course, mandatory to set it up. But it's nice to keep it, incorporate it in your site for SEO purposes, which just means people who are searching for content is better if they go to your own sites blogs so that hopefully they'll go to your website as well. Pages are everything that is other than your home page that lives on your website. So you'll set up your about us page here, any FAQ that you might want to have, a privacy policy, and I'll show you that in a later lesson. Navigation is pretty self-explanatory, but I'll show you how to set that up for your site. Domains is basically what was on your homepage when you first logged in. When I started, I set up my own domain on a separate domain service called hover. But now you can just set it up directly through Shopify, which is nice so you can buy a domain, check if it's live, so I called this one shopmimochai as my test page and let's see if it's available, and it is, so I can buy it directly and the price is competitive to what you want from a third party site, so you might as well just buy it through Shopify if that's easier for you, and you can set that up there. Finally, under Preferences, this is where you can set up things like how you want your online store to show up in search. The title, the meta-description, and also things like the image that your social sharing will pull. Say, your friend shares your website to their Facebook account. They'll usually crawl your website and pull up an image to share as a preview, you can dictate what that images is which is usually safer than depending on what they're going to decide to show, and you can also input your Google Analytics code and your Facebook pixel here. If you don't know what those things are, you can just click on this link right next to them to learn about how to set them up. I won't go too deep into here, but it's basically available there for you if you need. Finally, this password protection section is where you'll be able to disable your password page once you pick a plan and also customize your password for people who you want to show the website to. Then down here in settings, you'll find all your typical settings that you might expect. Your address, your locations, different plans and permissions that you want to give to staff members or people helping you, your billing, enabling gift cards, and checking out different shipping options. We don't need to dive in right now but at the end of this class, when we start finally seeing our website ready for launch, I will show you the things that I think are most important to double-check to make sure they're all in place. If this all seems overwhelming, don't worry. First of all, you can always go up here to the search bar, look for whatever you're having questions about. I put in shipping so they'll show you where you can change shipping settings, and there's also resources on their help center. By clicking on your name, you'll be able to view your account and edit it, and you'll be able to go to the Shopify Help Center, view the community forums, and hire a Shopify expert to help you if you need, and also learn keyboard shortcuts. If you click on that, you'll see all the different shortcuts that you can do with your keyboard. Also as we go along in this class, I'm going to be showing you what you tend to go to more often and which of these tabs you're really not going to go to very often at all. Don't worry about nailing all of this down up front, is just good to get a lay of the land and understand what's going on. Now that we've done that, let's meet in the next lesson where we'll start picking our templates. I'll see you there.
5. Shopify Setup: Picking A Theme: Let's start setting up our site. I recommend watching this class and the next class together because I think they go hand in hand. It's important to see what templates are available so that you can start planning out your sites. But you'll need to know what you want in your site to decide what template is best for you. You don't want to go and plan for something that you can't eventually built. What I think is best is to take a look at the themes that you can use and then go into planning your site, and then go back to solidifying your selection to make sure that it fits within what you need to do. Let's take a look at the themes that are available. If you're not there all ready, you're going to want to navigate back to the online store section under themes. This is what you should see, Debut is the one that comes automatically with your plan. But there's so many more that you can take a look at. You can explore free themes down here and these are all the ones that Shopify offers for free and in general all look great. For me personally, I end up using a paid template because while these are all good to start off with, I ultimately always found that each one had a limitation that I needed to use a paid template for, but I'll go into that more later. For now, I recommend going into the Theme Store because all the free ones are also there next to the paid ones and you'll be able to access more information about the free ones here. When you get into the Theme Store, this is what you'll see, and you'll be able to see what's featured, you can see what's trending. You can see what they recommend and they also let you browse by industry or what you're trying to show or even descriptive or so you really have big beautiful imagery. You might want to check these things out. Take a look around. When you click in you'll be able to see the different styles that are included with each one. This style just means that it's a preset that you can pick one that you like so ideally, you don't have to change too much if you're not familiar with colors and fonts and graphically designed too much, but you can always edit a lot of this stuff in the back-end as well. You can view the demo. These are demo pages that the developers have created. They're not real websites, but they use real products and real photography to show you what's possible with their templates, and I think they're really great to see what you'll be able to build yourself. At first, a lot of these sites might look very similar to you, but as you dive deeper, you'll see that each one has different strengths and weaknesses and you'll want to match up the streams obviously, of the theme that you select with what you really need for the purpose of your website. Another great thing is that at the bottom, all of them show real stores that are using your considered template. I really think it's great to look at these real stores and see what other people have done. You'll see that even with the same theme people have done really different things and you can see what they've decided to use and not use and I just think it's really helpful inspiration. The overall logic of the templates is generally very similar so even if you choose a different template than the one I end up using, you'll be able to follow along and figure it out as well. I took a look at all of them, ones that were available and I decided that I liked this one called Narrative the most. There's a few reasons, I really like the full-width photo at the top. When I went in to look at the demo, I really liked the storytelling capability that it had. I have a pretty small inventory and I'm focused more on illustration so I really like how it's laid out already. It's the closest to what I had in mind. It has some cool features such as this variation selector here. I can go ahead and add theme by clicking up here. For the free themes that you can actually add as many as you want. If you want, you can add them all so you can keep track of them and then delete the ones that you don't want later on. Once you add it here, it will show up in your theme library. Now let's take a look at how these themes work. Under actions, you'll be able to rename it, duplicate it, download the theme file, and edit the code and languages. Which we won't get into too much here, but I'll show you what you need to know to get started. Then this is the one that's live, current theme, obviously. I'm going to just move this one. This just means it'll move it up to my current theme because I want to work on that one. When you click on Customize, this is where you're going to get into your website builder. Again, it's like a world within the world. I think of this as a website workspace within the Shopify dashboard. It also has a left pane and a right pane, but it functions a little bit differently. On the left pane here, think of these all as building blocks, modules that make up your website. On the right side, it's your preview pane of what your website looks like. You might have imagined if you've never used a structure like this before that you might go into here and click on it and start to edit it. But actually you go into these modules to edit all of the texts and the copy. Another thing is when you click on the preview panel and actually is a fully functioning thing so it's not just a graphic. It's helpful because then say, you have a product that you've set up and you click View, you'll actually go to that product and be able to edit it in once it's all set up. Here are all your modules and you can add sections as well. When you click into the Add Section button, you'll be able to see all the different options that are available for your theme and there are actually different for each theme. There's some common ones that are always there, but some themes have more than others, or have different ones. For this one you have blog post and when you click on it, you'll be able to see a preview of what that's going to look like for your website, and that's really great because it might not always be obvious from the description. You can go through and see what you like, and if any of them is speaking to you, you can always click Add and it will be added to your modules. Say you're like, oh, I want to show a map of our store is and I want to add that. That's really great too, is that so now it's live on my preview pane. But say, I change my mind, is no big deal you just go in and then you remove the section. Now it's back to how it was by default. I would say it's very tempting to add as many modules as possible and we'll get into that more in the planning section. But keeping it very focus to your purpose and what you want people to do is going to be important. Staying organized and staying diligent to your plan is going to be very helpful in how to build this out. Within each of these modules, you can click in and you'll be able to edit it. Here in the testimonial section you'll be able to change the text and it happens really quickly like say you want to add this. You can see that that popped up right away. But for now the main thing I want to know is that once this little six dot right here is where you can drag and drop. Say we have a product down here and I just want to move that up to the top. That happens automatically, and it's very easy and intuitive once you get the hang of it, and it's really great. You can't really change things such as, how high this button is in this section or how this is all laid out. But you'll be able to take the blocks themselves and rearrange them as much as you want. It's like a Legos, you can't really change the shape of the blocks that they give you, but you can turn it into whatever you want. Take a look around to see what you're able to build with and what modules you'll be able to work with. Then let's meet in the next lesson. We'll start diving into planning out the content of our site. I'll see you there.
6. Shopify Planning: Making a Site Plan: Let's start talking about our website plan. I think it's easy to get excited to start plugging in your photos and your content, and you're welcome to do that. But then take a break and really start charting out your plan for your website. It'll help you keep you focused and there's a lot of assets that you're going to need to create and it'll help avoid unnecessary work. For our purposes, I want to keep the website outlining very informal and simple. I have a template here that I can show you and share with you so you can use it as you like. But it's going to be a very straightforward documentation. You could go down a whole rabbit hole and take a 10-week course all about UX and UI, principles, and wire-framing. But since this class is meant to be for people who don't necessarily have time to do that. We're already using a template that's designed by professionals that take into account a lot of these best practices lysis plan around the template. Let's think about what content we want to have on the site. Part of the reason why I like working with websites is because I like synthesizing information into outlines and then taking that information and displaying it in a visually appealing way, which is basically what building a website is. Let's first write out what the purpose of your site is and what your goal is with it. Is it first and foremost, an e-commerce site or a portfolio site? It could be both, but you'll want to prioritize it because that's going to dictate what goes at the top versus the bottom. For example, a lot of sites might have the goals or priorities and purposes of selling products, teaching people about their company, and growing their e-mail and use literalists. But each of those is going to have a different party rankings. You can't do all of them the same. For example, for me, my main priority with the site is to tell people what mean with high is about. My second priority is actually to sell people to make it easy for them to buy it and shop for things. Then also third, to be able to share some free content and downloads with them. My first priority is to give people the information they need to know how to follow and engage with us. Remember that, this isn't necessarily the priority order of my studio as a whole. This is my priority for the website. Think about what is a website best used for. Existing customers or existing fans are people that are at the top of my priority for a studio overall. But for a website, I know that people aren't necessarily coming to websites every day anymore. Times have changed their moral and social media now. That's where I'm tending to engage with them more because they're following me there. But a website is a great place to introduce a brand for someone who may have never heard of you or heard of you from someone else and just wants to check out what you're about. That's why teaching people about what the Studio is doing and what it's about is a much higher priority in that case. Then I think about who is my audience. It's nice to list out who your target audiences for your website because that will help guide you on your plan and what to talk about and also how to talk about it and how to present yourself. For me, I break it out into a basic category of new visitors, shoppers and fans. I prioritize it as new visitors first because I think that the homepage will be more educational and to teach people about what it is, if they come find it. Then secondary people who are shopping. This is usually reversed for most e-commerce sites where they want to sell the product first and then tell their story. But I've also seen it the same way that I do, where they want to explain why they started making this product first and really get people to buy into their story before selling them the product. Think about your audience and what's that story that you want to tell. Another helpful exercise when you're thinking about your audiences is to create user personas. This is basically a make, a target audience that you can create and really give them like a personality. That'll help shape some of your planning as well. For example, I've created these three women who represented different audience groups that I've had in mind. You can think about what is their income level or what other things are they interested in, where are they at in life? Are they still in college, are they having a family, are they retired? That actually is something that really helps people think about the user experience they want to provide with their website. Let's collect some info with our goals in mind. Think of your favorite sites that are similar to what you want to do. Don't forget to take a look at the sample websites that Shopify has linked within each sites. That's really helpful to see as well. Then I personally know like this tea brand called Smith Tea and I've purchased from their site before. Even though it's a totally different business than mine, what I like is that they still have that small independent business feel. I've liked how they laid it out and made it very easy to shop, also learn about the company. I liked that they have this free information for recipes down here. I notice that they have their social media newsletter at the bottom. Up at the top, it's very clear that can shop the products and also explore. See their content, that they have their story and Tea School, how to steep. I think that's a very common way that websites are breaking out their content these days. They have their e-commerce section and they have more contents section. When I look for one of my favorite Teas, it's very easy to find is under herbal infusion. I click into it and looking at the product pageant house sites have set that up is also really insightful because you'll want to see, how are people describing their product, what kind of photos are they showing? I really like how they show you a lot more insight into these Teas. Even though I know I'm not going to be able to make it exactly like this website because it's a different site and either as customers, as a different template, I'll still be able to take some of those ideas of, why did I like this experience and try to incorporate that into my planet and template as well. Let's go back to our site plan. To prepare for creating our outline, let's list out all of the content that we know that we're going to want to have. We can keep a really basic right now. Let's do an about us. I know I want to online shop, host the blog. I want to have a section where I can have my books and my illustration. I'll call that a Studio gallery page for now. I want to have a place that I can share free digital downloads and want to be able to link to my social accounts, encourage newsletter sign-ups, and be sure to have a contact form and FAQ and a privacy policy. Yours might be a little bit different depending on what obviously business or service you're having. But this is a good place to start. Once you have your site's content laid out, Let's start organizing that into an outline. This just means a very high level organized list of the content you'll want to have on your site. Think of the top of each list as potentially a nav link and then the bullet points below it as either sub-pages or subsections. Obviously, this isn't going to be separate nav links, but on the homepage I know that I want to cover these sections in my modules. I would actually keep the template you think you'll be using open side-by-side with your working outline. I have the narrative outline open here and it is helpful to have it so that you can be sure that the template will work for what you need to include. When I look at this view demo, I know at the top there's a hero illustration or hero image and I want to include our story up there. Then have a section where I can have a sharp feature and the different sections that people can go to. We now we have a homepage, product pages and non-product pages. How do we want people to navigate in each section and to other sections easily and clearly. Let's start with the homepage. When people arrive at the site, I want to give an overview of what we do and make it easy for people to look around. I want to make sure our stories Brenton Center and that our products are secondary but still important, your priorities might be the opposite. I now want to split up my page into a shop area and an explorer area similar to how Smith Tea head diet. Under Explorer I'll keep all of my content pages such as our books, or blog, or downloads, and information about us. Under shop I'll list all of my high-level categories for now. If you're offering a service, consider how you will want to present that. Finally, don't forget the information that tends to go into a footer, such as newsletter sign-up, link to About Us, Contact Us, Privacy Policy, Store, FAQ and information for people who might want to sell your products in their stores. If you're unsure of what goes into a footer, just go visit some of your favorite web pages and see how they do it. You'll find that most people follow the same format. Just think of your airline as a living document and a guide to keep you focused. The more thought out is upfront, the more efficient your process will be down the road. A quick tip and reminder here is, as you start to edit, I would try to keep as clear and concise as possible. At least for me when I first started building the website, I'm just so tempted to include everything and I want to share everything. I want to make things super complicated and make it really hard to find things for whatever reason. But actually, this time when I was building my new updated website, I've committed myself to keeping everything at a maximum of three levels deep, which means that everything should be able to be reached within two clicks. The reason for that is that, one is it makes it much easier for people to navigate around. It might be really clear to you as someone who knows what your website is about and who has built the website. But when you show it to someone who's never been there, you'll quickly find that most people, first of all, don't spend that much time on websites. Second of all, will quickly leave if they're at all confused or overwhelmed. I would say keep it simple and again, focus on what is your priority and your purpose with this website. Finally, once your outline is looking good, I recommend creating a list of all the products and the categories that you're expecting at launch. This way you can have a realistic view of all the assets and copy you'll need to create. For me, I have a pretty limited product lists, so works well here to show as a simple example. I have books and gift sets, prints, accessories, and the gift card. From here, looking at the website, I can start to build up a list of the assets I know I'll need to create. Obviously, I'll need a logo and I'll need the long images that go into these hero banners and some images to go into these square shaped banners. I can add a video if I would like. You think of a different product gallery images and a gift card, illustration that I might want to put there and different product variations that I want to show. Most of you are probably create a small business owners and you might be a specialist in photography, or illustration, or graphic design. Hopefully, a lot of these assets are already created for you. Even if that's not the case, don't be too overwhelmed by this. First of all, there's a lot of great stock photo options that are available specifically for this purpose. I'll link to some of those resources in the class project description. Taking a look back at my sample outline, how did my thinking of my priorities and my audience affect my site outline? When I was thinking about my site, I knew that I wanted to be filled with illustrations and that it prioritizes that imagery over photographs of products on the homepage. That's exactly what ended up happening. I led with the world rather than the shop. I can always link directly to shop items in my e-mails and social media, my homepage sequence matches my part is of introducing the world and what we're about to a visitor who might not have heard that much about me, which I before. It could also all be reversed depending on your priorities. In fact, that would seem most sight will leave with the products and make sure that the photography really shines. Once you're feeling good about your site plan. Let's be in the next lesson, we'll get back to building adder site. I'll see you there.
7. Shopify Design: Product Pages: I am back on the homepage of our Shopify dashboard and Shopify suggests that we start with adding our first product. I think that this makes sense because as we start to build out our homepage and our theme it's going to be a lot easier. We have at least one product to work off of. Let's start with that. Click on "Add product, " and again, you can always have gone just through "All products" and add a product from there too as well. In "Add product," we'll get started with adding our first one. The example that I'm going to be showing is my book, let's go explore. You'll want to add in your title. When it comes to the product details, you're going to want to think about how much information to give your customers so that they can make a good purchase decision. Think about all of the online shops that you frequent and really look at the product pages that they have to see what type of information they share with you. I would see that usually it's not too long, it's really succinct and it gives you the information that you would need to be able to make a buying decision such as, how big is it, how much does it weigh, what does it feel like, what's the purpose of it? I have a description already made for this, and I'll drop this in here just to give you an example of what that looks like. Here I've started with a quick description of what the product is. Here's actually a place for you to share your brand voice. That just means, what is the personality that you want to convey through the text on your website? For example, I could go much more straightforward with the book descriptions such as: this is an illustrated picture book. Eight inches by eight inches, gold foil details, 50 pages, and that's it. That might actually work for some brands or some businesses that are just more straightforward and want cut to the chase. You don't need necessarily any narrative or a description language. For me personally, I like to speak in a more conversational language and I like to add some explanation narrative behind the purpose of the product and why you might like it. For me, I started off with something more casual by saying, Let's Go Explore as an illustrated picture book that follows a pair of explorers as they navigate through the stages of their journeys. That might be too whimsical or too flowery for some brands, but it's perfect for what I want to do. Next I chose three bullet points. I personally like to put the specs into bullet points, so it's really easy and quick for people to read through. When I think about, someone buying a picture book that they can't hold and see in person, what do they need to know? Because on a website page, that book is going to look the same whether it's five by five inches or 12 by 12 inches. It will help to say this is an eight by eight inch book. I like to highlight details that they won't be able to tell without touching it, such as this is a lay-flat book and it's hardcover. I want to highlight that it has gold foil details, it as a canvas-textured cover. Then you want to share how many pages it has, so 50 pages with fully illustrated and it's a premium matte finish. That helps people really visualize what kind of book this is. Then you can add a little bit more description if you'd like. I just shared a little bit about what this book might be good for, to show that it's really appropriate for all ages and is a good gift. Something else I do is link to related products if it's relevant. I have a digital E-book of Let's Go Explore. I thought it would be handy to list it down here in case someone is interested in the book but isn't ready to buy a physical copy, or maybe they live internationally and just want a simple E-book. Now that we have our title and our description in place, let's go into media. This is where you're going to put all of your product photos. Again, I would look at sites that you frequent and think about what are they showing that helps you decide what to buy, or look at competitors in your space. Really depends on what you're selling to. For example, people who are selling t-shirts, there's pretty much a common set type of pictures that you want to show the front, the back, and maybe a lifestyle photo. If it's something that's a little more complicated or something that's not super easy to understand what it is in a photo you might want to think about, how are other people showing something similar? Or maybe how can I show it in different angles has really clear what it is. For me, a book is pretty straightforward. I've already prepared the files that I need for this. I would say in general, having 5-6 photos is plenty. Having more photos is always helpful, but it starts to get to a point where it's unnecessary and it just creates more work for you. Think about if you decide to do 20 photos for every single product, maybe that might be helpful to some people out there, but the margin of how much more helpful that is over six pictures, is really not worth that extra effort you're going to have to do to create 20 photos for every single product that you have. I definitely want to have the main photo, which is the cover. I want to have a photo of the back, photo of the spines. They can see how thick it is and also it shows a little more detail of the gold foil and the canvas texture and two photos of pictures inside. I'll choose this one. All of those will get uploaded to your media. It is really easy to rearrange them. You just drag and drop. Again, you want to think about the right story to tell. Obviously, I want to start with the cover, and this is also going to be the hero image that shows up in previews and as a first image of any product, so you want to choose the most basic one there. I think for the second one, I want to show the inside of the book. I'm sure people want to know what's the style of the illustration, what can they expect on the inside? So I wanted to highlight that next. Then I want to end with the side spine and the bath. That makes sense. Imagine if you're going into a store and you pick a book, that's how you would experience it. I would look at the cover, I'd open it, I would see the pictures inside and then I would close it and read the back. I think that's a nice set of images for this particular product. We can move on to the next section, which is pricing. This is pretty straightforward. The book is $20 and so put that here. Compare at price is actually how you set up a sale item, so you don't actually mark something on sale, all you do is lower the price and put in the Compare at price and Shopify will automatically mark that as a sale item. For example, I decide to do a half off sale. I want to make this $10 and instead of just putting $10, which will just look like this product was always just $10, you put in $20 as Compare at price. Now it'll show the $20 crossed out within $10 as a new piece. That's just helpful for people to understand this is a special sale, this is a discount and of course, just psychologically people will gravitate towards that more, than if it was just listed as $10. This section down here is actually something that Shopify added a little bit more recently. It's a way for you to internally keep track of how much margin you're making on each product. That just means how much profit are you making on top of how much it cost you to make that particular product. For example, say this book of cost me $5 to make for each one, I would put in $5 here and then Shopify will automatically calculate the margin and the profit I'm making on that. All that information will go into the inventory section that I showed you earlier. What's great about that is that eventually as your products grow and maybe you start to have more team members helping you, you'll be able to see what are my high margin items and which ones are selling really well. That can help start to guide business decision for you. Because of course, you'll want to start focusing on the high-margin, high-volume products, ideally. We can leave that there, and charge tax on this product, it really depends on your state sales tax laws. I'm in California, so we definitely have sales tax, and so I'm to keep charge tax on this product turned on. In that sense, Shopify will automatically calculate the tax that I need to charge my customers because in the settings, I've put in that my store location is in California, so that's actually really helpful. The next section is inventory. It might be a little unnecessary if you're just starting out and say you're an artist out selling just your own prints, you don't necessarily need to have a skew, which is a stock keeping unit or bar codes. But for me personally, I like to be quite organized, and so I recommend at least reading up about it, learning about what it is and then deciding whether it's necessary for where you are in your business right now. It's basically a way for you to keep track of your inventory and as you start to have alerts, and then anyone who has a lot of products knows this, it's just hard to sometimes be accurate if you just used descriptions. I find skews to be really important, say if I'm doing a whole sale order, it's helpful to make sure they have the right skews. Say there's three different pins that they can choose from, they might not describe it in a way that's obvious, so of which one they're talking about, but the skew will basically make it full proof that I'm talking about the right one. Skews are a system that you can create for yourself, whatever works for you, and what I like to do, is to start with the category, so book, and then LGE stands for let's go explore. Then I'll put in the year that I first made it. That's how my skews are setup, and is an easy way for me to understand it, and for me to keep track, and I'll use for the types and quantity of product that I have, I never have to worry about a repeat or overlap. We put this skew in there, and I do have a bar code for that, so let me pull that out of my existing one. I have ISBN for the book, and then I have a couple options down here. Track quantity means that Shopify is going to help track the quantity that I'm selling. I like to always have that turned on. You can input the quantity that you start with. Say I have 500 of these books available, as people buy the books, it'll automatically reduce. As I sell, I'll be able to see how many were sold, and as I get more in, I can adjust it as well. Something I like to do for items that don't necessarily have a starting inventory, say that I make on demand or are decisional downloads that I'm offering for free, I just leave it at zero, and then it just goes into negative. Say I've offered a free download and there's been 200 downloads of those, it'll just shows negative 200, and it's a simple way for me to keep track of how many people have downloaded it. Then this option continue selling when out of stock, this really depends on the situation. I keep continue selling out of stock checked when obviously, for example like downloads, I want it to go into the address, so I always keep this on. But even for physical products, say for Prince, I know that I can get those made quite quickly, so even if I happened to sell out, I still want to let people be able to buy it because I'll be able to still fulfill on time. If you leave it unchecked, basically what happens is when your quantity goes to negative or zero, Shopify will automatically turn that product page to say sold out, and that might be great if that's what you want to do. It's just that sold out, people can't add it to their carts anymore, and usually there's a button that allows them to email you to say, "Please notify me when this item is available again." But that really depends on the situation, like do you want it to show as out of stock or do you want to allow people to keep buying it? Then we get into shipping. Shipping is where you can first identify if it's a physical product. As I mentioned, I have digital downloads and this is always checked off in those cases. Here, you can add some information for your product, which is helpful because it can help calculate shipping rates for your customers. It's something that you will go across all of your products on a add-in, half a pound here. Every time someone buys it, it will always know that it's half a pound, so I don't have to keep putting that there. Then if you ship internationally, you can add your custom's information here, so part of that is pre-filled. For those of you who have never shipped internationally before, it's something that you have to put on your label when you ship it out, and it's actually so much better than how it was before. I remember at some point you still had to go to the post office and fill out this form and attach it to your box to ship it out internationally. Whereas now, you can do it altogether in this one checkout process, and it's just so much easier and quicker, and makes it a lot more seamless actually to ship internationally compared to your domestic customers. For here, I will put in the United States, you can look up these codes for your products, and so there actually is one for children"s books products. I have that already here, so I can put that here and that shows up on the label. Finally, this last part is variance. If say you're selling a shirt and obviously it will come in different sizes and maybe different colors, you can add up to three different variants. You would put in size and just put small, medium, large. What you put here is actually how it's going to show up for your customer in the dropdown, so you know,when you're selecting what size you want. You want to actually spell it out if you prefer to be shown that way, and you just add another option if you want to add colors, and you can go up to another associate material. One more section is the search engine listing preview. Shopify has automatically set up what that looks like. The title is there, the URL is there, and they've pull the description that I've put from the earlier part of this section. But a lot of times, the description that I've put in the product page for when the customer gets to my website, might be different than what I want to show when you're just Googling and it turns up in SEO listing. Here you can customize it. You go to Edit website, SEO by just clicking on that link that was up here, and you can change the page title. For example, on your site say you wanted to say Lost in Space custom t-shirt but on SEO you might want to be a little bit more general, like tee-shirts for people who love space or something like that, and same thing for the description. Here I've thought more from the perspective of a customer who's just gotten to my site and once know more about this product. But for SEO purposes, you may want to think more about what are people searching for? What is someone going to more likely want to click on? You can customize that there, and then finally, you can customize the URL on the handle. They'll pull in your book title or your product title, but you can customize it if say you want it to be shorter or you want it to just be easier for people to type in and remember. I hit save, and congratulations, we've added our first product. At this point, go ahead and get started with adding your first product, if you would like. Again, I've created the set of sample photos that you can use to just at least test it out and make sure you know how to do it in case you don't have your personal product photos yet. Once you're done setting that up, let's meet in the next lesson where we'll continue with the rest of the secondary pages, collections, blogs, and navigation. I'll see you there.
8. Shopify Design: Other Pages: Now that we've set up a product page, I'm going to run through a few of the other secondary elements that you want to set up before we dive into the homepage because it'll make it a lot easier to see what we're doing. Let's get started with Collections. As you'll see here, I've set up a few more products the same way that I set up with the other ones. Let's go into the collections section now by clicking here. I've already set up a few ahead of time so that we can go through a little quicker. Here I've set one collection called Let's Go Explore, and I said the condition is that the tag is equal to Let's Go Explore. When I scroll down here, I'll see that Shopify has automatically set up a few collection items for me already. Clicking into the item, the way they're all connected, is that on the product page itself, I've added a tag Let's Go Explore, and it's the same for all three of these. Another automatic collection I set up is called Gift Sets. Similar to the other one, except now I'm matching by product type. Here, all of these items below are categorized as Gifts Sets, and the difference is, I would say that, product type is obviously by categories. You can set up t-shirts, pants, books, whatever you're selling. Then on tags, you might want to mix and match some of those items that are in different categories. Finally, you can set up a manual collection. Let's create a collection called Best Sellers, and down here, let's click on Manual. Hit Save first, and then now you're going to be able to select the items that you want to put. Let's say I want to do, the Adventure Box, the Care Package, and the Book. Those are our bestsellers and I want to be able to manually update this. Say next month's they're different. Then I want to add something else. There are things that are automatically set up by Shopify too, so you can organize it the way that you want, or you can organize it manually. It's a slight difference in setting up a digital product versus physical products so I wanted to show you that really quickly. Lets go back into our products, and I've started to set one of those up here. Here you see that everything is set up the same. I have a title, description, and the images, and I've set up a tag and a product type. Now I want to know how do I add the actual download to it so people can get it. First you're going to want to download the Digital downloads app from Shopify, and I've already downloaded it here. But all you have to do is go to visit the Shopify App Store, and then search for digital downloads, and it'll be this one. At this point, all you have to do when you get to your product page, you'll see this button option here called the More Actions. Once you have the digital downloads app available, you'll be able to add digital attachment. Click on that, and you'll see a screen that comes up like this. Here, I've already uploaded my PDF, the Teahouse Welcome Kit, and I can always change that here or delete it. Now when people check out with this item, they'll be able to receive the download by e-mail. Let's move on to the next thing. Now that we have products and collections set up, let's set up a simple page that we'll be able to link to it from our home page. A good one to start with is obviously About Us. I have that setup. Let's go to Online Store and click on Pages. You'll see that, had that started here. At these free templates, your sub pages are going to be a lot simpler, and I'm going to show you the difference in the next lesson where I showed you my full site template. This is the About Us page. I've put in an image, and the copy that I have for my site, giving back, and there's a contact form at the bottom. The way to turn on the contact form is down here. Click Page then I won't have a contact form at the bottom, but if you want the contact form on this About Us page. Lets keep it that way. If you've ever set up a blog or anything with a text formatting situation, you'll notice that what you see here is different than what you see when you preview the page. What I recommend is that you put it out the way that you want it to be setup, and just preview it and check that its looking the way you want. Sometimes you'll realize some spacing is off that looks different than what you expect, and you would just go back and fix that here. The way that I'm getting the difference between, this header font, and this paragraph font, is just through the existing formatting sections. Here, you would just highlight, the section you want to be titles, and your theme comes with it's different heading formats. I chose this one because it's a more medium-sized header font, we can also go larger. Let's just quickly set up a page together so you know how it works. I'm going to set up a privacy policy page since that's required in a lot of countries now. I have my privacy policy text here. I'm just going to copy and paste that over. Again, I have my title, I have a text in here. Let's see how that just copying and pasting looks. Let's save it and make sure it's visible. You can also hide it. Say you have a page that you want to launch on a certain date, You can always set a specific published date for that. Let's take a look at how that looks. Overall looks good. Now I have my Privacy Policy page for me. You can keep going and make all the pages that you need up front, or you just set up a couple so you can get started with building on our home page. Let's move on to the next section. Let's set up our first blog. I have one started right here. Again, it's a very similar concept. You have a title, you have your content, you can format the content the same way as you do with pages. There's just a few differences. You can add an excerpt because some of the modules that you'll have on your page will be able to preview some of the post excerpts, and then you can have a featured image for your blog post. Again, you can set the visibility and whether it was published at a specific time, and you can add your author. Say you have several different staff members using the Shopify account, you can say who authored the blog post, and then you can add it to a specific blog, and then you can add tags to it as well. What is nice is that, you can set up several different blogs depending on how many different content pieces you have. Right now, this blog is about our new site. Say I want to set up another blog post, then you go to Manage blogs, and you add a blog here. You can control a few things such as whether comments are allowed or not, and what the title of the blog is. I've set up the second one called Tutorials. Let's go back into blog posts and add a blog post to that tutorials one. Let's do on, "How-to-Use-Your-Welcome Kit," I'll add an image of our welcome kit, and then I will copy and paste some sample text that I've prepared already. Now I have my two blog posts ready as well. Let's move on to the next section. The final thing that I want to set up before we dive into the home page is the Navigation. Let's click on Navigation under Online Store. What you'll start with is the footer menu and the main menu. I've set up a simple one here called Shop, and I'll show you how to do that. You can add a menu, and say you want to add one called Blogs. Let's add one called News. In here, the links can add link to several different things within Shopify. They'll categories things for you by collection, products, pages, blog posts. We know that we set up the blog called, News, and that we set up a blog called Tutorials. You can also search. Last time I clicked into blogs to find it, but you can also look for tutorials and you will find, so we can save that menu. I also want to show you how to make nested menus. Nested menus are the ones where when you open up a menu, you can drop down a sub-menu within it, and you can do that within Shopify as well. Let's go to main menu. I want to call this one Shop, and I want to call another section Explorer. Let's have that link for now be About Us page. To create a sub-menu, all I need to do is do that again. Let's quickly put in our collections. Actually I want to call that, Let's Go Explore, you can shop by category, and then all you do is click and drag. Now that we nested within it. I'm planning on having three nested menus on my homepage. I'm just going to go ahead and populate, shop and explore menus the same way I did for home. As a general matter, I would just be conscious about not making the page levels too deep or nested. The customer should ideally be able to access all of your pages within 2-3 layers. Now I have all the elements we need to build on our home page. Let's be there next lesson and we'll start doing just that. I'll see you there.
9. Shopify Design: Theme Settings: Let's take a look under the hood of our selected beam. I want to continue customizing parse theme. On the homepage, you can go here and select Customize Theme button. Or as always, you can click under the online store on the left hand side, and it will take you to the same place. I have narrative selected and let's hit "Customize". Again, this is the layout of our website workspace, and we have the navigation of our modules here on the left. Let's go under this tab right here at the top on the right called Theme Settings. This is where you can set up all of the rules for your website. Let's take a look at what we can control. Your theme comes with a pre-set style. If you don't feel comfortable with colors and topography, it's totally fine to keep what's there, and that's actually what I'm going to be doing in this class. I think of it as, after all, these themes are designed by professionals. As you saw, each theme comes with four different styles. Ideally, you've picked one that you are ready like, and you don't have to change too much of it if you don't want to. But a lot of people like to obviously customize their colors and their fines and adjust everything, so I want to show you what's possible too. These themes settings are great because what happens is that it's a universal change that makes sure that your page is consistent. Say, you want to change this primary accent color here that affects buttons and special ornaments, it will change that across the board. Back in the day when he had to adjust things manually, then you have to make sure you change that color, for example, on every single button in your site, and there might be some inconsistencies. That's what I really like about these settings. The amount of things that you can customize vary from template to template. In the page template I'll show you, there's a lot more listed here, but this is plenty to get started with. There's many theories on what are good colors to use for websites. For example, a lot of people don't like to use red buttons because they think it'll prevent people from wanting to click on it, because we have this psychological association of red with stop. On the other hand, they think colors like blues and greens are good, because we have a psychological association with those colors, meaning go. But at the same time, in my opinion, you'll see plenty of professional websites breaking the rules either way. I think that you should really test it with your audience to see what works. What I recommend is starting with colors that draw the visitor's eye to the things you want them to do, and also thinking about your own brand colors. If your brand color is red, it might not be wrong to use red as you mean ascent color. On the other hand, if your site is very blues and greens and it matches your brand, then go for that too. I'll provide some simple color parlors in the class description templates so that it can help guide those of you who want a little bit more help in that area. Here, I can see that I can change the accent color. Right now, they have it as red, and then we have the Text and Icon colors, the background colors, and other colors. Taking a quick scroll through here, I don't mind how it's set up and how that looks, but the one thing I actually do, I want to change is going to be this accent colors. I use a lot of blues in my work, so let's just use this blue that's already available and change that. As you'll see, all of those things that used to be red are now blue. Everything else looks good to me for now, so I'm going to click out of here and go into typography. Here, you'll see what I'm able to change. I'm able to change and determine the font for my headings, the body texts, and the global base size of the texts. Let's start at the top. This means that if I want to change to small, you'll see that it updates live. You'll just notice that this text down here just turned into small. In general, I find that designers love smaller type, because maybe it looks cleaner or more modern, but when it comes to usability, you have to think about, say for example, an older audience needs a larger font to see. You will want to help them by using a larger visibility font. I'm going to sake with medium here. You are able to control the fonts and if you quickly click into change here, you'll see that there's a lot of fonts that already come with these templates, and I think it's plenty to get started with. In fact, if you keep scrolling, you'll see that there's just more than you'll need to really choose from. But some people might have a very specific font that they always use with all of their brand work, or a font that they really like and want to use, and it isn't listed in here, you are able to add custom fonts or just need some coding expert help. But I'm going to be choosing the ones that already exist in here just to keep it simple, and I like the ones that they chose. You'll see here that they've combined a serif font for the headings with a sans serif font for their body. That's a very common pairing. Serif for those of you that don't know, it just means that the serif font has the little strokes at the end of the letters. San serifs means it doesn't have that stroke on the end of the letters. People in general associate serif fonts to be more classic, and sans serif fonts to be more modern. Of course, there's exceptions to that rule, but that's generally the sentiment that's associated with each type. The nice thing about combining a serif font for headings, and a sans serif font for body is that it's a nice contrast. It's really something that's up to you on the aesthetic that you want. I like that it has a little bit of a formal feeling for important titles, but a more casual feeling for the body. Some people also reversed that system as well. I think it's really up to you on how you want to play with the vibe of your typography, but the only thing I would stay away from is having two different fonts that look similar. It's better to keep it clean, if you're going to choose a serif font that looks quite modern to just choose one, rather than say, Avenir for the body and then Arial for the headings. It's just a little bit too close to give enough of a contrast and a good vibe. I include a few fun pairing suggestions in the class guide, so that for those of you who want a little bit more help upfront can see what common pairings that are given, the types of fonts that are available to you. If you're a pro with topography, feel free to go wild here and pick the ones that you like. Click on typography, and the next thing that we can see is cart drawer. Here's just a couple options. As I mentioned with different templates, you're going to be able to control different things. But here there's two things. You can do the cart drawer, which just means that when I add a product to my cart, a little pop-up will come out from the side, and I'll show you an example of that live later. The difference is that you've obviously shopped at sites that either take you straight to a cart page, I think Amazon does it that way, and other ones where there's just a little pop-up that comes up. It's up to you what you prefer. Again, there's different theories on how that affects customer behaviors. The Amazon approach funnels you to meet that purchase decision, and makes it really easy and seamless to check out. I personally prefer little drawers that pop out to show that I've added to cart, but allow me to keep browsing really easily. It's up to you what kind of experience you want to give your visitor. Then I like to turn on cart note. That's just a little area for people to add order note. Sometimes, they allow people to customize something, or to add a little note that will handwrite in their message. That's a great place for people to be able to message me or communicate with me through the order notes. In social, you'll be able to customize a social sharing image and a few other things. Let's take a quick look. You can explore free images that they have. They have a bunch of stock photos if you don't have anything yourself. But I do have an image that I would like to use. I will upload the image, and this is my hero banner. I want to make sure that when someone shares my site, this is the image that comes up. I'm able to specify that here, which I really like. Now that's live. Under social staring, you get to say whether or not you want to allow customers to share your products and blog posts on various social networks. Again, that's just a personal preference on whether you want to enable that are not. I see no harm in it, so I'm going to keep it on. Then here is where you're going to input all of your social links. The next section is the favicon. The favicon is just that little icon that shows up next to the tab for your website. Up here on Shopify, you can see the little favicon they have. Then on Instagram you see little Instagram favicon. I think it's a great way to customize and add some branding to your site. If you leave a blank, then it's not going to cause an error, but I like to have something that shows a reflection of my logo. Keep in mind that is very tiny, so if your logo is quite complicated, you might want to create a simplified version of your logo for that. That's exactly what I did. You'll see here my logo files, that I have a full logo file that looks like this, and then a text-only version. But none of those are going to work quite right for the favicon, so I created a separate favicon asset that just has the little house icon in a circle. I can add that here. You'll want to make sure that it has a transparent background if it's not a square. For example, if it wasn't a transparent PNG, behind the circle, you would see a white square, and on this tab, you would see a blue circle in the white square, which is not the look that I want. I have a transparent circle and I can add that here in my favicon, and now it shows up. Last thing we can do under Theme Settings is checkout. Here, under the banner, you can select the background image. That just means at the top, you can add a banner image. For example, I could choose the same one if I would like. Let me just add the things that I know I do have, which is the logo. Again, I've prepared all of these in advance, and I think that's where having that list of assets that you need to create for your website is going to come in handy for you. You can add a background image to your main content area, but I personally like to just leave it as a color. In general, it's good to not have too many distractions on your checkout page, because that's just overwhelms the buyer and people like to keep the checkout process very straightforward and as seamless as possible. I just keep the background color as is, the farm fields I want to keep white, and then in the order summary again, you can add a branding image if you'd like, but I like to keep it clean and simple, so I just use the background color. Finally, you have some topography settings here. I think there's fewer here because of the coding on the backend. You're not going to be able to get as custom of a selection on the code, as you go into the code yourself. I will just pick the one that's closest to what you have. At the bottom, this theme allows you to customize some of the colors in your checkout. In general, I want to keep it the same as what I have in my site. I'm going to leave the blues here and the errors right here. I can see it being different if you choose to prioritize your brand colors on your website, but once you go with the conventional recommendations on your checkout page, say, on your website you have an orange brand, and all your buttons are orange, but on the checkout page, you decide this is a place I'm okay with breaking my brand rules in favor of the convention of using blues and greens to indicate go, and red to indicate error. I'm happy with how this is looking and I will click Save. Once your theme settings are looking good, or at least you have a lay of the land of what you're able to change in the future, let's head back over to the Sections tab. We'll go over the modules for our homepage and start filling that out. I'll see you there.
10. Shopify Design: Homepage: We're finally ready to start building our homepage. Again, I want to emphasize that I'm using the free template called narrative, which is a little different than my actual live website. I'm going to show you how I build something similar to what I have using a free template. But it is going to be a more simplified version of what you would see online. Just to give you a quick preview of what that looks like, here's the site that I built with narrative. It has the hero, the features, the favorites, very similar actually to my live page. Let's start with building out this page. One thing that I want to say about these types of modules is that, the template will come with a set up that is like the preview that you've seen. Of course, it looks very beautiful, but you might not need everything. Just keep in mind that you don't have to use every single thing that they give you and you don't have to do it in the order that they have. Of course, it makes it more simple, especially if you're not comfortable with building websites already, but you'll see that I actually get rid of a lot of the template modules that it comes with, and just kept it really simple. I think a good exercise to do is actually look at some popular sites, so I have everlane.com pulled up. These sites spend a lot of money thinking about the user experience, the interface, and how it's best to encourage people to shop and they get really convenient for them to do so. I've shopped at Everlane over the years and I've noticed that they've switched back and forth between having just a really simple homepage with one call to action versus a longer one that has content, images, things about their brand, and looks like that's where they're back to now. If you want to get started with your website, you can go with something along these lines. I'm going to get started on building up this site. Along the way, I'll make some commentary about what I'm thinking about as I'm building. This top slider has four different images which I don't need, so I'm just going to remove all of those. Now, I can update my copy. Here, I'm going to link to that page that he built. I'm going to try changing the header colors to white so it has a better readability. I'm going to change the button color to a darker gray. A lot of these modules will have image style options. This one allows for a circle, square, and none, and I want none. You'll see that there's many things that you can play with in terms of positioning in what side the image is on. Things you can't change are, for example, that you have this bar, how much the spacing between the images, and the text, and the headers, and the button. One other thing I want to change is this background color, to make it a little darker to match the photo. Next, they have this featured product, I'm going to get rid of, and a video section. I don't have a video section from my site, so I'm going to get rid of that. Next section I want is to highlight our best sellers. Let's pick that best sellers collection we made earlier. We have that collection set up, I want to move it underneath right here. Now, our best seller collection is up, so let's add some text. You can see that white header isn't really working throughout, so let's change that. I'm going to change my headers to the same dark gray color I used for the buttons for a cleaner look. Next, I want to set up a gallery and so I would add a slide show. Now, I'm going to set up the two slides for the slide show. I want to showcase my latest free content here. For example, I can make one about my free welcome kit download and the other one can link to our main blog. I've set up both of these assets beforehand, and I can always update these as we go. I've set up my blog links and my download links. Let's move that up underneath their shop favorites. In the next section, I want to highlight some content. Here, they've talked about a gift card, but I want to showcase our new blog post about the download. Here, I want to use a secondary button style. The way we think about that is just to communicate to readers, or visitors, different hierarchies in information. The primary style may call to attention things you really want them to click and the secondary style can be used for things such as blogs and content pieces that are not as important. Now, I'm just going to go ahead and add some visuals for this highlight. Lastly, I want to end with some links to follow us and join our teahouse. Again, I'm going to add in a section, I'm using the image with text option. I want to match that background color. Again, I'm going to place the title and the text I prepared beforehand. While you're setting up your page, it's fine to leave the placeholder text in the beginning. I would say, just notice the amount of texts used and keep it in mind when you're preparing your own real text to make sure it fits nicely. I'm going to use the same module to build a follower section right below the join us section. This time, I'm going to put the image on the right so it guides the reader's eye and draws a distinction between the two sections. Let's drive back up to the bottom of our content. Let's see how that's looking. This is a good example of something that looks very cool in the template, but I encourage you to constantly toggle to mobile because many of your visitors are going to be busy on mobile, and so you want to make sure that experience is just as good as the desktop experience. When I look at this, that gallery section makes less sense to me because people will have to do some finger gesture to open it, and it might not be super obvious. So I'm going to get rid of that section. Let's talk about these last few items down here that I'm not going to use. Testimonials is something that a lot of people like to use, but for me it's unnecessary. So I'm going to move to that section. It's not that I don't like it or don't want it, it's that I'm thinking about how to best edit down what I have on my homepage. As you've seen on the other pages, such as Everlane and even the tea company, there's a lot of information, but they haven't thrown everything in there. I'm going to pick and choose what I want to show. For me, this comes secondary to the things that I've already chosen to use. Lastly, we're down here in the footer and you can decide which of these things you want to show. I don't like to show payment icon so I turn that off, and I don't need the parallax effect. I do want to show the newsletter sign up, and you can edit that text here. I want to put something that is more in line with my brand voice, so I'll put here. I don't want this color. Let's go to these theme settings, go into colors, I can find the footer background color right here. I'm going to change that to a dark blue. I can change the footer text to white, so that's legible, and I like that a lot better. The last thing I want to show you is that underneath, you'll see the navigation that we set up earlier with all of that nested navigation. In case that was a little bit confusing, I want to quickly show you how you can build a very simple wireframe to think through the modules that you'll need, so you'll know which ones to get rid of and which ones to keep or add. In the sample site plan, I've taken a look at the outline I have and the modules that are available in this template. I built up this very simple table to think through how long of a homepage I want to have, what structure I would like it to look like, and to make sure that I've covered all of the content that I set out to cover. As you'll see, it's very simple blocks. There is a long image and I have the order of content that I would like, the what's new, feature shop items, links to content, highlighting and content item, and lastly, allowing people to know where to join and follow us. By following this structure, I was able to decide that I don't need videos, or testimonials, or that nice looking item that they provided, but actually didn't fit into what I needed. I would recommend that if you're not sure how to play around with your modules, to go back to your outline and create a very simple wireframe of the order and structure content you would like. It's something you can do through Google Docs with a table or just use a pencil and paper. Hopefully, you can start to see that as you build out your pages, your products, your collections, connecting them all to the navigation and setting up your homepage, you'll get to your final product of your finished website. I think that's looking good. In the next class, I'm going to show you my actual website with the paid template that I use and some of the pros and cons and benefits, so that you can make a decision for yourself, whether it's worth it or not for your website. I'll see you there.
11. Shopify Design: Paid Template Comparison: Now I'm going to do a quick tour of my live site and show you a paid template that I use. I'll go over the pros and cons of each and let you decide whether it's worth or not for your site. I have my actual site pulled up here and I would say some of the main differences are the "Nav" at the top. If you take a look at this one, it has this drop-down menu and I can't really control that, I can't change that "Nav" menu to this "Top", which I like more. It also has a much more powerful menu ability where I can add images to it, I can have nesting ones of I would like. For example, I'm sure you've seen on e-commerce sites, on this hovers, you can have these much more complex nested sites and have images as well. That's something that you can do with this paid template. Then having options such as just putting this text on the left here. My image is set up so people can see this middle, and as you saw on this one, it might get a little bit block. Just having that option of saying where I want the text to go is really nice. Here I could have put it in a center, I could have put it on the right side, and there's just a lot more control with this template. There is also things such as deciding how you want it to crop on mobile. A frustrating thing that you might run into is that sometimes you have an image that works great on desktop, but then it looks funny on mobile because it's either too squat or too tall. Having an option to crop it in a way that's mobile-friendly can be really helpful. Another thing that I really like about this template is that I have this module right here that allows me to section out different pages. There isn't this option on the free template, and when I'm looking for the right paid template for myself, I'm actually looking at the modules they offer to me, to make sure that they'll cover my needs. Otherwise, this section, this gallery and these two sections down here are really similar. If you have a pretty simple website and you're just trying to sell some products, have an "About page" and a privacy policy, as I said earlier, the free templates are more than you need. But if you want to create something that's a little bit more customizable and be able to move text around and have a really complex navigation, say because you have a lot of products, then you'll definitely want to consider a paid template because your usage is going to be a little bit greater. Finally, the last thing that makes or breaks the free templates versus paid templates for me, is that I create these sub pages such as this tea house. This is like the about page that we set up under the free template. As you saw in the earlier example, that was a very basic template with just an ability to put an image and text and not really be able to move. With this paid template, I'm able to have modules just like I'm able to have on the homepage. The capability is a little bit more limited, but is exactly what I need to build the pages that I want. Here I've built our page that links to the blog, has some modules to direct people to go get the downloadable and has more call out areas for content that I want to showcase. I've also built this other page that goes over the stories that we have and allows for an image gallery. All of this was built in through modules, you might be able to achieve it through some custom coding on the free templates, but it's a lot easier to do with these existing modules. I would say that those are the main differences between a paid template and a free template. You'll have more options for different modules, you'll have greater control over things like text placement and sizing. You'll just have a much more powerful menu and navigation system, as well as sub-pages development. Whether or not you need all of that really depends on what you need for your website. I hope that's helpful in deciding on what's best for you. Now lets meet in a next class, we'll get our settings finalized and get ready to launch our site. I'll see you there.
12. Shopify Finalize: Settings: We're almost ready to launch. Let's go back into our settings on the dashboard to make sure everything is looking good before we're ready to hit that live button. To navigate back to the dashboard, you'll click on this icon in the top left corner. Now, let's go under settings. I'll quickly go over the things that I think are most important to double-check. Obviously, looked through all the settings, but here are the things that you think are most important to make sure are looking good to you before you go live. Under general, you'll input your store details, your store name, contact email, where you want your customers feel to contact you, your store address, your time, your weight measurements, and your currency. Under payment, you want to make sure that you've turned on everything that you want people to be able to use, and that you've turned off anything that you do not want them to be able to use. I do recommend keeping these accelerated check outs on. People are trying to use Apple Pay and Google Pay a lot more and just makes it easier for them to check out quickly. Next, let's go to checkout. Here, you have some options such as whether to allow customer accounts, how you want to allow them to check out. I personally like to use email check outs, and deciding which parts you want to require from them. In general, I want to get their names and anything that will make sure that their packages arrive with them. Next, let's go to shipping. Here, you can set up your shipping rates. A lot of companies will offer, for example, flat shipping rates within the United States or their home country and maybe calculated international shipping rates. I've personally found that international shipping rates are really expensive and it really varies depending on the country. At the beginning of my store, I had a flat international shipping rate, but now I've updated it so that people calculate it and use a real life cost. I think that also helps make them feel like this is really the cost that we're getting. Because a lot of people might get some sticker shock when they see how much it costs to ship internationally. You can set up your shipping roles there. You can also setup saved packages. For example, I frequently ship in about three different sizes and I can pre-fill that information into Shopify, including the weight so that it automatically calculates that at checkout. There's some different options on packing slips and shipping labels and whether you want to integrate it with any shipping accounts that you might have. You can also set up things like setting up local pickup. That's been really handy given the times. Next, in taxes, you want to make sure that you're set up as according to the rules of wherever you're doing business. I'm in California in the US though, I want to make sure that the right sale's taxes are being collected. Under locations, you'll add in any different shop location, storage locations, or perhaps, if you're selling ads, certain conventions or markets all the time. You'll want to add those. Under notifications, you can have some control over a lot of different types of emails at your customers might receive. Gift cards are quite straightforward, and files are just all the files that you've uploaded over the course of building out your site's sales. I find that I have all of my images here. This section is actually helpful if you want to upload a bunch of files at once. As you saw earlier, I was uploading them one-by-one. If I'm building out something that I know I need all these images, then it's actually much more convenient to come to this file section and just upload it through there. Sales channel is again that similar too. If I just added that plus sign right here, you can add other channels such as Amazon and Facebook. Plans and permissions is going to be where you can add your staff accounts, and billing is something that's, of course, important to make sure that you have set up ahead of time t, to able to enable purchases and even go live. All your billing information must be up-to-date. You'll also be able to see the charges from Shopify on your account here as well. I come here when I'm doing my bookkeeping and accounting to look at the charges, and my income, and the split between. For example, shipping versus the accounts subscription. What's nice is that you want to fill up a refund policy, a privacy policy, terms of service and shipping policy and it seems like a lot of work, but Shopify actually has these templates ready to go. You can just click on this button and you'll have a template filled out and just read through it to make sure that it's in line with what you want to offer. Once your settings are looking good, I would recommend asking a friend or family member to take one final look through your whole site to make sure all the buttons are linking to the right places. It's common that when you're setting up a website and you don't have all your pages or product set up beforehand, you're putting in some placeholder links to things that already exist. By the end of it, you've forgotten which ones are the ones that are live and which ones are the one that are still needing to be updated. Having a fresh pair of eyes to look through that will be really helpful to keep track of. It'll also help surface any questions people might have if they think that it's confusing what to do, when to get to the homepage or you're not sure how to check out. All of those things will be easier to deal with when you have someone else helping you to look through them, and whenever you're ready to launch your site, remember to go back to your preferences under online store and pick a plan to disable the password. Once you're done setting up your settings, let's meet in the final and last class. I'll see you there.
13. Bonus Class: Adobe Portfolio: Welcome to the bonus class. While the rest of this tutorial was focused on Shopify, I did want to take some time to do a walk through of the other platform I use, which is Adobe portfolio. You can find it at portfolio.adobe.com. Adobe portfolio is a great portfolio site option for those of you who already have a Creative Cloud subscription and aren't necessarily looking to sell anything online. I realized that a lot of people don't know it's a free service that comes with their subscription. Its a little more limited than Shopify, but with some fun angling, I think it's perfectly fine for a portfolio site. On the other hand, for those of you who do not already have a Creative Cloud subscription, I don't recommend this as an option. In that case, I would recommend trying something like Cargo Collective, which is a free option or Squarespace, which is a paid option. I actually built my wedding website on Squarespace and I think it does have some pros. If I were to break down the differences of pros and cons between Shopify and Squarespace, I would say that Squarespace is a little cheaper. First of all, then Shopify, if you choose a Snot E-commerce option. It's, existing, templates are a little bit nicer in terms of design. Its great for wedding website, portfolio sites or businesses search as restaurants who just want to give information in a beautiful way but not necessarily sell them any products online. On the other hand, Shopify themes are a lot more customizable in my opinion. I'm able to do a lot more in terms of his E-commerce capability. I do think that Shopify ultimately has the edge if you're trying to build an E-commerce platform. Back to Adobe portfolio. The back-end is a little bit more awkward in how it's setup in my opinion, but it's not hard to get the hang of at all. Let's take a look. When you get started, you'll see a page that prompts you to start a new site and you can create up to five sites. Let's click into here to see where your options are. You'll be prompted to say what you want to start with. You can do a simple welcome page, which is almost like a digital business card or you can do a collection of work, which is what most portfolio sites are. Clicking into that, you'll see that there's 12 free templates that come with Adobe portfolio. They look nice, but unfortunately you can't buy anything else or upload your own, you have to use something in here. I personally found that they were quite limited in terms of what they could do outside of creating project pages and very simple information pages. Other ones I tried, I thought that Lucas was the one that offered the most functionality in terms of being able to let me the customized things a little bit. That's the one that I use. This is my homepage, just do a quick scroll through and I fill all of this using the pages templates right here. I realized that I need to create a page for this class under my skill share tab right here. I thought would be great to use that as an example of how to go about building a page in a portfolio. Going to pages under essentials, and you'll want to click on this plus sign down here, you'll see five options. The page option is the one I use the most often, it's something that I can create project pages for blog costs and information pages. Welcome pages are full screen landing pages. Light room albums are just an ability to connect to your albums in Adobe Light room collection, I'll show you later, but it's basically a collection of sub pages and the links are just direct links that you put in your navigation. Let's click into page cause build your site. I do want to put this under the skills you're tab, but let's see what happens that I put it into navigation. Create the page. You'll see that it's now automatically populated into my nav up here. In this case, I don't want to do that. Click back into pages and it's really easy to drag and drop to organize your navigation. Hover over this hamburger icon on the left and drag it down and just kill share. Now, in the page itself, there are a few ways to get started. Obviously, you have these module options right here, which are just like the modules that you're able to build with in Shopify. You're limited to these 10 options that Adobe has. You'll also have some things you'll be able to adjust on this left-hand panel. Unlike and Shopify, which had the dashboard and then the website workspace within that dashboard, this is the whole system for Adobe portfolio. There's more in just a very simple dashboard up here, we can organize the pages and the nav set up your integrations with your other Adobe programs. You can change the theme very easily here and then adjust the settings. This site wide section right here is like the theme settings in Shopify. You'll be able to adjust your universal backgrounds, colors, and fonts. You'll be able to adjust the website container, which is like width and alignments. Media content styles is where you would edit all of the various types of texts stylings such as headers, sub-headers, paragraphs, captions, et cetera. We can turn on and off your logo. You'll notice that changed right here. Hide your nav or show, and same thing with the footer. Then in this page you'll be able to edit things are specific to this particular page. But let's go ahead and start building it in here. The first thing I want do is turn on the masthead, it just adds the page title to the top and I do that for all of my skill share pages. Then I want to add a hero image to show a preview of the class. I've prepared all the assets that I need ahead of time. Let's add this image as the introductory image. You'll see that the former Modules option block has disappeared. But if you just click on this plus sign, the same 10 options appear. But I'm going to go ahead and click on text. Drop in that text. So I've dropped in a preview of the Shopify platform. What's nice that Adobe has added more recently is an ability to add images or texts to the left and right of an existing image. If you hover over this image, you'll see that these plus signs appear and if you want to add something to the left, obviously you would click here. If you want to add something to the right, you would click on the button on the right. I want to add an image of Adobe portfolio next to it to indicate that I'm going over both of these platforms. They appear side-by-side. There's some alignment tools here. I've made sure that the images I'm using are the same height, but say they weren't, I'll be able to align the images as I like with these three options. This center icon also allows you to click and drag if you would like to align it differently. But for me, I do want it to be centered and even. Some other adjustments you can do is when hover over the image, you can click on this pencil icon and you'll see several options that you can choose from below. Obviously can move the items around on the page. You can reorder the page content itself. That's like in the Shopify, left-hand side panel where you can click and drag. You can add Alt Text. This is great for SEO and accessibility text. You can add links. Trend this image into an active link, which is nice and I'll show you on my homepage how utilized that. We can add a caption so I can click into Shopify. Then for this one, Adobe portfolio. But I really wanted to do was go into width alignment and margins. Clicking into here, I want just to add some breathing space between these two images. We going to change both of those widths to 95 percent of its max. You can also specify by pixels, but for now using percentage. Next, let's add in some more texts that I've prepared, one more image that I wanted to share, which was the backend of my Shopify site, so people can get a preview of that as well. Lastly, I want to add a button. Adobe portfolio, sometimes you edit it directly within this right-hand panel here, and sometimes you edit things on this left-hand panel. That's why, I mean, I sometimes it's a little bit awkward, but once you get the hang of it is quite straightforward. Let's click on "Edit this button" and over here, I would put View class, for example. Maybe on Skill share so people know exactly what they're getting into. For now, we'll put the placeholder link of my teacher profile site, but eventually we want to update that to the real site. I do want it to open in a new Window, and let's adjust that font to something that matches my site better. You can adjust the height and the padding of the buttons. For example, let's change to 50 percent and lower the padding to that. That looks good to me for now. So of course you can keep going and add, for example, a contact form or embed a video. For example, I can embed MySQL shared trailer video here once it's available. But for now, I think that's enough for this page. The next thing I want to show you is how to add gallery images. Keep in mind that here I've added two separate images. The reason I wanted to do that is because I don't want this to be clickable into a gallery. If I did, let me show you what I would do. I'm going to go into another skill share page, the one for my illustrated during class. Because I wanted to add some more examples to the bottom of this page. Here, I'll click on photo grid this time and upload these images that I've prepared and Adobe portfolio uploads all of the images into this grid. Unfortunately, you don't have that much control on how they decide to split it up, such as this rows of three. But you are able to at least reorder the grid if you like. For example, if I wanted to move some of these around, I would just go and here add a grid and you can just click and drag. You can add captions, you can add photos, just click on them. In this case, when you click on them, you'll be able to have as gallery functionality. It's really easy to click left and right on these arrows to view the gallery in a bigger format. That's the difference between images and photo galleries. Let me show you just a few more adjustments that I often use. When I select this text, I'll be able to obviously change the styling. But here is where you would go to adjust the type of text it is. That's where you would go into sub headers to make sure is uniform across your sites. But this makes it easy to make sure that I've applied the font styling in a consistent way. The next thing I want to show you is how to create a collection of pages. So for example, in the Skill shared class, you saw that I have a collection of pages for my main tutorials in my portfolio. I have links to all of my various client projects that I want to share. Under posts, I have all of my blog post where I share resources for free, such as getting started. A lot of people asked me how to get started and drying so I decided to put together this blog posts that covers all of the resources that I like and use. There's a place I can direct people to. To make these collections, click into pages. Then you add a collection and you'll see here how it's setup. You'll see this grid icon and it matches this collection right here. To say I wanted to create a new collection of portraits. I would click on collection add portraits, and then just start adding pages to this collection. If you wanted to duplicate some of your existing projects, for example, its really by going to this gear icon to the right of every project. Click on that and you'll see that there's quite a few options of what you can edit and change and also upload and re-import to be hands, of course, this is an Adobe product and be hands as an Adobe product, it makes it really easy to sink your project's life. What I wanted do is duplicate this page. Then I would just click and drag that copy into portraits. Then of course I can click on it and go and edit it as needed if say was used for a different context. Lastly, if, for example, you want to sell some digital products on your portfolio site, one thing that you could do is attach it to, for example a Gumroad account. You can make this work as a somewhat e-commerce site as well, as long as it's quite limited in what you want to do. I hope that was a helpful peak at Adobe portfolio so you can make a decision on which option is best for your needs.
14. Final Thoughts & Thank You!: We're at the end of the class. We got through so much, and you're amazing for making it all the way through. I hope that you now have a clear idea of how to go about planning for your site, and then building it yourself. I do hope that you'll share your site plans with us in the class project section. You can do that by going to the projects and resources tab under this video on desktop, and clicking on create a project. I can't wait to see what you're going to build. If you liked learning with me, I welcome you to check out my other classes on SkillShare and to follow my teacher profile to be notified of when new classes come out. Until then, thanks so much for joining me and have fun learning.
Mimi Chao, Owner & Illustrator | Mimochai
