Shopify Essentials for Web Developers: From Store Setup to Custom Themes

1. Introduction: Howdy, I'm Kurt Elster, agency owner at Ethercycle, and really full-time Shopify expert. For the last two years, all I've done is work, eat, sleep, breathe, talk about, write about, and make a full-time living from working on the Shopify platform as a Shopify expert. You're probably, either you're a Web designer or Web developer, you're a freelancer in that digital space and maybe you have front-end development skills. HTML, CSS, maybe JavaScript, but you don't necessarily need it. If you have those two skills, then the only thing stopping you from having a successful career on Shopify is knowing the platform. That's what we're going to try and get through with this course. I'm going to help you leapfrog and get to that fastest route to daily profits in the Shopify experts program. Along the way, I'm going to pepper you with some best practices I've learned for setting up great well-converting storage that will help you. Once we've got that down, we're going to dive into themes because as a Shopify expert, you can be a designer, developer, photographer, whatever. But the most common request that store owners have is, can I change x about my theme? So, if you could learn that, it's a great source of revenue. So, that's where we're going to start. To do that, we'll learn the bones of the theme or what goes into a Shopify theme, those pieces. Then, as a result, we're going to be able to do our own theme modifications. That's our final task, that's the stepping stone to later designing and developing your own themes. 2. Getting started with Ecommerce: Shopify started its life as just an online cart. It quickly morphed into, not just a complete platform for e-commerce, this end-to-end solution, but a community as well. Having that community having that growth marketing is what's really driven a lot of Shopify's growth as a great platform. But it's also part of a larger trend. So, there's a couple of things that have powered e-commerce's explosive growth in general. I think first and foremost is mobile. If we look at stats for our online stores, I'd be surprised if any store still exists that has less than at least 50 percent of their traffic is mobile, and especially with stores that have a younger audience, it's going to skew even more toward mobile. That's because we've got these devices with us all the time. These are always on, always connected, always with these devices, phones, tablets and even smartwatches. If you think about it, the last few purchases I made were on my iPhone laying in bed. But what's the thing we do the most with our smartphones? It's probably check Facebook. It is a terrible habit and we probably all do it. When you check Facebook, that's where a lot of brands reach out to us. But a brand telling me to buy something is never going to have one-tenth the same value as a friend. That's what's wonderful about social media. If someone buys a product, they love it, they're proud of it, and they share it on Facebook, I'm much more likely to just click through to a mobile website and purchase it when a friend does it. Social media, combined with mobile, it's become incredible social product discovery engine. In Shopify, all the themes work on mobile. They're all fully responsive and they also integrate incredibly well with Facebook, Twitter, Pinterest. They have these social integrations built into them. So, I think now more than ever, it's an incredibly exciting time to be involved in the e-commerce space. Take a moment and ask yourself, "Why are you here?" You might say it's to learn Shopify, to be a Shopify designer. But I think you're really here because that's a means to an end. I think you're here to make more money, and that's great. Shopify, it's a great way to earn an income as a designer. There are several ways we could do that. The first is the very literal direct way, and that's to sell designs on Shopify. You could spin up your own Shopify store and sell T-shirt designs. There's been some very successful people who have done that. ugmonk.com, for example, is a very good example of that. Or you could sell ebooks. A Book Apart is a great example of that. Once you have that experience doing that, then maybe you could move into selling a Shopify theme. If you build a Shopify theme, you could very realistically make five thousand a month impulsive income from those theme sales. Those themes sales, naturally, those people could reach out to you and become customers when they ask for theme modifications or customizations or support in general. The reason that one is very lucrative is because it's also difficult. Shopify is very strict about the quality of the themes. So you can't just slap something together. It has to be a generally good theme, and that's a good thing. It means there's going to be fewer themes in there for you to compete against, and if you have to choose a theme for a client, an off-the-shelf theme, you can always rest assured knowing that it's going to be of great quality. There's the third way, the traditional model and what we do which is just client work. In client work, you charge whatever you want. You build by the hour or fixed price, fix scope. But then, Shopify gives us a way to supercharge that income. If you are the one who migrates the client to Shopify and you spin up the store for them, they will give you a 20 percent affiliate share of everything the client pays to Shopify. So, whatever they pay, the end of the month you get a 20 percent revenue share on that, PayPal right to you. That goes on forever. So, you set up a store once, build a portfolio of Shopify stores, Shopify clients, and very quickly you discover you're earning hundreds or even thousands of dollars a month from that passive Shopify income on top of your revenue share. So, it's given us all kinds of ways for designers to choose the thing that we're comfortable with and make money doing what we love, which is great design. I've told you why you should embrace Shopify as a designer. But if you're a designer, you may be skeptical of Shopify as a hosting platform, because you want the most freedom. I used to always prefer to have my own server, an FTP, upload all my own files, do whatever I want. So, I need you to know one thing. There are no limitations in Shopify and what you could do with HTML, CSS, JavaScript. Fun and wise, it really is going to be just as flexible as if you had your own server, but without some of the headaches. So, when you're moving to Shopify as a hosting platform, you're no longer worrying about spinning up servers. You don't have to configure a server, worry about the server getting hacked. All that stuff goes away. You no longer have to play that IT role because Shopify is going to take care of it for you. The other thing that scares designers about Shopify is that they may have to learn a new programming language, or maybe you already know a programming language and you don't want to learn another one. That's what's great about Shopify. It uses Liquid. Liquid is incredibly easy to use. It's slightly less powerful than a traditional programming language, but significantly easier. So, it's written in natural language, it's very clear and concise and best of all, it's really well-documented. So, any question you have, you could quickly google it. You'll find Shopify documentation on it, that's what I do. We'll walk through some of those resources. But if you're astute, you may realize, oh no! I'm giving up that web hosting revenue. What you're giving up is the headache of web hosting and you're gaining the affiliate share income. So, as I mentioned before, if we spin up our Shopify partner account, Shopify will pay us 20 percent affiliate share of any revenue from clients we migrate to the Shopify platform. That's what we're going to do next. In a few minutes, we're going to start our own Shopify partner account and I'm going to walk you through that. To do that, I'm going to share my screen with you in the next video. 3. Intro to Your Partner Account: So, the first step when you want to become a Shopify partner: first step as a designer getting involved with Shopify, developer getting involved with Shopify. Whatever you're doing, if you're getting involved with Shopify, you want to start with the Shopify Partner Program. Google Shopify Partner Program or it's shopify.com/partners, couldn't be simpler. When you join the partner program, this isn't a verified thing, you just sign up, there's no real qualification process here. That'll come later if you choose to do the Experts Program. This is a stepping stone to that. So, here, we've got this- this is cool, the video background, how cool is that? But here, they've got this headline. We help freelancers and agencies grow. Hey, that's us. So, we're in the right place. Aside from the revenue share, the access to be able to spin up development stores easily and have all that stuff in one place, they also give you some nice free resources for marketing. They're going to give you logos you can use, marketing materials. There's a great newsletter that they send out. I take material from that all the time. Often, I'll use that as social media FOTA, saves me some time. Your documentation lives here. They'll give you webinars, workshops that happen; and they've reached out, we've organized a few of those. It's fun. And there is a private forum that Shopify runs, and there's some other great unofficial ones out there too that you'll discover along the way. So, and then of course, we get to earn ongoing monthly income which is what we want. You get that 20 percent revenue share, which is nice of any client you bring on, just for getting people to sign up. That's fantastic, and it's forever. And as we discussed before, you can also sell themes, where they'll give you 70 percent; and then, there's also the App Store. An average app revenue is 2000 a month. And depending on where your skill set is, if you're a designer, you probably want to stick to themes and if you're a developer, you'll probably be more comfortable with apps. It's whatever you're comfortable with and maybe you're a unicorn, you could do both. In this, there's plenty of people. It's great. So, all right. Let's head back up. Here we are. You just click join now to join the partner program, and we open our free partner account. Very simple. We got our company name. Here's your referral link, and your referral link is great if you just talk about Shopify anywhere, include your referral link and if you get lucky someone signs up. That's going to be added to your partner account and you'll get that 20 percent revenue share again. We could express our areas of interest. We got a log in info, basic contact info; and the important stuff, our PayPal account so they could pay us. We agree to it, quick become a Shopify partner. It could not be simpler. So, let's look at one. So, here is my store or my Shopify partners dashboard. So, we can see- I do- in client services, I don't have any apps out there, I don't have any themes. I do have affiliated stores. So, you could see I'm getting these regular payments of hundreds of dollars. There's months where- and you get percent like, I believe you get percentages of the total revenue. So, there's a month where I'll get a $500 payment. Our next payments, $362. It's great, really because it's passive. I don't have to do anything to get this income, it just shows up. Then, if you click affiliates, you could see your affiliate history, will show you what stores you've got, where they're at, what's going on with them. It's nice, and you could search for it to find a specific store, see what plan they're on, know what happened to them. It's nice. Then, the important one, development stores. So, development stores are the free stores that you can create for a client or yourself for testing things. I've found that that's the easiest way to kind of on board clients into Shopify. I don't send them the referral link and hope they sign up for it, I go a step further, I create a new development store for them and I say, 'Hey, I made a free account for you. Here's your logging in password." And they can change it, or I add them as a staff member and then make them a store owner, but we'll cover that as well. Then of course, if you have any apps in App Store or themes, you can get access to those here. Here, we've got some some private apps that were messing with. Themes, you could create a theme, put it up here. Settings, this basically just the stuff you set up on your partner thing. You could change it here. And then, what do we got here? Partner resources. Partner resources is nice. It's got documentation, tutorials (that learning center), the liquid cheat sheet. Definitely, if you're doing any programming, I love this thing. I've got this printed out. I keep it on my desk, very helpful. Newsletter's, and for clients. If you're starting out, you want to do some marketing, there's some great, great stuff in here, like the merchant handoff kit. I love this. It really makes you look professional, ghost up further. It's a PDF, so we've got the Shopify quick reference guide. It's PDF. And then, in here, you can go ahead and edit it. So, we could say, "Yours truly, Kurt." And that way it's personalized, looks like it's from you, and then you've to go through and put there URLs in there. Okay. Let's go back to Shopify partners. So, once we create our Shopify partner account and we've gone through all our marketing resources, the first thing we want to do and the thing we're concerned about, for the purposes of the Skillshare course, is setting up a store. Creating a new development store, working with a theme, editing a theme. So, you'd want to create a development store. Very simple. We'll call it our Skillshare demo. It's an online store. You could also do online retail store, which so by default, it's going to have the point of sale system enabled as well as the online store or you can do just pure point of sale. In this case, we're going to stick to just the online store, but if you can master the online store, the point of sale add-on is very simple, very self-explanatory. So, we'll add our password in here, and I miss typed it, to create development store, working; and boom, it's done. That's already spun up, it couldn't be simpler. So, compare that to try and spin up a test store production environment, development environment, staging server, that kind of thing. That's a big pain. This is much much easier. And now that we've done it, we go to our development stores, here it is and we click it. Haha. Type the stuff in, set remember me, log in and boom. So, if you run through that, was that like 90 seconds? You can go from nothing to a Shopify partner with a demo store running. Very simple, or a demo store either for yourself or for a client. It's useful, I like it. So, and we're going to say no, knock that off. There we go. 4. Dev Walkthrough : So, we've got a brand new store, nothing's been set up, and it's going to start walking us through it. It's prompting us to configure our payments, our shipping settings, taxes, adding products, customizing the store, that kind of thing. But once those things go away, they put a lot of useful content in here. So, on the side of the glance, we could see how our store is doing, see a recent activity as to which user has done what, and then, they've got some suggested stuff here, like helpful content. Like, here's some great examples of abandoned cart emails, or here's a chance to show off your products. So, first thing we want is orders. Orders means we're getting paid. You could create an order manually if you took one over the phone, which is a new feature, it's nice. Your first order will show up here. It will also show us abandoned checkouts which is cool. But let's take a look at an example store. So, we've got, this is a client of mine, everest bands, everest horology. So, in here I've searched my name. You could see that once you have a whole bunch of orders, you could sort them by unpaid, unfulfilled, open, all orders. I've searched myself out here, and this was a test order. We've seen it's marked, refunded, and unfulfilled, which makes sense. Then if we open it up, here we've got in here and it's going to show us what the order is for, an overview of the customer, my address, that's my office address leave me alone. Then, you can add a note to the customer, if the customer left a note on the card it will appear there, and then you could tag it. So, if you've got a lot of orders and you want easy ways to search them, you could tag them with things. The example I gave you is wholesale, that's pretty helpful to be able to differentiate your wholesale orders from your regular orders. Let's head back to our demo store. Next thing up, we got products, and products is more than products. We have to add our products in here, we can import them, add them, export them at a glance if you use Shopify to keep track of inventory, which is an option we'll get into, here, you could see all your inventory here. And then more importantly, we have collections. Collections is what Shopify calls categories, and it's one of the distinctions between Shopify and other e-commerce platforms. All the others call them categories, and they allow you to get a little crazy in nest categories. One thing that trips people up, is in Shopify there's no such thing as nested categories or collections. You just create collections and then, there are various ways to organize your navigation. Some people initially feel this is a limitation, I promise it's not, it's going to make for better stories overall, but something to keep in mind. Then, let's look at an example on the live store, head into products and sure enough, it shows us all our products. Here we don't track inventory, but if you did it would show you. We've got type vendor, keeps things very organized, very nice, and then we can export, import products, and for updating them, we could filter them. It's great. Let's head into customers. Customers is great, you can import your old customers if you're moving from something else, or as customers buy, they'll pop in here, or you can add a customer. Then, what's nice about that, is you can filter by, when people check out it will ask them, "Hey, do you want to accept marketing from us?" I recommend defaulting it that, "yes they want to accept marketing from you," and then you can export everyone who accepts marketing in a spreadsheet. Do what you want with it, upload it to Facebook, add it to Mail Chimp using a Mail Chimp integration, all kinds of fun stuff you could do in here. But we're starting to see, it is a full fledged one and done solution. It's everything you need to sell online. Then we have reports. Reports are a feature. It's not in the basic plan, it's not in the cheapest plan, it does appear in the next higher up plan, and depending on the customer, it could be helpful. If you sell one product or you don't sell a lot, maybe you don't need reports. But over time, as people grow, we find that they often want and need those reports. My favorite report, gross sales by product title. I can use it to quickly see what's the most profitable product? What's the best selling product? Then, that will inform advertising, sales, that kind of thing. You can also use it to get report of your sales taxes. If you're selling online, physical goods you've got a file sales tax, this makes it a lot easier. Then, we have discounts. The discounting engine. If you're selling online, at some point you're going to end up offering sales. So, let's try adding a discount code. We can make one up, SHOPIFYRULES, or I kind of like this so that they look unique, generate one, and you could just make random discount codes all day. It'll let you limit them, all kinds of fun settings. It's fairly powerful and there's more than one, you could do discount a fixed amount, discount a percentage, offer free shipping. And then we can also do it for everything, orders over a certain amount. If you say, spend $50, get free shipping, do it on a collection of goods or a specific product, or you could do it for a customer. You could say, hey, we've identified you as a VIP customer, so we're giving you a special discount, or as a way of offering wholesale, it's a good way to do it. We've got our online store. Online store is where stuff specific to your online store live. This confuses people a little bit, it's because there's more than one sales channel going on. I take it as a clear indication that there may be new sales channels out in the future. Right now, the two main ones are Online Store and Point of Sale. That's where stuff really content specific to the website is going to live. Here, we've got our overview. In a live store, the overview would have visitors conversion rate, those fun numbers. But here, we can do to our blog posts live, we could do multiple blogs, we'll talk about that, pages, and here's really where it becomes clear that this is a full content management system. We can add pages, and if we open it up, we can see this wysiwyg editor, we've got SEO options in here, we could set a specific publication date which is cool, you can write a piece of content now, have it published in the future, put things on autopilot which is very nice. And then we may even have different page templates, and we'll dive into that later too. Navigation. This is great, navigation. Navigation in Shopify refers to, let's open up an example store. We've got these guys. Here's our main link list, it's this, and then these drop downs are also link lists, and then if we head down to the footer, this is a link list. It's just a really easy way to think about navigation. In here, you can edit that link list, here's our footer link list, add another one, and look at that. Like we picked collection product, it makes it very easy. We'll say, I want to send it to my blog, and the news blog will call it blog, save. Updating navigation has never been easier. Then we have domains. So, this is one of the very few limitations in the development store. You can't add a domain to the store until you're on a paid plan, you have to upgrade it. And that's okay. It's not a terrible limitation, it really doesn't stop any kind of testing. But let's look at it with everest bands quickly, what it would look like in a live store. You can buy a new domain through Shopify, which makes it extraordinarily easy and it's priced right, $13 a year, very nice, or, you can add a domain name you already own, in which case that's as simple as, you click, add an existing domain, you type it in here. I'm going to do that on a live store. Then it's just two records you have to change in your DNS, one for A name, one for C name, not a big deal. Then we could choose our primary domain name if we want to do redirects, have everything go there, we can set that on or off, and then it also checks this little status guy. It says, "Hey, did you set up DNS right?" and that's nice and convenient, it sets that up in here. What else do we got? So, I said they do multiple sales channel, and sure enough, look at this, we got Pinterest, Facebook in here, this is also where our point of sale would appear. It just breaks it down. It's convenient and nice. App section. Boom, it shows us all installed apps. We could see this particular store has several apps installed. Very common for stores to do apps, and they can be simple things. Klaviyo, all this does is move customers who accept marketing into an email list in Klaviyo. It's great, it's simple, saves a ton of time, or something is fancy, Shipwire, which does order fulfillment, order management for them. Then, of course, there's bad boy, Settings. There's tons of different settings you could play with it, configure the store how you want. I'm not going to run through them all. We'll get to them later. But they're laid out in a simple way. They make sense, and we've got all your contact details here. Let's dive into this guy. Yes, let's close your demo. Boom. Payments, where we choose our payment options, our check out settings which are cool, maybe you want to offer accounts on your store, maybe you don't. You could choose how strict you are when people are checking out. The upgraded plan even has abandoned checkout notification emails built-in, which is very nice. Here, we could choose if people agree to email marketing. I like to set it by default, but the non-evil option is to set it to not agree by default. If you're doing conversion rate tracking on the thank you page, this little snippet gives us a spot to drop that in. It's great. Then here for our checkout page, we've got a refund privacy terms of service policies, and if you don't want to quite think about them, look at that, they generate samples. However, I'm not a lawyer and these are not legal advice, and by using them you agree to a disclaimer from Shopify. But they are a great start. Definitely read them through, rewrite them, consider having them reviewed. But it helps a lot to have those there. Shipping. We could choose our shipping settings here which is phenomenal, and even do real time carrier shipping. I love it. Then let's dive down to Online Store. Online Store, we've just dropped our Google Analytics in here. Since we've got a demo store, we could password protect it; home page title, home page meta description, all kinds of great stuff in here. All right. That's a good demo of our back-end, of our admin store, of the different stuff in there. I ran through it a little quickly because we're going to dive into it more in later sessions, but right now, first step of our store always should be, pick a theme. We've got our online store, themes. By default, they installed an app called Launchpad-Star. It's free, it's perfectly fine, however, there's a 100 plus free and premium themes if we visit the theme store, and one of them could be yours. You could build custom themes, you could pick one of these themes and modify it. You could use a free theme, premium theme, whatever you want to do, you have a lot of options. And there's really not a bad choice in here for themes. They're all pretty good just scrolling through this. You could see they look very nice, and this is where clients need your help. They can be overwhelmed, they don't know what is a good theme, what do I pick, what fits my brand, and then how do I set it up? There's a lot of options. The theme settings can get very fiddly. That's important to pick. A very common popular theme, is parallax, so let's search that out. Here's the results for parallax, and everything comes with, this confuses people, it comes with multiple styles. Parallax comes in four styles. It's not obvious at first glance, if you buy one of the styles, you actually get all four, so you have some variety in there. The themes are very flexible in terms of colors, fonts, layout, content. They're not going to look cookie cutter. As a Shopify expert, I can see and recognize themes fairly often, but for the most part, when you put your own branding into it, they're not going to look identical like that. Next step it's going to be, to pick a theme. 5. Products and Variants: Okay. Let's start with both adding a product and learning a couple technical things that will help us in understanding Shopify. So, we're going to add a product. I'm in my demo admin dashboard products, add a product and it gives us this amazing WYSIWYG editor. So I'm just going to type short sleeve T-shirt and my description is, it's super soft. At this time I'm not going to upload an image just to save us some hassle. Let's set a price on it,19.90. It's a physical product so we'll charge taxes on it. Let's say we print these on demand so we're not going to track inventory. But if we wanted to, we could and we could say we've got 10 and even choose if we want people to be able to back order them or not. But for now we'll say we'll not track inventory. If you want you can add weight, if you want to do weight-based shipping. It's a physical product so it does require shipping and we could do type shirts. This'll help us sort it later and our vendor is going to be Nike. How lucky we are to have Nike. Down here we have tags. The tags can be displayed to the customer but for the most part you use them to sort collections and we'll talk about that a bit. So, we'll say vintage cotton summer. There we go. Save product. We could add another product or view it on our online store. Let's view it in our online store and if we scroll down, we've got our default theme, and sure enough Short Sleeve T-shirt, 20 bucks, add to cart. It's super soft. So like magic, this stuff I entered in the CMS as a product has appeared here. Most people are going to be happy with that. But let's take a quick look at how that magic happened. So we're going to dive into the theme and we're going to pick- we're going straight technical. On our themes page, we've got two options, customize it, preview it or edit HTML/CSS. That's what we're doing. We're going big right away. Let's get down into- so a quick note about themes. Theme.liquid. This is your master file think of these as instead of doing- if you've used includes with PHP, instead of doing like a header footer include, you do everything in theme.liquid and then drop your content into it. Let's see if we could find actually where that happens. Right here. Begin content, and there's our liquid command content for layout. Let's talk about what's happening here. When Shopify renders this page, the SkillShareDemo or this ShirtSleeve T-shirt page, what it does is first run through theme.liquid which contains our header and footer. And then based on the page type, it's going to drop in content for layout. In this case, here now we could see templates, go down to product.liquid. Boom! In here, it's very simple. It's just include product. So, what does that mean? Includes our snippets. If you're familiar with PHP or really any programming language, you've seen includes. So, let's open up our snippets folder, go on down and there's product.liquid. Nested snippets can get confusing but the advantage is that you're using a dry methodology, dry being don't repeat yourself. So, if there's something that you have to use more than once rather than have it all over the place. Just put it in a snippet or use it and then that way you only have one place where you have to maintain and update it. It makes life easy. So, here we have, this is the HTML that gets dropped into our product page and I told you before, there is no limitations on HTML/CSS you could do what you want. But let's figure out how dynamically this is happening. We know it's piecing these snippets together. Let's it's an example. We've got a short sleeve T-shirt. Well, how did that get in there? We have to find a pretty simple thing: product., and what you can see here is that you could use TextMe and GitHub and set up fancy workflows. But actually the standard, the text editor that's included in Shopify it's pretty fantastic. Sure enough, look at that, strong and bold product.title. So, what do you notice about this? We've got these curly braces on either side that tells us that this is liquid, that this is a section of programmatical language that Shopify needs to execute on the server side before it puts it out to the client, to the web browser. So, what's going on here is these are called canonical objects. Product is a canonical object in Shopify. It refers to the page we're on and then it's added dot title. Dot title is a variable on there. A fun way to think of canonical objects or objects in liquid, in Shopify, they're like super variables. These things are variables on steroids, and it makes sense. It's got natural language to it, product. We know what that is, dot title. If I hadn't explained it to you, you could have guessed exactly what this does and it just spits out our product title, short sleeve T-shirt. Simple enough. To prove it as a demo let's just say we'll add language in here, title: save. All right, and let's reverse this. This is a good way to test it. Look, this actually is in the breadcrumb, is what I was looking at. Title shirtsleeve T-shirt. Actually that's a pretty quick way I used to test stuff. Just type some language in there and look for where it changes. You know what? I should have figured that out because look at this. They were helpful commented it, begin breadcrumb and breadcrumb. Let's save that and make sure that make any changes there. Refresh and here it drops it out. So that's another nice thing. If you're editing live like this and your changes happen really quickly. What happens if I screwed up that change? Check this out. Older versions, current, today. Look at that. What they're doing, there's actually built-in versioning right in here. I told you this thing is designer friendly. We've got an online text editor with versioning built into it. That's fantastic. Look at that. There's only great to liquid variable references. So, I'm sure, as you may have suspected, there are more options in products than what I've showed you and to really get a good example of those, we get to have a couple of pictures which is easy. We can drag and drop them and pull them from URL or we're going to add them the old fashioned way. In my downloads, I have two images I have pulled of a black T-shirt and a T-shirt. We're going to upload those and boom! Here they appear. We can edit them, add all text to it. Great for the SEL folks and change the order and whatever the first image is becomes your default image. As far as resizing, any properly set up theme is going to resize those images on the fly for you. So let's see what we got here. Down here is variants. Variants are like product options. In the case of a T-shirt, I would want to pick size and color. So, let's try adding variants. The first we have size, defaults it, great and we've got to add our options. I'm going to say small. They are separated by comma. So soon as your comma just adds it medium, comma L for large, comma. We've got small, medium, large. Then another option, color. In our case we have black and red, and there we've got our options. You could change the price by option. Make sure you have different SKUs or barcodes if you've got some kind of inventory system set up but those are required fields. In our case, they're going to be the same price and the same all the way through. So let's save that and see what happens. It creates really nice table for us and what I like about, it makes it easy to update. So, let's say I wanted to change the prices on just the small T-shirts maybe they costs more to make. So, we select S and look at that. It shows small T-shirts and even have bulk actions. Cool. I could change prices so that I make those 18 bucks. They cost more to make. The 21 bucks now. Boom! Look at that. But there are some cautions with variants. Here we've got small, medium, large, black and red which has resulted in 1, 2, 3, 4, 5, 6 options. You can't have more than 100 options. A hundred is the cap and then it barfs. It will stop you. It won't let you create anymore. Total combinations of things can it have more than 100. So, that's one limitation. Now there are apps and various programming shenanigans you can do to get around it but over the box, that's the limitation. So one thing to keep in mind. In addition to that, we also are limited to four options. So if I want to add another option, I could do material, I want to say cotton save and let's edit options. That's it. I'm sorry, I said it was four. It's three options. You could only do with three options. That's fine. So we have our material in here. Let's look at that how you see it in the online store. See, breaks down into different drop boxes and not all themes do this. You could display them different ways, tell them whatever. But when we change black to red, we change the size or price changes. Cool. When we change black to red, it doesn't change here. There is a way to do that. It's called variant images. So, let's select, our black is default here, let's select red, Bulk action, Update image, click this guy, save. Now watch what happens here. Let's refresh our page. We got good color black, red. Oh, right. That's fantastic. It switches and then of course we'd want to do it for black too. So same deal. Click there, select black, update images. Boom! Then we could see those are very new images and let's test. Black, red, black. It's cool. The advantage here is the customer knows exactly, it confirms to them that they're buying the right thing. Especially if we do fancy stuff, the image or the product may be included in the email, may be included on the cart page and this is just going to reassure them that yes, I'm getting the right product. I selected black, I'm getting a black shirt. It's a nice addition to include in there. 6. Collections: So, once we've added products to our store we need a way to sort through those products. Here's Dodocase. Dodocase has tons of products. If we view all their products at once we get this endless useless thing, 88 pages of products. So, we have to put them into something. You're probably thinking okay, we could put them in categories or Shopify's version of categories are smarter. They're called collections and there's a key point. If you've used other e-commerce platforms when you think of collections you think you can nest them to organize them. Shopify has reinvented that and they call them collections. And you don't nest collections, it's just a logical grouping of products. So, it's a little different and you hear they've got- in the Shopify manual, we talk about collections. They give you a couple examples of how you might do it but a couple of notes. A collection can be sorted manually where you just put products into it which is how you'd expect categories similar to the way categories and other things work, they can be smart. So there's all kinds of ways to arrange it, which is fun and we'll get into that. Products can appear in different collections, it works well. So, let's take a look at Dodocase and see how they did it. Here, Dodocase sells cases for iPhones and iPads and they group them by the device which is smart. But then if we go down to the footer we can see they've also grouped them, here we've got it repeated again. If we go around they've grouped them by materials. So here's leather, wax canvas, a gift guide, a back to school guide. Those are probably landing pages or SEO efforts. But all smart ways to logically group these products depending on how people shop. So, let's take a look at where those live in our admin. If we head to our Shopify admin and go down to products. And here I've imported 10 sample products if you want to use these in testing you can grab the CSV from the GitHub timber. So, we'll quickly look that up so you know what we're talking about and you could follow on. Timber is a framework, it's a demo theme you would use it if you were building custom themes. It's very nice. And if we head down, they've got demo products in here. So, demo stores for a set of demo products to use during development, download the CSV file and import it. And that's what I've done here. So if you want to follow along and do the same, you download that file click import up here and you can add the file and it'll pop up a minute later. But all right. Once we're in products, head down to collections and then here is where collections live. So, now that we've seen and explained what collections do and what they're for, let's try and do some practical examples of it. Here you could see it my inventory I've added some example products so that we have things to sort. We have a collection of shoes, they have different titles and then under type, we've all labeled them "Kicks" we're going to call our shoes "Kicks" and then that way if we start selling socks, we'd call them type socks or shirts type shirts. And then under vendor, they're all Shopify except for the first one is tetes. Now let's head under two collections. So, here we've got front page front page is a default collection. It's used so you can add featured products to the front page of your store and if we click on it, it should be a manual collection. All right, so, it just has you know manual is very traditional very typical. You can add products manually. The only products that appear in it are the ones that have been selected manually since they're featured. And then you could choose how they sort. So, best selling is very cool because it self optimizes so as a product sells better it gets moved to the top of the list and it will keep selling well. Alphabetically ascending descending of course price and date all ascending descending or manually. When we select manually, we get this nice little handle and then we could pick it like that, which makes it easy and then we can also add you know we've got our title and our description and our image. So, let's save that and let's add our own collection. Let's add menu collection. Same deal we'll say Kurt's favorite shoes. All right. I could do manually select products and also it won't say anything until I save. Now I can add my products. So as soon as you click it, you get this nice tool tip it shows you your products or you can filter. If I only want to see the shoes labeled cool pops up in there. So let's add those shoes and two others, there we go. So, you could see it's Ajax, it's dynamic, it's fast, it's very easy super easy for clients to use super easy for you to use. Description, this makes it very easy to make landing pages. You can add your title, add your description. So you could say, "Hey, gift guide for men's shoes gift guide for 2015," add your title, your description, a nice image if the theme supports it. Put your products in there and you've got a landing page. Then again set it to bestselling and we've got a self optimizing landing page. So you know that's very traditional, very typical how you'd expect collections to work in here. But there is a smarter better way to do it. So, let's add another collection. For this we'll say, "Shoes under $200." Then here we'll say our favorite sneakers under $200. All right. Actually, we'll say our favorite kicks under $200. Conditions automatically as the default. Then we have products must match all conditions, any condition. Since we've said it's for shoes under 200. We've got a couple of different variables we could pick here. Title, type, vendor, price, tag, tags are a nice way really to be able to sort products in collections or for customers to see if you display it in the collection. But for the most part I use them just to get fancy easier sorting. We'll dive into another use for tags with filtering compared price, compare price is MSRP, weight, inventory stock, variance title. So, let's do in this case, we said it's under $200, so we'll say price is less than- we have all these great bullion operators under 200. If we click save collection there we go, it's all of our shoes that are under $200. Then we can see it works if you want to test it let's say is greater than 200 save aha! So, they all disappear. So, let's go back to is less than and let's figure out the difference between all or any condition. So let's add we've got product title. We'll change to contains and we'll say awesome, Save. So, what's going on here is it's only going to show the shoes that are titled awesome and are less than $200 versus if we switched it to any condition and hit save. It's going to list all our shoes because all are under 200 and one says awesome. So, it's the difference there. You can make these- you can make yourself crazy. But you can make them pretty complicated and granular. But the advantage here again is it's automatic. So, you don't have to be manually adding products to every single collection. That's helpful as you get into sorting things different ways depending on how people shop. So, you could do if you were selling shirts, you might want to group it by gender men's versus women's. But then also do it by collections. You could say the type of shirt, short sleeve versus long sleeve. The same product would appear in multiple categories and you don't want to have to be- every time you update the inventory, trying to remember to add this to multiple collections and collections, automatic collections makes all that possible. Then of course we could sort here but take a look at how that looks on our live site shows there's the collection's title, the collections description, products appear and then this theme is nice. It supports showing the sort filters they don't all do that but it defaults to the one we've shown here. Okay, so, here we're back in our shoes under $200 collection and if you're astute you may have noticed this new sidebar in here this shop by. So, I'm inside a collection and I could choose to shop by color or material. So, here I'll pick black and I'm still in my collection, but it's only showing black shoes. This is fantastic. It's a great way to be able to sort through products, make life easy. But you know one of the things I mentioned earlier that sometimes bothers people is collections aren't like categories specifically that you can't nest collections, which initially creates issues for people because they're used to these nested collections. But we have a much better option and that's filtering by tag. And here I've switched to supply theme, it's a free theme in the theme store and we'll talk about that later as well. But it has this has a feature built into it. This filter by tag thing. So, let's look at how we set that up. I've got my products in here and you have to come up with a consistent taxonomy you're going to use and you can't just randomly add tags to things because this theme is automatic. It will spit out all of the tags on a product. So, you need to be consistent. So, let's pick our this pair of shoes cool kicks and here it's the shoe. A pretty typical taxonomy I like to use is color material when you're dealing with clothes that's very easy. These shoes they're black. So, I've already tagged them black and they've also got maybe they have gray in them. You could do multiple tags so we could say gray and one of the things that helps with keeping that consistent taxonomy is that Shopify auto suggest stuff for you that you've already used. So, here I can see the shoes are leather. I'm going to start typing my material. Look, leather pops up as a suggestion. Click it and now I can you if I select filter by leather, it's going to pop up. So, let's do save and I go back we'll refresh this page and let's pick leather shoes aha! There are like cool kicks black and red leather which is really nice. It's very helpful. Anytime we can make it easier for customers to drill down to find what they want make it easier on the store owner to be able to have these products sort and appear as great. There's another thing we can do with tags too. Let's see collections. So, let's say I wanted to make a collection called leather shoes leather shoes we'll call it leather shoes and we'll say sneakers made with genuine leather. Now we're going to say automatically select products based on conditions because it's a smart collection. Products must match we'll do all conditions though since we're only choosing one, it doesn't matter right now. And we can always revise that later. Product tag is equal to leather, even auto completes it for me. So, we click save and now without really much effort on my part, I should have a collection of leather shoes that updates automatically with all my leather shoes. So, let's take a look. There we go. Three shoes, all with leather, it works. Very cool and you can also sort in navigation that way in searches and collections. And even for- it doesn't necessarily have to be for the customer. If I filter products in my own store, I could do it by tagged with. So, I could use some internal taxonomy for that. It makes life easy. But again the key here is just to be consistent, come up with a system that you'll use for your products. That's going to change depending on the store. 7. Pages and Blogs: All right. So, a common thing that every website needs are pages, that's what the internet is based on, pages. I had mentioned that Shopify is, in its own right, a content management system, but not just for products, for content as well, content, content. So here, we've got an About Us page. Every store has, might lead to About Us page, FAQ, shipping policies, return policies, a contact page. Those are content pages. So, if we head into our admin, and we click online store, pages, here they are. So, we've already edit our About Us page, and look at that, title About Us. Our great About Us page helps us build trust, indeed it does. So, we'll update it, let's call it About Us Demo, and then we're going to add or replace this line, and we'll say call us with any, if I can spell, call us with any questions, save. It's easy, I mean, editing it, it's very simple. We can see it's the same WYSIWYG editor. We can add images to it, insert images. It'll grab product images or can upload new ones, such as product image. It also resizes images on the fly, which is very convenient. So, I want to add a medium image, insert it, and then what's cool too, if I double-click it, I've got very much a proper CMS and WYSIWIG editor. We can add our alt text for SEO. Let's set our content around it. Look at that, floats it left. It's very nice, so save it. Let's take a look what happens there. Exactly what you'd expect it, how you'd expect it to work. Then, we've got our search engine description. All of our pages on here, let us do this. We could select, products do this, blog post do this, and we've got, you could choose a separate page title for SEO or meta description. Otherwise, it's just going to automatically fill that in dynamically based on your content. Then, you can even set the URL handle. We'll talk about URL handle later, when we talk about some theming items. So, we can also set, this is very cool, visible versus hidden. So, I could set it to hidden, let's say this was a sale and I could say specific publish date, and I could choose a date and time in the future, and then at that time, it'll automatically published, which is very nice. Not something you use terribly often, but when you do it, it's nice to have. So, let's make sure it's still there, very good. Let's look at adding a page. If I click Add Page on the pages screen, just like you think it would work, FAQ. Let's put in some in some sample content. Do you accept returns? No, I don't. You can also, if you're feeling froggie, you can do straight HTML in there. You can see it makes just clean nice semantic HTML. It is very good, as far as WYSIWYG editors go. So, let's save that page and view it. Sure enough, like magic, it appears. It's very nice, very easy, incredibly easy, and quick to do it. Now, the only caveat with pages, and this is minor, is pages and blogs are different. This can sometimes confuse people. So, a page is really just any piece of static content that's not a product and not a collection. A blog is different. So, we've got, again, works exactly like you think. It's just our posts with dates. Really, the fundamental difference here is just that it gives us this index page, where it creates these snippets of posts. Because once you view a full post, it's very similar to a standard page. One cool thing here, you edit it in blog posts, and it's exactly the same. Add a blog post, the difference here, we could specify our excerpt. So, this part right here is the excerpt. If you don't, it'll actually just truncate it for you, do it automatically, just like you'd think a proper blogging platform should work. Then, you could also choose the author and those are people who are other users in the store, other staff members. Then, we can also use online pages, we can add tags, and then that can be used to filter quickly through it or in many themes, it'll display in the sidebar, which would appear by the recent articles in this theme. You can actually create multiple kinds of blogs. So, here, we've got news. I could create another one called sales, so that way we could separate a blog, that one is product announcements and the other could just be sales. Then, choose this, we could do comments are disabled, comments are allowed, pending moderation, and comments are allowed, and are automatically published if you really want to live dangerously. So, we'll say comments are allowed, pending moderation. Say blog post. So, now, we have manage blogs, we've got news and sales. So here, we've got two different blogs that we can run on the store. Probably very few stores are going to use multiple blogs, but it's nice to know that that option is there. Then, we have pages. So, this is where our static content, where most of our content and when we initially create the store is going to live, and then updates over time about new products, announcements, that stuff, we'll probably keep living in blogs. All right. Let's talk about two simple, easy but incredibly important parts of our Ecommerce store and that's the cart and checkout. So, here we're looking at wonderful store called Tattly that sells fancy designer temporary tattoos. Some of these businesses I find on Shopify are phenomenally cool and this is one of them. So, here we've got our product page, I Add to Cart, now, let see what happens. We Add to Cart and it takes us straight to the cart, which is a nice default behavior in many themes. As far as I can tell, it does improve checkout. So, it works exactly like you'd expect it to. Its very conventional, and that's good, convention in e-commerce is good. So, we've got a few things in here. We've got a listing of our items. So here, we've got the one and we've got a little preview, the default variant theme, our price, our quantity, we can remove it and our total. Here, they've done a customization, they've added that note. We do our best to process it, just very nice. Then, they've also got gift wrap, which is a modification and the confetti option, so let's add, click gift wrap and see how that works. So, there's common modification they did here. They added, it just adds another product to it. We'll turn it off. Oh, look at that, works very nice. Then, so, other than that, this is a standard cart checkout. We've got our cart up here, shows our quantity, our update checkup buttons, total, and the notes field, any special requests for your order. If someone fills that out, it'll appear as a note on the order, and all themes have this in there by default. So, all right. Let's see what happens when we click checkout. Takes us to this page. There's an important note here. If you notice what happened, the domain name has changed, we're now on Shopify, checkout.shopify.com. It generates a unique URL and that's nice. The unique URL saves the person's checkout as a session. It's secure, it's SSL and that's really why it does this, why you change the domain name. If you want, you can use a Shopify Plus Store and Shopify Plus will use a regular domain name. But for everything else, for the majority of stores, it's going to go to checkout.shopify.com. One of the nice things about Shopify is the checkout process is based on data, studies, and great design from all of these different stores. So you know it converts well and it's very simple checkout process. Then, you just modify it, so the branding matches your store. You can add, they've added a banner image, the logo, and then you could set the colors and the fonts. Then that way you know it kills that cognitive dissonance, when we end up on checkout.shopify.com. Even if the domain name is changed, I still know that this is very clearly the same brand, the same store. We've got gift cards or discount codes in here, which is nice, works perfectly. So, let's type in some info and see what happens. We'll put a couple of things in here, Kurt Elster, address. If you want to email, this is my real work address. If you want to mail me a gift, feel free. So, this is step one of the cart. Continue to shipping method and here's step two of the cart. So, we've got our shipping methods in here and this is clever. I recommend people do this as a best practice. They've put the estimated ship time in there. It's a common thing. Everyone wants to know how fast am I going to get my stuff, I'm excited. That's how people make the judgment if they should update. If I really can't wait three to six days to get my temporary tattoos, I'll pay the extra 7.50 and go with USPS priority. Then, I click continue to payment method. So, here, I could put my credit card info in. There are several payment processes you can use or Shopify payments will process credit cards for you, and then they also have PayPal integrated here. Of course, same as shipping, same as billing, subscribe to our newsletter. Then, if I fill this out and click complete order, it would take me to a confirmation page and that would be it, but it's one standard unified checkout which creates convention, tradition, and ultimately boost conversions, but it works very nicely, I liked it a lot. Now, this page, you really have very little control over, unless, of course, you're on the Shopify Plus plan. You can choose if you wanted to modify, to edit this page. You really can't do it beyond colors, fonts, that sort of thing versus the cart. This is part of the theme, you can really, if you wanted to, you could modify edit this any way you saw fit, HTML or CSS withstanding. But as soon as you click checkout, and you end up on this page, checkout.shopify.com, you don't have, again unless you're on the Shopify Plus thing, you don't have access to the liquid template for this. All right. Then, where I took order for them, they would get notifications, and then it'll appear in orders in here. So, that's how buying stuff works and the hosted SSL solution that they're using. 8. Themes and Liquid Explained: All right. We're going to talk about what may be probably the most important part of the store for designers, for the client, for everybody, the Themes. And Shopify is created for us, this guy Timber. And Timber, say you can think of it like Twitter bootstrap for Shopify. It is a framework, a best practice resource to use when developing a theme to working with it. You can get it, it's free from shopify.github.io/Timber that's on GitHub, so they're updating it regularly it's a useful resource. So, I've already gone ahead and installed it in our Theme store, and there's two way to add themes to a Theme Store. You could visit Theme Store, the official Theme Store, pick a theme in here and click Install Theme, and Shopify will do it for you automatically, or if you have a zip file, you could just zip your theme up, quick upload theme and upload it. This is good if you have a custom theme, you're modifying a theme, or you exported the theme as a backup and are re-importing it. There's several reasons you would upload the theme directly to your store. So here, I've got Timber and I wanted to walk you through what's in a Theme. So, from the end user, the client perspective, it's how it's going to make the store look. So, we could see that here is the preview, here the live front and render this thing, and the theme settings panel. Theme settings panel are options, they're how someone can easily pick their logo, in the header for example, and even edit the colors and stuff that appear in the checkout process. That's what goes into the theme, if you're the end user. As a designer developer, if we click this guy, this ellipsis button and choose Edit HTML/CS, we're going to see the inside of the theme. And it breaks it down into these folders, and we don't have control over the folders, and that's fine, because it means every theme when you get into a store, it's going to be the same. Let's just go top-down with it. The first is Layout, there's theme.liquid. And theme.liquid is our starting point, all of our other files are going to render inside of this file, this will often be our header footer and then the template or content renders inside of it. And I have never seen a theme that has more than one layout in here, it's always just theme.liquid..Iiquid is our extension, meaning that these are files that are going to be executed server side before they get passed to the end user. So,.liquid is equivalent to.php. And then we have templates. Templates refer to the content, the page that's going to get rendered inside our theme.liquid file depending on what it is. And let's scroll down in theme.liquid if we could find it, search for content line 296, content for layout. So, when you render, a page is requested from Shopify, it grabs theme.liquid and then inserts the appropriate template into this space content for layout. We've got different templates depending on what we're doing. And they're pretty clear, pretty obvious what they are, like 404 obviously, is for file not found, article for articles, forum for blog, cart collection list, let's see, you could view all to show collections/all. Then if you've allowed account creation, you've got customers account, creating their account addresses, customers registering ordering etc., gift card page and we've got index.liquid, that's our home page, list collections which is a list of collections, and here we've got collections and products, this one is optional. Not necessarily every template that's in here is required. Page and page.contact, we'll get into what that is, product.liquid, of course our product page, and search or search page. Here you skim and see we've got page.liquid which is a page, and the page.contact. What that is, is an alternate template, they've got pages or standard page. And then if we look at page.contact, it is a page required by Shopify to have a contact page. But this is just a variation on a page with a contact form stuck in it. And for blog, for blog article page, product, collection, you can have multiple templates for those pages, so, you're not limited to just one thing, and you choose that on the particular page or, you could set which template it uses manually. Then, we move down to Snippets. Snippets are cool, they're includes. If you've got the piece of logic, piece of content, HTML whatever, you would put that inside a Snippet, and then you can call that repeatedly on pages. Displaying a group of products, you may do that on feature products on the home page, definitely on a collection page, possibly in an empty cart or 404 page. You'd want to put the logic for that in a Snippet in here, and then you could just call that as an include repeatedly. And then that way, if you have to update it, instead of updating it in five different places, you update it once and then it gets updated everywhere. Very convenient. And that's part of using a dry method, dry being, do not repeat yourself. Then we move on to Assets. Assets is very straightforward, it's the images, JavaScript, CSS individual files that the theme is going to use. If you have logic in there that needs to get rendered, these can be liquid files but they don't have to be. Here, we just have modernizr, we just have a min of fibre to the modernizr in here, and this will just gets served as is untouched. But then, our regular asset files, we've got some vector graphics in here, even in an HTML file, and it looks like we're using an icon font. Very cool. Here we've got a timber.scss, so, Shopify will compile, will render with Sass, which is convenient so, you can use that. Sass is compiled on Shopify server, you don't need to mess with it and it does some nice things. If you want to make your life easier, you want to use helper variables, you can use that theme settings, it's convenient. All right, let's close that assets folder. Getting simpler here config, settings data, then setting schema. So, if we look at this guy, this is that customized page that I showed you, here customize theme. This is what's going to be rendered here for the end user to use, and it's also where we're going to store that stuff. Now here's a preset stuck in here. So we've got one preset called default, and it gets stored in there. Then lastly we have locales, locales is how you handle internationalization. So, as you guessed, this theme comes in German, English, French, and I believe Portuguese, but definitely it's this right here, looking at it is its own environment, which makes life easy. You could build work on user theme entirely in here. All right, up until now, things have all been fun and games, clicking around and easy to use interface. The simple CMS system, a good WYSIWYG editor in selecting themes. We talked a little bit about what's in a theme, and now it's time to get dirty with Liquid. Liquid is a language, Ruby-based, that Shopify wrote, it's out there, it's in other things now, and it's actually not scary in the slightest. So let's look at, here we've got our product page from our theme here. It renders, but how did happen? So, if we look in our theme, we've got product.liquid, that's not complicated and we know product.liquid is our product file. Whenever we call product page, Shopify looks for products.liquid. Within that file, if we scroll around and look at it, it's just HTML, there's nothing crazy that we haven't seen before, just HTML. But then, we wonder, ''Hey did the description get in here?'' So here look, line 116, we've got this guy, product.description, and I'm sure you can guess what that does. It's the variable that puts in product, but for the heck of it, let's comment it out, save, and refresh the product page. And sure enough, and is that cool. This is just the regular text editor built inside Shopify, works very nicely. Works immediately, it's great and then if we uncomment product.description and save it, our description comes back. So in here, you can see we've got product.description and it's wrapped in these two curly braces. That tells us, ''Hey, that's a Liquid variable,'' and generally anything that's with the double curly braces means it's a piece of content. It's going to output the title, description, price, that kind of stuff, whereas this, if you are observing carefully, we've also got these guys, where it's curly brace 100 percent. Those generally mean it's logic or it's something that has to be close to like a comment, but if then statements will use this, loops will use this. But it helps you kind of at a glance see what it's doing and it's nice. Even here in this, the if then logic, it's very simple. If collection and then end if, it's exactly what you'd expect of this, there's nothing crazy here. You know there's no strange syntax, it's easy to use. In here we've got you know product.liquid, but it's just this template. We mentioned it earlier, what happens is every time a page is loaded, Shopify runs through theme.liquid, so let's head over there, and again just regular head. We've seen this stuff before, we know HTML, it isn't tough. But when we scroll down, through the file, through our theme.liquid file, we find this guy, content for layout, and content for layout it's going to be whatever this correct template is, is going to get dropped in here. So when we load our product page, it grabs theme.liquid and runs through it, and when it gets to content for layout, it inserts product.liquid in there, and it continues on its way through the rest of this file, which is convenient. It's great. So that's it. I mean there really isn't nothing, there's nothing particularly more difficult to attain that. So there's no reason to be scared of Liquid, and we're going to get into our filters and what these other options are. So if we look up here, like you know here page title, that's just content, it drops in versus, we've got an if statement drops it in there. If we scroll down, and we've got all kinds of good stuff in here. Let me find a good example of an If, so here we go. If you know customer meaning this is, the customer has been enabled on here, they will display customer logged in and If, it's great. Very simple. The other thing to know about Liquid is there are no URLs, so here you could see we've got modernizer.min.js, script tag, asset_url. We don't have to worry about lost files 404s, it drops them in, and it even does it with the correct HTML, so it's a script tag versus up here on our CSS, stylesheet_tag, asset_url, timber.CSS, and of course it refers to asset_url or refers to an asset. We scroll down to our assets folder. There she is timber.scss.liquid, and then I'll just drop it in there. It works, no more 404s, no more worry about that stuff when URLs change, Shopify takes care of it for us through Liquid, which once you've got that syntax down, it makes life very easy. Here's a good example, super easy to understand, our favicon. So if settings.favicon_enable, so that refers to our theme settings file, and that's it. If it's turned on, then it's going to run. It's just going to display this piece of HTML untouched, but then for our, href in there, we refer to favicon.png and asset_url. That's it, super simple, super easy. It's not, it's all stuff you've seen before. It's very easy to intuit, but at the same time, I would also keep handy and I do with Liquid documentation and the Shopify Liquid cheat sheet. Here we've got, right up here it shows you, liquid variable reference. So we'll open that guy up, and here just at a glance, you could search through it, find your stuff. It's very easy. All right, that's our intro, I'm going to move in, get a little more complicated in the next one. 9. Layouts, Templates : Okay. Let's talk about Layout. We've seen in our theme, it's just using regular HTML, nothing crazy about it. But, the layout may not be what we're used to. We've got this fairly different file structure where we're not even using URLs. What happens is we use this Layout folder, and in that, we have theme.liquid. Ninety-nine percent of the time, you're only going to have the one layout file, theme.liquid. Every single page gets rendered using theme.liquid, and it's this, it's what you'd expect to see. It opens with our HTML file, doctype. It has a head, and if we scroll all the way to the bottom, sure enough it closes. It's got a footer. So, this becomes our universal page, our universal format. That saves us from a lot of work from having to use header footer includes, though you could if you wanted to. It saves us from having to write this stuff on every single page, it's convenient. They're easy to use. So, we've got theme.liquid here, and it's got everything in here, all our basic page needs. It looks very familiar, but there's a couple of things that it has to have. Aside like, this is your one master page or master layout, and everything gets rendered in this, and then based on the thing we're rendering, based on the URL really. It inserts one of these templates into the content for page file or content for page variable. There it is, content for layout, 296. It drops that stuff in there. The content for the page goes inside this Layout file. That's our number one thing we got to have in there. There's one other minor, but important thing we have to have in here, let's find it. There it is. It's called content for header up there on 34. Content for header is so Shopify can insert items in there. So, it could be predominantly plugins. If you install apps, and the app has to add JavaScript to the site, it's going to do it through there. It makes life easy. If you're removing the app, you don't have that stuff left behind in there. If you have the app, you don't have to mess with HTML necessarily as long as it can get dropped in there, which is convenient. Very nice. The other thing we'll notice, we don't have it in this file but are a kind of include snippets. So, here we have some snippets. If we wanted to, we could do it including theme.liquid and sometimes I do it just to clean it off so it doesn't look quite so messy. Here, let's find a good example. We've got begin mobile-nav and if we scroll down, there we go. There's the end of mobile-nav. So, let's cut it. We got that guy. So I'll just leave that there so we remember where it goes, and let's add a snippet. We'll create a new Snippet called mobilenav. Appears, and let's paste our content in there. So here's the mobile-nav content from that page. It's called mobile-nav.liquid. Save it. Head back to theme.liquid and let's write this in there. Include mobilenav and let's close that curly brace. Save. Let's refresh it. It's page should look fine, but let's find mobile-nav in here, and right there. Boom. Begin mobile-nav. There it is, and there's all our mobile-nav stuff, still in there enclosed. But what happens if we kill this line? So, well, here, we'll just delete it entirely. Save this guy, and let's refresh our source. Now all those lines are gone. So, since this template file, so it's almost always you would only have the single theme.liquid file, and it appears in every page. There really isn't a great reason to use includes inside theme.liquid other than maybe it cleans it up, or you're intending to use multiple layout files. But, includes make sense inside templates. So generally, the way I do it, you would do it is themed.liquid. So your layout file first, then your template file, for example product.liquid and then inside that, you would do your include. So, in product.liquid, it might be social share buttons and you have an include for that. That would make sense. That covers our layout files, our templates, and our snippets. Now, we're going to talk about a specific part of liquid you have to use throughout your thing, but a very easy to use, and that's variables. Liquid variables, also in Shopify documentation, referred to as liquid objects. So, objects are variables. Variables has been ingrained in me. So, that's probably what I'm going to keep calling it but they're interchangeable. So, they're these guys, the double curly brace things tell us that's a bit of content, a bit of information. It's a variable, and it outputs. It outputs our information like we saw in earlier demonstration like product.description. Within the objects, there's two kinds. There's global objects which can be used throughout the site anywhere. If we head into the Shopify documentation, that's going to be stuff like the cart. The cart has to appear everywhere. Or current page, returns the number of the pager on. Well, if you're in paginated content, so actually that doesn't work everywhere necessarily. If the person is logged in as a customer, so that you could do logic like login, logout. So, if you scroll through this liquid documentation, we've got our different objects for global, like page titles are good example that appears everywhere, and we've got page title. So, let's just do a quick demo. Here, I'm going to copy page title, and then let's go back to our product.liquid. So, here we've got product description and below that, let's add a new piece of info. I'm going to write a paragraph tag, and say, "This is the page title page." Let's put that. Save it. Now, let's load up our product. There it goes, all right. A lot product, scroll down, and look at that. So, we've got our description as we'd expect it, and then right below it, this is the Hip Shoes page. So, it's just loaded up the title of the page. Now, that's a global. Global object, global variable that's going to work on every page. But what about the stuff that's specific to a page? So in this case, a great example is that product.description. The description of a product can only appear on that particular page in reference to that specific product or the price. But you make yourself crazy if you're trying to figure out what every single one is. So, that's where the Shopify cheat sheet comes in handy. It's from Mark Duncan Lee who is a designer at Shopify, and it has everything broken out like this, which is great. So, here if we go under template variables, and yes, he calls them variables not objects. So, here we've got blogged out liquid. Here, he's got a listing of every of the specific things we can use on a blog page. Again, it's not like at a glance, it's very obvious what they are, blog that title, it's the title of the blog. But when you're trying to think of what it is, it's harder. So, it's very nice to have this cheat sheet in front of you. If you click it, it gives you all description, and it'll also link straight to the documentation, which is very nice. So, we're on our product page, and here, we've got all this stuff for our product, which is great. Yeah, and we've got, let's see templates, product of liquid, so we'll take this guy back out. We don't want that. So, this was page subtitle. This will appear on every single page. So, instead of doing that, let's find something specific to a product that we can output. Let's go through products that liquid and find one, one that right. So here, our product doesn't display its type. So, we've got product.type. So, let's do a better example. Let's say we can add that in here. So, I'm going to write, I'll put it in bold. I will write type, and then we're going to change this to product.type and see what happens. Product.type, save, goes back there, and they're there, refresh. Look at that, type, kicks page, there we go. Where'd my page and I have been in there. Save, all right let's reverse that. Type kicks, and that's because the type on this product at least has been set to kicks. That's a common modification. You may want to say to people, "Hey, what type is this?' That's how you would do it. Let's talk about templates, right So, we've got inside or theme, we have this concept of micro templates. They're not a complete page. They are just the content for that page, and that's what goes in the templates folder. As well, let's run through first how those get chosen, because when I first got into Shopify, this initially confuse me too. It's done based on the URL. So, let's take a look at them. Let's grab, let's go to our store, and we will load this guy up. All right, there's restored. So right, this one's easy. Run the homepage, so slash, which would load our index.liquid, and we'll head down. There's Index that liquid, and here so loading this up first thing on there. We see each two homepage sections.front page title. Let's make sense. Pretty, pretty straightforward. There we go. There's our homepage collection, and just to prove it, just to show that, that is what it is, we're going to add. We will add some text in here. How do you save? Let's refresh this page, and look at that, it appears. So, that's pretty. That one's easy, that's straightforward as to how this content is working. But again, which collection you chooses is based on the URL. So, let's click About Us, and About Us lives on a page. We know this, if you look at the URL, /pages. So, then if we head into, we would expect that to load up page.liquid. Here, we have got H1 page title. Same deal, we're going to add the text-page there, save, refresh About Us Demo Page. That's how it's doing it. Let's run through all of the templates that are in here. It's not terribly many, and we'll discuss quickly what each one does. Four hundred and four, which is File Not Found page article. This is the content of a blog. So, blog article not to be confused with page.liquid. Blog, that's the index of articles on a blog. Cart, it is your cart page, not the checkout cart page. Collection, the insider, just standard a category collection page. Collection.list, this one's a little different. Let me show you that one. That is a listing of collections. So, if you go to /collections, it loads up this listing of all collections, which actually is different than collection/all, which is a listing of all the products in a store. So, then if we go down, so that's the collections always collections.list, and then we have all these customers pages. So, there's quite a few in here, these are only used if you have customer accounts enabled on the store, and for the most part, when the customer is logged in. Activating account is to verify the email verification. Addresses is where they manage their saved addresses. Login page, the login of course. Order, they can see their past orders, the registration page, password reset. Pretty, the names are straightforward. Let's see what we get here. Gift card, this one's all different. When someone buys a gift card, they're emailed a link for the gift card. This is what's rendered when they click that link. So, if I purchase the gift card, that's the page that shows. You can make fancy gift cards or add instructions, that kind of thing. Index.liquid we learned is the homepage, list-collections. So, this is /collections and /products. It is optional. You guys see, some of these optional just refers to when submitting a theme to the Theme Store. What's required and what isn't. We've got page right here, this is just a page as we learned. Page.contact, this an alternate template, and I'm not going to talk about that quite yet. But we'll get into it. Product.liquid, we've played around with this guy a lot. So, product page and search is the search results. So, up here we have collection.list. This is an alternate template. Yeah, collection/all?view-list. So again, this one isn't required. But it's helpful to have in here. That's part of the reason I like to start. If I were doing a custom theme, it's nice to start with this timber frame work. We're going to dive into more liquid stuff next. 10. Filters and Loops: I want to dive into and talk about one of my favorite features of the Liquid Syntax and that's filters. We will read Shopify's definition of it. Filters are simple methods that modify the output of numbers, strings, and variables, and objects. They are placed within an output tag and are separated with a pipe character. So, as we remember before, an output tag, that's an object, Liquid object or Liquid variable and it's indicated by those double curly braces. That's typically for stuff like title, description, price, those things that are just dynamic variables you want to spit out. So, they give us an example like upcase as a pipe. So, let's head into our good old friend, the product template. Got product.Liquid here and here look h1; product.title. Let's add a filter. A filter is indicated by pipe, so pipe being a character not like a Mario reference, and then we'll add upcase on there. So, there we go, we got "product.title | upcase". So, we could probably guess what this is going to do. Save it and now, let's refresh this page. Look at that, it has changed this to Gnarly shoes, inspect element. So, if we look at it, we've got "itemprop equals name gnarly shoes". It has altered the output for us and that's useful. You could do it for doing stuff globally, for changing themed settings like in your navigation. Maybe your navigation you want it to always be uppercase, lowercase, you could do that here. So, let's take that out, but there's all kinds of filters that do lots of different things, and one of the best resources for finding that is the Shopify cheat sheet again from Mark Dunkley. If I will look up here, he's got Liquid filters, that output stuff, so this is cool. Here's one strip HTML. So, this is nice like let's say, you want to add your embedded description to a document. So, here is their example. What they've done is grab the article content and then strip HTML, pulls the HTML out of it because obviously HTML in your embedded description would break it, and then here they've added another pipe, truncate:20. So, I wonder what truncate does. Let's head down here. Using truncate words, we can reduce it down to x words or truncate characters. Cool, so let's scroll down. We got here other filters. Do we have any? So, here is capitalized. Capitalized is nice, we could use that to sanitize our content. In the case of, let's say someone who is lazy and all their other product titles were lowercase. You could use that to make them look pretty, to ensure they always look great which is convenient. But as you can see here, it's for more than just altering those outputs. There's lots of different handy ones. So here, we've got money with currency, money without currency, and money. You're going to see these a lot because you want to be able to internationalize your themes. So, maybe someone sells in multiple currencies or they're in different countries. So, you can display hey, money with currency instead of just displaying the dollar sign like we do now. Here, it's adding Canadian money without currency. It's just the price without the dollar sign, and money is priced with the currency symbol. But it's useful for stuff more than just that. We've got price, that was kind of cool. Messing with prices is convenient, being able to alter text output in lower lowercase to capitalized. But what about shorthand, making our lives easier. So, let's head down to a guy we looked at earlier and that's this CSS link. So, CSS, we've got references the file. So here, this guy in single quote refers to our asset. There he is timber, and if we go back up here, then we've got two pipes, so we have two filters here. The first is asset_url. So, asset_url, we could probably guess it's going to pull the URL on this and then stylesheet tag. So, let's take a look in the source. Lets view the source of our file and find the CSS link, there it is, CSS link href, blah, blah, cool. So, we've got all this going on out of here. But what happens if we kill stylesheet_tag? We take out one of those pipes, save and refresh it. Look at that. So, here, as we do expect it's producing just the URL. There are situations where you want to do that. If you wanted to be able to add extra attributes to a link, you'd want to be able to do that. So, it's very convenient. So, we'll be using filters more and some other things but definitely just grabbing it. This is a reference using Mark Dunkley cheat sheet, very convenient for your filters but it lets you do all kinds of fun programmatical stuff that designers couldn't use, well not necessarily couldn't it, but designers were scared to use or difficult to use before with JavaScript, PHP, that sort of thing. Here, it's made incredibly easy. You just have to know which one you're looking for and that's what cheat sheet is for. Now, we're going to talk about a topic, going to get a little scary. I don't want to frighten you. We're going to discuss for-loops. So, if you're familiar with navigate your HTML CSS, it's not a lot of programming logic in there. So, something like a for-loop can seem intimidating. Jeffrey calls them iteration tags, for-loop is a kind of iteration tag. All you do is repeating a block of code. So, let's take a look at a couple of examples where we might want to use for-loops, and then, we'll see how they work, and that they're not scary at all. So, here we've got in our collection, in our theme. What we don't know when we load a collection, we've got one collection template that dynamically puts the products in there. We don't know how many products are going to be in there in each theme, in each different collection. So, we have to have a way to do that programmatically and easily, without repeating all this code. Here, this tag cloud on the left, that side bar, that's a loop and even something as simple as or navigation at the top. We don't know how many items are going to be in there. That's just a list repeated over, and over. Again, it's just a for-loop, and then, another common one of course, product thumbnails, products could have different numbers of thumbnails. So, we have to use for-loops and we use them a fair bit throughout a theme. So, let's look at how that works. So here, I've loaded up collection.Liquid and in collection.Liquid and I've simplified this a little bit, but if we get down here, we see line 53. Got this guy, and it says, for product in collection.products include product grid item and endfor. So, as soon as we see the curly brace percent, we know that this is a piece of logic and we have to close it. So, we got for and endfor. Very simple. Now, if we look at the language, it's also simple. So, for product in collection.products. Using that great Liquid.syntax, we could tell it's just saying, for every product in a collection, however, many products are in their, loop through and include this snippet. Okay, and let's look at that snippet. We've got product grid item and here we go, this snippet is used to showcase each product during the loop, for products in collection.products and collection.liquid. Very good. So, all this code in here, normally, if we wanted to do this without the loop, we'd have to do it statically and just keep repeating this over and over, it wouldn't work. The loop makes it much easier. So, let's go back to that loop. All right, so we've got for product in collection.products include product grid item. All right. Just to demo it, we'll kill that snippet and then lets refresh and see what happens. All our products disappear. So, we know it's working. So, put it back, save it, refresh it and our products come back. Now, with a loop, for the most part it is easy as this just, "for whatever in endfor." But loops are more powerful than that. We can actually include other bits of logic in there. So, we could do an else. Let's try else. Else is a bit of logic. So, we'll say else and then, I'll paste this in here. I already had it written but just it's paragraph tags says, "Oops, collection is empty." So, lets's save it. So, now, we've got a bit of logic in here, and what this is saying for product. So, if there's products in collection, in the collection, we're going to run this snippet but if it's empty, we're going to display a different message. So, let's create to check our collections. What we got? Products, collections. I've already created an empty collection and let's view it. Look at that. So, it says, "Oops, collection is empty." It's using that else logic that we put in there. Just to show that that is what it's doing, let's go back and edit our theme again. Collection.liquid. When we take the else out, let's see what happens, if we didn't include that little bit of logic in there. So, it runs through the loop but there's zero product and nothing happens. It just stops and starts. So, pretty much simpler than you would think, probably simpler than other programming language if you've messed with them but there's still more you could do with it than that. So, if we go back to Mark Dunkley's cheat sheet, we've got here to find the for-loop but there is more you could do with it. So, if you go down to, where is it? There we go, Loop Helpers. So, Loop Helpers, now, we can define things. So, do we want to run for the entire length of the loop? Do we want to know where we are in the loop? Index of the current iteration, what else we have? Oh, these two are good, first and last. So, if you'd say, if this is would be like for pagination, if this is the last thing in the loop, we can add an arrow to it or if it's the first thing, we'll add the other arrow to it. There's a lot of flexibility here with loops but for the most part, it's not particularly complicated. I'm here on this example, just spits out products. So, for product in collection of products, products title. Let's just do that as our last quick demo of how loop's work. Here we go, so we're going to swap out our snippet for just product title, so we can see it run through. There it is, refresh, yeah, and here it's just that's every one of the product titles spit out. So, yeah, for-loops not complicated, not scary in Liquid. If you know basic programming language, if then else, you can figure this out. It isn't tough but it is an integral part of a shovel fighting. 11. Product: So, to recap, we've done mostly a lot of learning. We learned about the platform, we've learned Liquid syntax, what we can do with the Liquid, how easy it is, the structure of a theme or Shopify interface. We've learned a lot. Now I want to start walking through, and putting that stuff together. We're going to do it by just walking through and trying to talk through how the templates in our Timber framework theme are laid out, and it's going to give us a good understanding. We're going to start with the product template. Product template is probably the most complicated template in any theme, with the exception of maybe a few themes home pages. But for the most part, product template is crazy as it gets. So, if we can master it, if we can understand this, then we know we should be good on everything else. As long as we're looking at that product template, we're going to want to have two references open. First of all, we're going to grab the Liquid Documentation for Objects, specific to a product page. If you remember we've got some variables that we can output globally, that work everywhere, and then we've got lots that we can output just specific to a product. Here, we've got those product attributes in front of us. If we want we could also keep Mr. Dunklee's Shopify cheat sheet in front of us. Right over here on the right, we've got template variables with product.liquid. This one's good for a very quick reference. We can see all of them at a glance, and if you open it like oh what's product.title do, returns the title of the product. Whichever one you're comfortable with. I often, we'll have both or just Google, see what comes up. Here we've got a product page. Just complicated as it's going to get. We want to start looking at our template. All right. You know regular HTML, we open up our div class, and immediately we've got h1 tag. Here's our first Shopify variable product.title. Naturally we know this guy is referring to Awesome Sneakers product.title. I won't demo that one, I will just keep moving through. All right, here we could see we're doing some things with Schema markup, it's to include rich snippet data. I think most or all themes do it now. You don't necessarily have to do it for yourself, but it is a nice thing to have, if you're a big believer in the semantic web like I am. But it also gives us access to some good things at a glance like item price currency, content equals shop.currency. We're not sure exactly what is that output, but we do know it's in reference to the shop, it's a global variable, and it's currency. So, let's see if we can't look that up. Sure enough, shop.currency is in here. Returns a string with the name of the currency usually three letter representation e.g. USD. Our shop should be set up US dollars. So, this will output USD, but let's look in the code, see what it does. So, if I'm right, and if I search control find USD. Sure enough, there it is. Actually it's really in if you look, there it is. Price currency content equals USD, Awesome Sneakers. We're doing good so far, we haven't gotten anything too crazy. We're going to use another one - availability. Really this is for Google. Google's going to want to know this stuff. It's good for a SEO. So, here we've got, this is a clever string someone's written here. So, we refer to schema.org. Now we've got our first example of logic. We can work our way through this. We can intuit. If product.available, so, if the product's available, that's a boolean operator yes, no. If the product is available, true, it's going to write in the words 'in stock,' else. So, we know if it's not available, it's out-of-stock. 'Else' out-of-stock. endif. We've already got some smart logic in here to make these rich snippet data is working. Here we've got a comment in here come in code. So, it's nice about doing comments like this, wrapping your comments in Liquid tags, as they'll only be available in the theme editor. They won't get rendered with it. This will never appear on the front end to the end user. So, if we look we can see there's no comment in here at all, which is nice. It just makes the page a little smaller, a little cleaner, and then you don't have to worry about if you've got sensitive comment in there, that you would but you don't have to worry about that stuff being exposed. So, we've got our form action just post to the cart. It's very simple, Method, Post. So, we're posting to cart/ad id AddToCutForm. So, there's a selector for an Ajax cart plug in. That's probably a little beyond us right now. We're not going to worry about that. Scrolling down, see what else we got here, for variant in products. This gets interesting. We've got variants. Check it out. So, size, here we only have two, but these are your variants, your product options. That's what that's referring to. Here it's making reference to option selection.js, some crazy javascript stuff. I don't want you to worry about it yet. But we could still figure out what's going on. So option. So it's a form field, if variant is equal to product selected or first available variant. So, meaning the default choice, the first one that's up there or what the user has selected, and then it displays selected equal selected. It's an option, then endif. Here we've got it wants to write in the skew for the product, so we can write unique skews, variant.skew, obviously we could tell get the double curly brace, and it's going to spit out skew, and it just keeps going, variant ID, title, price et cetera. This is how we're displaying the options for that product. Option disabled. Here you can see variant title-products.product.sold out. This is interesting one. If you see this guy, the T. This is for internationalization, for translation. If you wanted to, end user can edit the language, and then anywhere that word 'sold out' appears. That's the default. It's going to just rewrite that for them. Let's keep moving on. Here we go. Here's a good one. Current variant.price, pipe money. We know price obviously is referring to the price of the product, current_variant. It's going to be four, because we've got again, maybe this comes in different sizes or came in different colors, and that would change the price. How do we know what to do there? How do we know which one we're referring to? Well, that's what it's going to take care of here. Current_variant.price, it's going to display the price for the current variant. So, you very quickly get the idea here that we could just intuit, because it's natural language, we could figure out what this thing is talking about pretty easily. We haven't even needed to check the cheat sheet yet. Then we have come back, our old friends, the filter. Soon as we see a pipe, we know it's a filter that's being applied to this, and that it says 'money.' There's a couple different ways we can output prices. So, let's check. Let's see if we can find what the money filter does. Here it is, filters money. It adds the currency symbol. So, the nice one here, we could if we knew it was always a US store, you could add the currency symbol in there. But if we're making a theme for the general public, we don't know what currency they're using. The advantage to doing that, Shopify smart when the shopper picks their currency, it's going to automatically add the correct symbol. Makes our life very easy. Then moving along, we get down to products, product.compare_at. So, here's the compare price. Again, compare at price refer generally it's MSRP, meaning if it's on sale, and then here we see, there's some logic in here, if and if. So, here they've done something nice. If product.compare at price max is greater than product price, then it displays the section. So, what's going on here. Is if this is logic included to figure out if the product is on sale or not. So, if my product just has a price, and no compare at price, we know it's not on sale. If it has a compare at price, and that's greater than our current price, then we're going to display this information for displaying that the product's on sale. Moving on down here again. Here we've got the filter again for money, so we know it's including that dollar sign for us. Label for quantity, product.product.quantity. Again, this is just you know for different language. We could write quantity in there, but it's easier, and especially if we're going to sell theme or have a theme at a theme store. We need to have this in here for internationalization, so we can do different languages. Again, the add_to_cart text also falls under that, and here we get back to our old friend, from the beginning of our course, product.description. We've got this guy. It's not just one line, it's not wrapped in html. There's no filters on this, because their description gets written in that, WYSIWYG editor. Whatever's in there, it's just going to drop in exactly what's in that WYSIWYG editor into here. But if we wanted to, there's filters where we could strip that stuff out. Here we've got more logic. If collection, and endif. I wonder what's going on here. So, Shopify has for breadcrumbs, to do breadcrumbs are based on URLs. So, if I went to a product directly from a Google search, this section would disappear. But if I was browsing the store, and I went from collection to product, which is how most people would do it. This logic is going to kick in, and that it's going to add. So, if collection, and then we've got another set of logic is, if the collection, we can nest if statements. If collection.previous product or collection next product, then you can display these guys. What's going on here? We've got previous, next links that work in the theme. I didn't even see them in here. There are theme setting that are turned on, and yet we still. Wait, let's see if I'm right. Yeah, it looks like it's a theme setting, but it isn't here. But we still without having seen it, I still know what it's going to do because the logic is very clear. It's very easy to follow. So, we aren't here, we've got this javascript stuff getting a little scarier. We probably don't need to worry about this, unless we're getting into advanced theme customization. I wouldn't let this scare you away. But there's still a couple of things we can look at. Again, here we've got, so let's say we've got a javascript that we all load here. We're calling it, option selection.js, and then we're adding two filters to it, that we should remember from before, Shopify asset url, and script tag. Just looking at it, we know what it's going to do. We can work backwards. It's going to write a script tag, that's actually when you've got multiple filters, read them backwards. We've got a script tag here, and then we're going to display a URL to the asset for option selection.js. Just go ahead and find that in here. Scroll to the bottom, we know it's down there. Yeah, there it is, option selection. This is our guy 44, and like we thought, script tag, URL and URLs to option selection.js. But in here we can see either we've got cash busting on here probably for some kind of, what they call it, CDN action. You got to make sure we're loading probably the current version. But normally that stuff we'd have to worry about, that's the advantage here is we can just drop in script tag and Shopify asset url. It's taken cared of for us. We don't need to worry about it. The next one, we're going to do the same thing, and it's going to get easier. We could figure this guy out, product Liquid, [inaudible] this is the most complicated one. This is even my first time running through that Timber product, but I was still able to intuit to figure out what's going on there because of the natural language. It doesn't hurt that they put comments in here. I'd recommend leaving some comments for yourself if you get lost in these themes. 12. Collection: We're going to look at the collection template. Same as the product, we're just going to walk through it and try and decipher what's going on in here, apply what we learned and it's going to be easier. Collection is simpler than product and then the template we're going to look at after this are even easier. So, we're just going easier as we go. If product was a little confusing for you, don't worry collections should be easier. If collections is confusing when we look at the next one, that should be clear as day. Here we've got collection.liquid. It's our template file that refers to a collection of products similar to a category and if we head into liquid documentation we want to have available to us for reference when looking at these things. Our objects or liquid variables for collection. Again, that's a dot syntax. So, we know it's going to be collection dot whatever. And then we also have Mark Dunklee's Shopify cheat sheet. Thank you Mark Dunklee. At this point we should all send him a thank you note. But let's find collection. There she is, collection.liquid and already we can tell this is easier than product. We've got much fewer collections in here and some of them are obvious like collection title, returns the title of the collection or description, or terms the description of this collection, simple stuff. But like what collection Id, turns the Id of this collection. Okay, and then we've got handle. Returns the collections handle which is by default lowercase. All right. We'll talk about handles. We haven't discussed handles once yet. Let's load up our collection. Oops, let me say that first. So, products, collections. We have leather shoes. Let's click this guy. We had made this earlier. It's an automatic collection. Then here we've got, so if we look at URL it's collections/leather-shoes. So, let's start at that. URL and handle. A handle is part of the URL. In this case it's collections/leather-shoes. If we were talking about a product handle, it would be /product/the handle name, like hip shoes. We could see in a handle it makes it friendly. It makes a lower case. It replaces spaces with dashes. It gets rid of any special characters that we couldn't use. It is very convenient because aside from being our URL, the end of that URL, a handle is also how, in liquid, we refer to various collections and objects programmatically so we'll keep that in mind and we'll find it. So, I digress. Let's head back to our theme. Edit HTML. Again, we're working in the timber theme, the Shopify framework similar to Twitter Bootstrap. Let's load up collection.liquid and here's this guy. Here's our example collection, Kurt's favorite shoes and going through here. Let's start just as before. So first thing we find is something we haven't encountered before, paginate. Even though we haven't encountered it, we could probably figure out what this means. Paginate collection.products by 12 which means we're going to add, we're going to display. Let's say we had 48 products in there, we don't want to display all 48 products at one time even though we could. We want to break it down by 12. If we had that many I could demo it. For right now we're not going to do it. We'll go back and look at it. In the next step in here we have the breadcrumb. Snippets. First of all, we've got an include. An include is exactly what it sounds like. It includes a snippet. A snippet is where anytime we want to include a chunk of code that we don't want to rewrite. We don't want to repeat ourselves. We want to take a dry approach to this. Don't repeat yourself. So, let's head down snippets breadcrumb.liquid and what it's going to do as we discussed before, when it renders this page it's gonna grab breadcrumbs.liquid, this snippet. The reason we're doing that is this appears across multiple pages. It's going to appear in the collection. It's going to appear on the product page. So, we just want one place to change this. Again, we can see it does that. If template contains product or if template contains collection. It's simple. Look at that, if template contains collection and collection handle. So there's that reference to handle we saw again and we can even look down here. Look at that, capture url/collections and there's collections.handle. So it's exactly like what we saw before. Let's go back collection.liquid. We veered off a little bit but here we go again. We've got a nice comment, different markup if a collection description exists. Okay, we're changing how our HTML is laid out depending on if we have a collection description. In this case, in this theme, we didn't add a description, we just have our title and then we've got- so here we go. If collection.description isn't blank, so that guy, that isolation point is not equal to, is blank. Then we've got, we had a header, we display the collection title like we saw, and then we display our collection description. Again this guy, collection description it's done in a WYSIWYG editor adds its own HTML so we didn't need to worry about wrapping that or messing with this here. If we wanted to, we could add a filter to a distributed HTML but we're not going to do that. Then we've got right here include collections sorting. Because we've used these nice classes, we can see that on the right is our collection sorting. So let's take a look, and sure enough here we've got this module, sort by and this guy and we are smart enough to stick in that snippet and include. So it's how down to. Look at that. Collection sorting. Open this guy up. Here we've got this logic in here for doing our collection sorting. It automatically gets dropped in. So if we wanted to, in some stores this is a common theme modification. I've gotten, where someone says well I want people to be able to sort by best selling and alphabetically and price, but I don't want them to be sorted by date. I don't want people to worry that some things are old or out of date. So if we wanted to as long as we're in here, just go ahead and we could just kill that and let's see what happens. So, then now, it's no longer in here. Cool. So, I'm moving right along, we've got this comment. Whoops! I'm still in collection sorting. Let's head back to collection.liquid. There we go. Another thing, the Shopify editor that's built right into the theme, so great. Again, you can use textmate if you wanted to, use your own and sync it. But, no, we're going to leave that for more advanced developers like Gavin Ballard, who's going to talk about it in a different Skillshare course. Okay. What do we got? Where was I? So, we've covered this logic if there's a description versus not a description. We're doing an include for collection sorting. And here we see why we didn't include. Because we've got to repeat it due to that logic. I don't want to have that code in there twice, especially when I'm making changes to it like we saw. So, that's why we do the snippet and put it in there twice. And oftentimes, snippets are nice just when you're working on a theme a lot. It keeps the code cleaner. It's easier to see. Easier to read through at a glance. All right. And then we end our endif. So, here we've got a comment. Use class grid-uniform to have evenly sized columns clear each other properly at each break point. So, we know we've added something in here for our responsive breakpoints. So, we've got a grid-uniform. I don't necessarily know that this needed a comment. I guess not everybody's super end responsive. Okay. We have a comment. And again, the reason these comments are not just wrapped in HTML comment tags, they're wrapped in liquid tags is because these won't render, and won't come through to the end user. So, they won't see them if they're feeling snoopy. So you can put whatever you want in there. It's also going to just make the page size slightly smaller. So, we talked about loops before. We learned let's not be scared of loops. And here we have a loop. So, for product and collection of products- so every product that's in this collection of products, we will include product grid item. This is a perfect place to put a snippet of course. Product grid item refers to one product. This one unit. They've got a nice naming convention here, which is why you want to give your snippets nice names that you know what they are at a glance. Imagine if all of these snippets were just labeled like A1, A2 and widget. It's not going to be helpful. So definitely stick to a good naming convention that describes what's going on. And at the same time, the end user's not going to see that if they're poking through your code. So feel free to use long, expressive, descriptive names. So, okay for include product and then we have an else. So, we could tell here it's for product in collection.products. Else, meaning if there's nothing in there else it's going to grab- so, if collection.handle equals all, and current tags are none, add default products to help with onboarding for collection/all only. Okay, very clever. It even does something crazy. It loads up different CSS. Look at that global asset URL stylesheet tag. Probably wouldn't have this in your own theme in a standard theme. But this is clever. Include onboarding empty collection. Okay. So, we know we've done. It only happens in/all. It only happens if it's empty. So, we'll meet the first requirement. So, it's a collection handles. We've got- let's hit the handle to all. Then it what it does, all is a default collection that exists in Shopify that displays all of your products at once like that. And if it were empty- so, we've only met half the logic because we did if and current tags equals that it would do something else. And then else, if collection exists but is empty, display message. We've got paragraph collection general no matches. We saw this earlier when we did the for-loop demo. We might have a collection that doesn't have anything in it. So, we put this else logic and it drops in this guy. Again, this is from the language translation. But you could rewrite this if you wanted to. You couldn't do this in a theme you submit to the theme store. But in your own you could do it. So, we'll just say, "Oops, nothing there, boss, endif, endfor." So, this concludes our logic and concludes our loop. Now, we get down to this interesting guy. We've got pagination. So, if there's multiple pages, if paginate.page is greater than one, so if we've got more than one page, that it's going to fire off this logic, which is our pagination. So, we do a horizontal rule so we could see it, div class pagination. Here's our paginate. Look at all these filters. This thing is fabulous with filters. All right. Paginate, default pagination as a handle. Interesting. I wonder if we could find that in the cheat sheet. There it is, default pagination as a filter, used in conjunction with the paginate liquid tag. Well, that's not particularly helpful. Let's see. All right, let's find it. So, here's an issue now. There's a limit of 50 products when you do pagination. Generally, so, they divide out evenly I do 48. Well, let's go ahead and find our paginate. There it is, paginate object paginate default. So, here we go. You can also use- paginates tag, is built using attributes of the paginate object. Or, you can use the default pagination as a quick alternative. So, this is very clever. You can write your own pagination if you want to get fancy, or because we've got our different options in here, we can make whatever pagination we want, or we can load up the default pagination. So anywhere we want to use pagination, just like that we can get in there. We can think of this like it's own ineditable snippet. So, we write input paginate default pagination output, and there it goes. That's an example. So, let's try it. We can force this thing to run. Let's go up and we're going to drop our collection down to paginate by three. Then let's load up. All right. So, here we should have enough. It should paginate for us. Look at that. It does. So, there's your default pagination, one, two, three. Let's look at the middle one. We've got these left right arrows. Because we could see that happening in here. Replace left quote previous with a left arrow. So, we've got our HTML entities. Let's check this out. Let's pull it out and I'll show you what it's doing there. Because this is a great example of a filter. Filters can use that. I mean, in many ways, that's similar to a regular expression. Watch this. So, there. So, that was the default behaviors that previous- we were able to use filters to edit the default snippet even though we'd otherwise not have access to it, which is clever. I actually prefer that. I think that's a better example of pagination. But the other way is very neat, very clean. And on this guy, I do- we can separate it out. I like those arrows, but I don't like getting rid of the word next. So, let's try- let's do this. If we leave the word next but replace that. Save. Boom. Look at that. Very cool. So, let's look up- just grab the info on that filter. So, here you've got replace and replace. You can also do replace first, which is cool. So, it's only going to do the first one that's useful for loops like a collection. That's the description we've got here. Then just regular replace, replaces all occurrences of a string with another. Normally, doing stuff like that in other languages, PHP, whatever, would involve regular expressions, would be very crazy. Here, it's very straightforward. You just write. It's no different than find-replace in a text app. Replace the thing you want to replace with what you're replacing it with. Okay. So, there, that's how collection works. We're applying that logic again. Then we also learned a bit about- we learned handles, pagination, and that neat filter-replace. So, only caveat there, keep in mind that when you're doing- in a collection where you're displaying products, there's a max of 50 you can run. Typically, you want to divide by something nice. So, we'll usually do a max of 48. Okay. Up next, we're going to look at- you don't have to worry if this one was complicated. We're going to look at page.liquid, which is the simplest of all our templates. 13. Page: Okay. We've covered and applied what we learned to products, collections and then one got a little crazy with pagination. But I promise we're on the easiest one of all, pages. So, we've got, here's about us page and fortunately, it's not a lot going on here. So, just as before, a lot of our reference, our objects for page and they are so few. What's nice about them, all of these at a glance you can figure out what they do. Page author, content, that's like product description. It's just the content on the page. The handle which we talked about, that's this guy up here. The about us, and we know the URL. It's also how we can reference it through the store. ID, similar concept to handle. Pages published at, it's just our date filter or our timestamp and then we can use the date filter to format that in a specific way. So, then of course we've also got our cheat sheet. Our wonderfully marked on clean cheat sheet. So, same deal just gives us quick access to it. But pages aren't that complicated. So, here we've got our about us and at this point, you could probably write this one out yourself, but nonetheless let's take a look at templates. Let's dive into themes, edit HTML. HTML, how do you pronounce HTML? So, in my head I actually say HITIMAL but that can't be right, or how about hot metal? I don't know. Okay, I digress, templates, page.liquid. You may notice this guy, page.contact.liquid, we're going to talk about what's going on there. But let's just look at page.liquid. Bless us, this thing is 17 lines. This is the easiest, simplest one we've looked at and I guarantee at this point you should be able to glance at it and know what's going on. It's not tough. We've got just our standard layout, our HTML stuff in here. Then, pages title wrapped in heading tags, wonderful! Comment, regular page content goes here. Well, of course. Then, page content that's it. No, there's about us page. That's all there is to it. But as long as we've got this open, here let's try messing with some other stuff. So, we've got, look at that we got page published at and the date filter and we've got author. Okay so, let's mess with both of those. All right so, we got this guy, right under here. I'm going to go ahead put a paragraph in there with my page author, page.author. All right. Let's put in there, posted by page.author and then there is a ledger at it. I'm going to be a bad boy. Let's wrapped this in some emphasize tags, save, refresh. Look at that, posted by Shopify. Because this is just a default theme that's in here that was added in the store, so it's just posted by Shopify. Otherwise, it would state the name of the staff member who did it. So, as long as we're at it and we're messing with it, let's mess with this guy, page.published at. So, we could say at and let's wrap a liquid, save, refresh. Okay. So, it does displays exactly when it was published at but it's not in a helpful, useful way unless you're really into Unix terminals. So, we've got to use the date filter is what they suggest. So, let's click that link. In here, we can format the timestamp into another date format, into how we want to do it, your preference maybe the country's preference but they give us this example, we could say Tuesday April 22nd, 14. Alright. I don't like that T-U-E, that's an abbreviated one. I want the full weekday name. So, it's case sensitive. We should do a capitally A, sorry. Let's copy their example and head back over here. All right. So, it's a filter so we add a pipe and then we paste in our filters date and then these are the attributes of the filter. Let's save it. Look at that, already much better. But I don't like all these abbreviations. So, let's go ahead and change. If we switch the lowercase a which is abbreviated date for capital A, it should give us the full day. There we go, posted Monday. Let's see what other ones we got here. So, here we have Saturday, Tuesday, January. I want the day of the month zero padded. That's what I like. So, here we'll just make it cleaner. Day of the month. Is that right? I'm sorry, day of the month, I meant month's date. Day of the month, let us formats the date. I'll look at this here. This filter will even simplify the whole thing quite a bit. So, we can do it that way or what if we just do this. Oops! Just drop this out, save, reload. There we go. That's super clean way to do it, looks good and we've got our first date around there, so it works. Pages are very simple. Down here we've got page.contact and we've got two different pages. I'm going to stop here and that's what we're going to dive into next. We're going on figure out what's going on here 14. Alternate Templates and Snippets: SkillShareDemo, we've got a store up, we've got our About Us Demo in this page, your regular page template, and that's what we've been talking about. We've been walking through our templates. Here we've got, we could see in here there's page.liquid and page.contact.liquid. I wanted to talk about what's going on there, what that deal is. So, we've got this. Let's look at our contact page. So we have this page, it's Contact us, Talk to Kurt. If we look up here in our URL, we see it goes to slash pages. Okay, so we know it's a page, but it's got this fancy form, different layout than this one, which we also know is a page. So, how do they do that? If we look in here we've got, page.liquid, page.contact.liquid. In Shopify, you are not limited to just these templates, you can add, we can make multiple versions of templates. I don't know what the limit is, but I've certainly never hit it. So, we've got page.liquid and then there's page.contact.liquid. So, when you've named it that, this becomes page is just the default template, and then there now exists an alternate page template called Contact. Then just the same as before, there's html in here and you can add whatever you want. In this example, every theme is required to have a Contact us page template with this form in here. Even the form is part of Shopify, is part of liquid. So, you don't have to worry about messing with forms and it's got anti-spam on it, very nice. So, let's check out, how do we apply that? How do that work? If we open up our pages and head down to Contact us, scroll down, template page and page.contact. So, if my file has multiple templates, this guy comes up in here with page.contact and page, cool. You can do it for like for just about everything, you do it for products, you could do it for collections, it's extremely useful. For example, we did, let's say you've got a client or you want to start a product and put it on Kickstarter and you have it in Shopify store. But you can't sell your products while the Kickstarter is running, so the Kickstarter products, you can make an alternate template called product.kickstarter.liquid and then just swap out your Add to Cart button for a button that says Back us on Kickstarter and Goes to Kickstarter, that'd be a perfect example of where to use a different product template. So, let's take a, we've set page.contact and you could see if I switched to page and hit Save and refresh, look at that, Contact us, Talk to Kurt. Here, it's that other page template we made complete with author and date. We'll set that guy back to page.contact and hit Save, refresh, now it's back to this. So, let's go look at page.contact.liquid. So, if we go down, let's see form contact, it is that simple to add a form, very, very simple stuff and endform. That's it, and this guy is our form. Forms are very simple in Shopify but that's its own separate thing that we'll talk. Actually, I don't think we'll get to it in this, this one. Okay, so let's do, I talked about product.liquid, so let's try that. Let's look at how do we make one, how do we make one of these alternate templates? So, I got product.liquid here, click Add a New Template and create a new template for and we'll say product called Alternate. We'll use that example, let's call it Kickstarter. Boom, I've now got product.kickstarter.liquid in here, and I don't want to mess around with it too much. But, let's change something about it. Let's find something to change. Let's see description. So, down here let's say, just add coming soon to Kickstarter, save, and let's dive into products. Products, we've got our cool kicks, and look what's popped up in here. Now, we've got product template and product.kickstarter, save, view it, and now, there's a line we added, Coming soon to Kickstarter versus if I go, let's go back to, look at any other one, it doesn't have that line. So that's, it becomes very easy to add these templates, that took a few seconds, and it's useful for clients who say, "Well, I want some products to look like this layout and other products to have this layout, and I want to be able to manually choose." Okay, so you just make an alternate template for them and then it's just as easy as picking it in here. So, it's very nice, very easy for everybody involved. I like it a lot. It's a great feature. We use it often. I want to talk about snippets. We've seen snippets. We messed with them a little bit but we haven't made one ourselves. We haven't really dug into it. So, we've got our snippets folder and in it are exactly that snippets of code. There's two reasons you'd want to use a snippet. The first is, so that we could take a dry approach. Dry being don't repeat yourself. We don't, if a piece of code appears multiple times, we could put it in one snippet, include it anywhere we need it, in multiple templates, and then we can just, if we have to update it, we can update it in the snippet and it updates everywhere across the site automatically, which makes it very convenient. The other thing, we might want to use it for is just to keep the code clean, and that's really for us, as humans, trying to sort through it and see stuff at a glance. So, right now that's what I want to do as an example. So, oftentimes, let's say a client has or you have an older theme and for whatever reason you want to keep it, you want to upgrade to a new theme, but you want to add a new feature like open graph tags. Open graph tags are describe things, describe the content of a page to search engines, to social networks, and then you get that nice, rich snippet. Sorry, well, yeah, rich snippet but rich data when people share it. So, here I've got from Shopify, from Github, I've got all this code, and I'm going to copy it and all that code lets us create, handles logically our open graph tags. So, if I go back to my home page, under helpers I'm going to paste it in there. Look at that, it is huge. It takes up a ton of space, doesn't look good, kind of a pain if I have to work on the theme if I'm working on it. Doesn't look clean like it did before, so instead of doing that, we're going to create a snippet and to put that guy up, it asks us to create a new snippet. So, let's look at what Shopify had called it, social dash meta dash tags. So, we want to make sure that we're using a descriptive name so that we could see at a glance, and if anyone else has to work on this theme, they could see it at a glance what we're doing. So, we'll do social dash meta dash tags. We don't add that liquid to it, because when we create snippet, Shopify does it for us. All right, now I've got it but I just have an empty file, so I'm going to paste my big block of messy code in there and save. Okay, so I've got this code, I can now reference this in any template using the command Include. So, let's go back to theme.liquid and in this helper section, we're going to add it. So, let's say, it's very easy, we do curly brace, percent include the command make sense, and single quote, social meta tags and then we close it, easy, save. So, here we refresh our page and to us it doesn't change anything, so we have to look at the source. Scroll down to where did we get, helpers and then here is, we got one, two, three, and here's where it starts. Unfortunately, added a comment in there so we can see that at a glance. But there, it's intelligent, choose to if then it's created our open graph tags for us. So, let's go back, and all it is with this one line, the single include and if we go back to our social meta tags, we could see this first line here, is this line here, so it's kept it clean, it's made it easy but let's try something else. So, I've got theme.liquid, got my include, what happens if I spell it wrong? So or I mistakenly add up liquid to it. Okay, we'll save it and let's see what happens. We get a nice little error code, it's human readable so that way we could debug this easily, nice feature in Shopify. They're taking care of us. So, we've got liquid error, could not find asset, and it's because it adds dot liquid for us. So, that's easy enough to fix. Makes life simple. 15. Checkout: Let's walk through our shopping cart page. It's an important page and it is shockingly simple to work with. Actually, the way Shopify set it up for us, it's very straightforward. So we're going to find out just how easy that is. To do that, we're going to look at our cart.liquid template and just as with walking through other templates, we're going to apply what we learned here and go through the cart. So if we're going to do that, we should have our reference open, cart objects. There's really very few objects the cart uses in here, and then as long as we're at it, we can also look at the cart.liquid template which gives us some references to how things are supposed to work. So in cart.liquid, first, we've got this if logic because what if nothing's in the cart? A great modification to the theme may be to do- so here, we've got if cart.item count is greater than zero, if there's items in the cart but if there weren't, we could modify it to say, "Here's some featured items. " Which might be a clever way to alter it. So here, we do have an item in the cart and we'd hope so. We hope people are buying from us. Typically, in most themes, it's just going to be a table. That's the way they tackle it. We've got our heading, just cart general title, this guy, this is just here again for internationalization. The cart is just a form. It's a form and it posts and that's it, but that makes your life really simple with using this, especially if you just have HTML/CSS skills, you don't have to worry about messing with Javascript to get this form to work. So here, we could see, we've already opened our table. It's a very common way to do it. The labels for the cart, again, we've got these internationalization labels, and we head down, and the first thing we find is our good old friend, the for- loop. Items in the cart are not referred, they're products, they're not referred to as products, they're called items. So for item in cart.items, it's going to loop through. So each item in the cart, in this case, is a row in that table as we run through it. Here, we've done a nice thing. We've got the image in here. Putting the image in the cart is great boost conversions because it helps the person understand, "Yes, this is the item I'm buying, I'm going to get what's pictured." So here, we add the URL to it, so they can click back which isn't a bad idea, if someone wants to check something. And you're here, then we grab the image source and we even throw the old tag on there, with the title. So if we hover over it, should it display the ol' tag? Let's inspect the element. There it is, alt good ol' shoes, so it does report the product title in there. Hey, let's head back, keep looking through this. So then, same deal for the- we want to display the product title. So it's item.product.title and up here, we do the URLs, we link back to it unless it's a variant. So if it's a variant, what are we doing here? Unless title contains default and then we have, ah, so we've got a small tag with the variant title, very clever. So if the shoe came in multiple options or so let's say, different sizes and I pick the size, it would appear here. Very clever. So that way people know, "I'm getting the right thing." If I just saw the shoe without the size or the color, that might confuse me, worry me, kill conversions. Oh here, we have a theme setting. So if in my settings, I've enabled carts or vendors. It's going to show who the manufacturer, item. vendor. So we scroll down through here. Okay, so here, it's talking about item properties. Item properties is an interesting theme modification and you may want to have, let's say, you sell monogrammed shirts. You know that's off like customization of personalization on the product. You can use the line item properties to store individual variables pieces of information about the product. I mean again, this is a theme modification. It's not standard, depending on the store, you may or may not need it. Most won't but there are definitely those out there that do and then you can write in multiple line items. So here, we can see p. for, p in item properties. P.first, check and uploaded file was associated. So he'd even upload files with it. So let's say, were printing something. Here, we could do that. So let's going forward, and here, we could see they've added the comment. It's optional and they've got the link to the documentation on how to do it, how do I collect additional information. This is in this case, we're doing it in the cart and then will post an e-mail or a confirmation, the order e-mail and you have to modify that as well to make it work. Okay, going forward we've got this guy, cart change line forloop.index. We might think this remove button is some complicated thing but if we look at it, it's really not. It's they just use, you know, we're just posting to a form. We've got a link here, so cart change, we've got this quarter string line and forloop.index. So if you remember from our earlier adventure with loops, forloop.index just outputs what iteration in the loop we are. So here we've got, this is line one. So forloop.index just outputs one and if I add two items, it would become two, and then using that query string, it then sets the quantity to zero which functionally removes it. So when you remove an item, you just set quantity equals zero as a core strength. Okay, then we display price again using filters. We want Shopify to render the currency for us. So we use the money filter which formats it nicely and adds the currency to it. Going on down, we may want to change the quantity. So here, very simple, it's an input, and then we've got right here. So update item.id. Item.id is a unique number instead of the handle for the product to identify it and then value becomes just whatever that item quantity is. Cart label total, same deal. So it's going to grab, we've got item.line_price, and then again, a filter to set it up as to form it as currency. Now, the reason we've got- instead of, we've got price up here and line price down here. This one is the price of times quantity, so line price is price times quantity for that item, and again, you don't have to do anything, Shopify is calculating this for you. Let's head down, so we've got if. Here's another theme setting which we haven't talked about yet but we will. We've got a theme setting for cart notes enabled. If the cart notes are turned on, then it creates a form field for adding a note, and one note about notes, you can only have one in your cart. You can't do multiple but then there's work arounds, there's other ways to write additional information. But for just a regular cart note, these special instructions, you could put it in there, and that's probably, every theme supports this. So this is often what people use as a work around instead of having to mess with like lining out properties. You could just say, all right, make a note for whatever it is the thing they need. It's the easy way out. All right and then, regular stuff. Once we're back, up here, we've ended the loop. Once we're out of the loop, things get even simpler. Really, we just wanted to display the subtotal and our checkout button but how does that checkout button work? Okay, what do we got? Input check out, cart.generalcheckout. So we could see it's incredibly simple. It's just an input and let's go look at the documentation for this thing. Template considerations, proceeding to the checkout. All it's doing, because the cart is a form, it's just posting the form to Shopify and you just need the input, that's it. I mean, it really is as simple as it looks. It's all there is to it. So all right, we've got to check out what kind of modifications could we do this thing? We can do line item properties which there's documentation guides available to do that. We can also do a couple other things. We've got our subtotal, $110. Let's say, we offer free shipping. We could add logic in here that displays, we could use if then else. So we could say, subtotal is over a 100 bucks, it display a free shipping message. So let's try that. Here we go. Let's see find my price. So we've got cart.totalprice. Let's copy that guy. We're going to include it, we'll just put it right in this paragraph tag. So, let's see. Percent, if cart.total price is greater than 100, that's it, you qualify, I'll say, plus free shipping. Okay. Let's close our statement. Percent. Endif. Cool. All right. Save it. Let's see what happens. Still, we got that, plus free shipping. Okay. Now, I did this funny thing here where I've got this number. Why did I do it that way? Okay. So, let's knock it down to 100 and see what happens. Actually, here. We'll do it the other way, equals 100. Save. Still works. Okay. But our price is 110. So, add double zeros on there, save, refresh, still displays. Let's add another one on there. Now it doesn't appear. So, what's going on here? Why is it doing that to us? The reason is, the price, if you don't have that filter applied to it, Shopify expresses it as in cents, in pennies. So, you have to multiply, if you're doing math like this, you have to multiply times 100. That's all there is, what's going on there. But that's a very nice, very good simple fee modification anybody can do. That also boosts conversion rate. We often do that for clients, if they offer free shipping. All right. Then that's going to bring us to "Checkout". So, when I'm in the cart and I click "Checkout", we know it posts a form, url. Shopify takes care of that for us, and it sends us to here. Here, we've got, this is the newest version of the Shopify checkout. It's beautiful, it's responsive, but if you don't configure it, it's very plain. It may not necessarily match your store. If we've got, we have this "continue shipping method" button. We don't have a logo up here. If we go back, I've got these big bold beautiful Helvetica fonts and everything is in grays. Maybe not the best for conversion, but it's certainly pretty. So, how do we do that? What can we do with this check out? If we head into customize theme, the regular theme settings, Shopify automatically adds this panel, this "Checkout" panel. If we click that guy, we've got a couple options here. So, the first is custom background. So, we've got no background up here. So, let's look at demo store, a real store, Tattly, very successful Shopify store, sells temporary tattoos. If I click check out, well, look at that. There is our banner. They even have their logo matches. Well, here, your logo image, and even if you've already uploaded an image to your store, you just select "Storefront" and done. Your image is added. It's that simple. Then, depending on your store, if your logo is on the left, center, or right, you can make that match. So, it carries over. So, your masthead, which is what people see first they read enough pattern, they'll see that first and they'll know this is the right site. This looks the same, this feels right to me. We can go crazier, we get the "Main content area", we could set a custom background. I've actually never done it. I want to keep it clean, looking nice. The "Order summary", we could set it. So, here, let's go back. Left side is that main content area, right side is that content summary area. That's what they're referring to when they talk about those backgrounds. You can also set the background color. So, background color, here we go. Let's make it a little pink, give all hue there, save changes and see what that does. So, we've really made that stand out. Maybe you notice something cool that happens here. I'm not sure how they do this magic, but the font, the color for this looks like it's set automatically for us depending on what background color we choose. We can see, had we picked a logo, it would have popped in there. So, let's go back. Let's get rid of that guy, our logo. We'll set it back to none, and we have a couple of other options here. So, "Typography", we can't pick any font willy-nilly, but we do get access to some system fonts we could pick. We also have a nice selection, a pretty wide selection of Google Fonts that load. A lot of themes use Google Fonts. So, these are very common choices. We can also pick themes that fit with our, even if it's not exactly, you can get one that's close. Most people aren't designers, they're not going to catch it. So, let's see. For "headings", I like "Oswald". Give it a nice label, and then for our "body", we'll do, what's a good match for that? Actually, you know what? Here, it's one of my favorites. All right. We've got "Accents", "Buttons" and "Arrows". I definitely want, my "Add to cart" button is for conversion any way. I want my "Add to cart" button, my "Checkout" button and my "Proceed to checkout" button, my "Purchase" button to be that same color. In our theme, we've already got them grey. So, let's go ahead and set that, set those accents to grey, set my button to grey, and arrows, we'll leave red. Red seems like a good color for arrows. Okay, let's refresh this guy. Look at that. Already, even though we don't have full control of this, total access over this template, unless you're using Shopify plus, we can modify it enough where clearly, this checkout looks different and branded than this other Shopify checkout. It looks different than that. Here, we're in a later step in the process. So, here, you can see this looks different than this guy, which definitely looks different than the original, the default template. So, just make sure you're always, whether it's your store clients, always setting up those theme settings to match the branding of your Shopify store as closely as possible. That's going to reduce cognitive dissonance and will help people purchase. 16. Theme Settings: Now that we've learned all these Shopify skills and we know Liquid and themes structure in our interface, I want to apply it all in a way that gives us something useful, something that a lot of stores can benefit from. So, a very common modification we do is the infobar. So, if we look at Tattly, they've got this piece of news at the top, sign up for a weekly Tattly Tuesday newsletter. If we look at everestbands.com, they've got ships worldwide, free shipping. That's very common. It's a great place to declare free shipping, to announce sales or timely stuff. Here, we've got Bandon Dunes Golf Shop, they're also offering free shipping. But we want to make it so the client can edit it. So, what we want is a theme setting in a theme where the client can easily update the text in this infobar. Okay. Well, we're going to learn how to do that. So, here's our Skillshare thing and we, very depressing, we don't have an info bar. So, we're going to learn how to add one. If we head into our theme.liquid, we want to place that right up in the body. We could just paste this in here, but we're smarter than that. So, we're going to do an include. So, first let's create a snippet and we're going to create a snippet called info bar. Makes sense? Again, we want descriptive names. We've created our infobar.liquid. Now, I'm going to be a bad boy. I know, I shouldn't do inline styles, but so that we could see everything and since we're using a snippet, we're going to do it. I've already written my CSS styles here, we're going to call it promo banner. I'd like that Tattly style, I want the white on black text. Quick tip here, never use all the way black or all the way white. If we do off black, off white, no noteworthy difference, but the OSS anti-aliasing will work better. All right. We need to put in our HTML, our content. So, here and we'll format it nicely. First, let's just see it with free shipping, and let's save our infobar, and we'll head back to theme.liquid. Let's put it in there. Include 'infobar' and we'll close it. So now, that content we wrote in our snippet, it's going to get dropped right in there and let's see where it ends up. There we go, beautiful. We've got a free shipping bar, very pretty. But if we know the content's never going to change, we could stop now. But we want the client to be able to edit easily and we shouldn't expect them to be running through theme templates editing HTML. Some people do, some people can't do that. But even if you're doing it for yourself, make your life easy, make it a theme setting and that's what we get to learn right now. So, here, let me grab settings. So, settings, you can make your own variables here, your own. So, settings is an object and then the dot whatever. In this case,.promo text. You can name this whatever you want on your own. But again, make it something descriptive. So, here, going on with this theme, we're going to call it promo text. For the first time, we're going to discover in the settings file in Settings. So, let's open up Customize theme. So, there's these guys, these settings. That's part of the theme, you control that. In editing the theme, you can edit whatever you want there. Now, let's see how that works. We go down to Config, that's this Config folder. So, inside the Config folder, settings data are the current settings and settings schema defines how those work. A word of caution here, and I may or may not mess this up myself, is comma separated values are very important. If you miss a comma, this thing will break. So, if you mess with this, stops working right. First thing to look for is disturbed commas. You could see the way they work. So, we've got open brace, name header. Customize theme, header and then, you know what to expect. The first one is going to be logo in here. Let's look down. Type header, content logo. Look at that. So, we want to add our own in here, all right? I've already written it, let's grab it. Here, we've got, there we are. So, first, we want to be able to set our text. So let's grab that guy, paste it in here. All right. We'll make it the first thing, so it's easy for us to find. Digging through settings' files is a pain. So, make sure you sort things logically and label them nicely. But again, so we're going to say, settings, type is text, ID is promo text. So, this is the type of field it is, ID is the variable, very simple, and label is promotional banner text. This is incredibly easy. With three lines, we just added a theme setting, that's great. So, here, we'll refresh it. This guy still works. So, let's refresh our theme settings, see what we got going here. Header, promotional banner text. All right. So, we'll say, so we could see a difference, free shipping over $100, save our changes, and let's head back to infobar. So, we've got settings.promotext. Let's save that guy. It's refreshing. Look at that, free shipping over $100. Well, let's try it here. So, let's say they change it. It becomes over 120. Save it. Refresh. Look at that. So, it updates. It took us a few minutes to be able to add this really easy to use theme setting that anyone can then use to update their theme. But let's say, you may not always want that infobar. So, we've got a solution for that too. All right. We have to add a new theme setting and that's going to be called a checkbox. So, let's head into settings schema. Above our promo text, I want to add a new one, let's add this guy. So, we've got type checkbox, tells us that the input, is the input type, that's going to be, as you guessed the check box, instead of text. Our ID is promo banner, so that's our variable name that we're going to store this in, and our label is enable promo banner and that's what it says in the theme settings. So, save. If we refresh this. So here we've got our promo banner banner settings, but it doesn't do anything yet. We got to add a little bit of logic here. So, let me go ahead and copy it, make my life easy, and we'll talk about it. All right, infobar.liquid. So, we've got this guy in here, our snippet, and we're going to add an If statement. If settings.promobanner. So, it's smarter to know that this is a Boolean condition. So, if the checkbox is unchecked, this wouldn't appear. Then we have to close it, endif. Easy. Save. So, now we have it checked here. So if we refresh, it should still be here, and it is. Now, let's say we're not offering free shipping all of a sudden, let's uncheck it, save, refresh and it's gone. Perfect and wonderful. It's very easy to add theme settings, so that either you can modify theme quickly, you can have a staff member, you could do this for a client. It is phenomenally easy, I like it. Quickly scrolling through here, you can attach files in your theme settings for different stuff. So, that's how we change out the store logo, of course, fave icons. We can also use these same variables and these theme settings. We can also use those inside our CSS file. Our CSS file is also a.liquid file. So, this becomes very handy, not just for client work, but also for quickly modifying your own store. 17. Making Money with Shopify: So, if you're like me, you want to make money and there's nothing wrong with that and you can use the skills we've learned here to do that. This is just one step on the way to do that. Our step one was spin up that Shopify partner program and getting the Shopify partners door. Well, once you have proven Shopify experience, five stores in that partner account, you can apply to the Shopify expert's program, and I want to show you that. So here's my expert's listing on Shopify. You know they vet you to prove, once you've got five stores, it proves that you know Shopify. You know what you're doing. It can get you into the experts program which is really a phenomenal lead generation tool. So you can put in your expertise. There's different categories: design, development, marketing, photography, set up. Put in a description, links to your website, and then you can have your happy customers add testimonials to you. So, someone is looking for help, they could choose a category, click contact expert. It opens up this form and immediately, you get an email about it. So, once you go from Shopify partner to expert, you're now part not just of a useful platform and a useful community, but you've got this incredible business tool for generating leads. But there's other things you can do too, of course. You can make a theme, a custom theme submitted to the store and those do very well. Shopify handles all the delivery for you and you just get the money PayPaled to you, which is great or if you're feeling like your code skills are up to snuff, you could submit apps and people need and use apps all the time. The advantage there to doing apps is it's recurring revenue. Most apps are subscriptions. You pay one monthly fee and then you get that passive income that recurring revenue which is great. Let's see. Let's look at a couple of these things. We've got Setup Experts. Setup experts is very straightforward. All you have to do is assist people in setting up their store. This is probably the easiest lowest barrier to entry and it's nice because with a setup expert, you're going to be often spinning up new stores and then you get a 20 percent revenue share through the partner program of whatever that client pays to Shopify. You then get 20 percent PayPaled to you, which is very nice. At the same time, you'd probably also want to apply as a designer. Designers, the folks you would look to tweak a template like we did with the info bar which was very convenient and then getting a little tougher beyond what we discussed would be development, where you can add features and private apps to stores. Of course, there's space for marketers and even photographers which is great. So, you don't have to pick one. You can apply to multiple. So, once you get into that ecosystem, keep growing, keep going. It's just a phenomenal community. As a success story, we make a full time living comfortably and with very little stress from Shopify because they provide us with a lot of support, a lot of resources, even creating this video series. They recognized and reached out to me and we talked and set it up and they are very helpful. They are really generally useful people an I'm very grateful for them. So, consider it.