Shopify Theme Development: Build and Customise Your Own Online Store

1. Introduction: Hello and welcome to Shopify Theme Development: How to build or customize your own online store. I'm Chris, I'm a top teacher here on Skillshare.com, covering topics such as web development and online freelancing. And in today's course, I'm going to take you through an efficient process to building and customizing online stores using the Shopify platform. Shopify is one of the leading e-commerce platforms in the world with over 800,000 active Shopify stores, and in my opinion, the most ideal place to get started building your first online store. As a designer or someone with basic web development knowledge, all you'll need to unlock the power of Shopify is some basic knowledge of the platform itself and its templating language called Liquid. And that's exactly what we'll get into in this course. In the following lessons, we're going to focus on building out and customizing your store front through the use of a Shopify theme, which is basically like a template that determines the way that your online store looks and feels. We'll learn about theme structure including layouts, templates, sections, and snippets, how to edit your code efficiently and instantly update your storefront, and finally, how editing your code can not only update the look and feel of your website, but also provide options within your Shopify admin to dynamically add and customize content. By the end of the class, you should have a solid understanding of what you can do with Shopify themes and the confidence to make changes when needed. Whether you want to sell your own products, or use these skills to help businesses as a freelancer or agency, this course will get you started on the right track with Shopify. So if you're ready to get started, click on the next video and I'll see you on the inside. 2. Required knowledge & tools: Before we get started spinning up our online store and editing our theme, it's important to discuss who this class is for, and what skills you should have coming into this. First of all, if you're someone who's EVA, already selling online, about to launch their own online store or working in a role where you work a lot with the Shopify platform; it definitely helps to know how your storefront is generated, so that you can find the right place to make changes. On the other hand, you might be someone like myself who might not have their own store, but are excited about catering to the 800,000 plus sellers on Shopify, who will probably need some help with their theme at some point. To me, learning Shopify theme development is a great opportunity, to gain a valuable skill that you can use to offer services to Shopify sellers. However, as i touched on in the previous video, this course is going to benefit those who already have some knowledge and skills in HTML and CSS. If you're completely new to those languages, i highly recommend you learn a little of those two first, and seeming you're right here on skillshare already, a good place to start is my previous course, Web Development Fundamentals HTML and CSS. Other than that it's going to help to have some experience with a programming language like JavaScript or PHP, as Shopify's templating language liquid, uses basic control-flow and iteration blocks to display content. I'm talking about simple things like four loops and If statements, which should be super familiar if you've done any programming in the past. If not, loops and conditionals are pretty basic and especially easy to understand and liquid. You shouldn't have too much trouble regardless. Something that's kind of obvious but still worth mentioning, is that you should have some familiarity with the Shopify platform itself. Whether that's as basic as knowing what it is and what it does or better yet, some experience with adding and organizing products, pages, and blog posts within the admin. The more familiar you are with the platform of course, the easier it's going to be to understand what's going on. Shopify makes managing your online store as easy as possible, so you don't necessarily need to have worked with Shopify before to learn the things I'm about to teach you in this class. Finally, to briefly cover tech requirements, just like any of my web development classes, the only tools you're going to need is a web browser and a code editor. You'll also be using command line a little bit in this course, but that's a software that come standard in any operating system. Now if any of this sounds confusing already, then i definitely recommend you take a step back, learn some Web Development Basics and come back to this class at a later date. A good place to start is my course here on SkillShare.com, Web Development Fundamentals, a beginners guide to the web. To quickly summarize, all you'll need is some basic web development skills, with HTML and CSS, a web browser and the code editor, and you should be ready to go. 3. Creating a development store: To get started building and customizing our own Shopify theme, what we're going to need is a Shopify store. Lucky for us, we can build a free store using a Shopify partner's account. Now this account is completely free and we need to join the partner program in order to get it. Alternatively, if you do have a store already, this first part, where we sign up to partners and log into the store through the partner's account, is not going to apply to you. But everything from when we get into our development store is going to apply to you and your store. All you need to do is log into your store. Otherwise, if you don't have your own store already, you might want to create a development store. What is a development store? Well, I've got a article from Shopify right here to look into. It's basically a theme that we can do all the different things that we would do in a normal Shopify theme, but with some limitations right here. The idea of a development store is as a Shopify partner, as somebody who develops Shopify themes or works with Shopify clients, you would create a store, work on it, develop it, and then pass it off to the client later, and then that becomes their store, at which point then the client or the seller, whoever it is that's owning that store, is going to pay for that store moving forward. It's a way to develop stores without having a Shopify account or Shopify plan yet. This is perfect for our purposes because we are learning how to develop themes. We don't necessarily want to pay the $30-300 a month to Shopify in order to play around and develop themes. I already have a Shopify partners account. All I need to do is click Login. I'm not going to go through the whole signing up process, should be pretty straight forward right now because I am an affiliate, it'll go into my referred stores. But if I click on top here at Development Stores, you can see that we have a button here to create a new store. I'm going to click on that and I'm going to give the store a name, Chris' Skillshare store. I'm going to create a password using my password manager. This one will do, put it in here, and make sure you save that password somewhere. It's going to require your store details, so I'm going to put in some fake details here, and I am going to choose a store purpose. We can choose playing around. I'm going to click Save and as soon as I click Save, I'm going to need to save that password, of course. I'm going to create a new document anywhere, you can write this down anyway, and I'm going to note this password, Shopify Store, password. Look how quick that was. We have a store already, and this store is free to use. We didn't have to create a plan or anything. Obviously, if we wanted this to be a legitimate store, we would have to pay for a plan and then probably get our own domain. But now we can work with pretty much a fully functioning theme and learn everything we need to know about Shopify theme development within this environment. At this point, if you had a store already, this is what it should look like when you've logged into your store. We should all be on the same page right now. To get us familiar with the Shopify platform, I'm going to be talking about these menu items and what you can do within Shopify in a later video. But for now, the focus is on themes. We can find our themes by clicking on Online Store and going to the first menu item called Themes, which is automatically selected. If we want to view our store, we can click View Your Store right here. It'll come up with our store names separated by hyphens.myshopify.com. As you can see, we have a fully functioning theme straight away. What Shopify have done is they've loaded in a free theme for us to use. This one is the Debut theme, but it's not necessarily going to be the case for you. This is subject to change, but it doesn't really matter what starting point you start with. Everything we're learning from this point will be the same. Currently, you can see that we're running Debut theme, and over here we have actions, so we can preview the theme. We can rename the theme, duplicate it, download the whole theme. We can edit the code, and we can edit the language file. We can also click here to customize and that gives us a user interface that we can change things about a website without digging into any code. It's really cool. Within our theme development, we'll show you how to create your own customization options, which is really simple and one of the great things about Shopify. We're going to get into customizing in one second, and I'm going to show you that. But before we get into that, I wanted to quickly cover something that might trip you up and that's in your preferences, you will have password protection enabled by default. That means that if you want to share the store with anyone else to look at, they're going to need this password. This is going to be login screen that shows up and they'll have to put in this password in order to see it. If you're okay with people seeing it, you can disable the password protection. For our purposes, I don't think we really need password protection, but it's there if you want, and it's enabled by default. Let's go back into our theme section and click Customize, and I can show you the super powerful customization options within Shopify. By default, you'll be customizing the homepage of your theme, but you can click on this list and it gives you all the different templates that you can edit depending on what theme you're using or how many templates you've set up within your theme. This list can get long, but for our starter theme, Debut theme, that's all that's available. To draw your attention over to the left here, with the first tab selected, we have access to all the sections within our page. The header and footer sections that are included with every page, so if I go into, let's say, Collection Pages, you'll see header and footer are there as well. That stays standard across all pages as long as it's set up in the theme file. We'll get into that, the actual code structure in a later video, but here is the visual representation. If I click on any of these sections, I have customizable options. I can add a logo image instead of the name of the store. I can customize the menu, and this is all set from within the code, you have access to these customization options, which is really cool. Obviously, the footer is the same thing, but down the bottom of the page and here you can see what's called blocks. We're going to learn how to use blocks in a later video, but essentially, we can add an extra block here. I don't know if it's going to update straight away. Yes, quick links is here. If we remove that content, you'll see that we have less columns in here. We can actually go through, add, and delete different bits of content. We can delete the newsletter and then now we have two blocks and they automatically fill up the space evenly, which is really cool. I'm going to reload because I don't want that change to save, and then we'll talk about the sections between header and footer. Now this part here of our sections customizer is going to be different in different pages. If we go to Collection Pages or Collections List or any of these, you'll see that there's a single section and we can't add or remove that section from the page. That's because that section is hard-coded into the page and we will see that later when we look at the code. The difference between pretty much every other page in your Shopify site compared to the homepage is we have this content for index section. I shouldn't use the word section because I'm going to get you confused. But we have this part of the sections sidebar that we can add a section through these different presets. Let's say we wanted to add a map. If this section is set up in our code, then we can add it and we have all these customization options. We can reorder the sections, so I can put map at the top in case I want to make that prominent. I can show and hide the section and then I can remove it. Basically on the homepage, how it's set up is you have your header, you have your footer, and then you have a list of sections that stack on top of each other that you can customize. Let's try a more practical example, there's no About page, but let's say that you are on an About page and you wanted to put that map in. You could definitely insert that section, but you would do it from within the code. I'll show you how to do that once we dig into our theme code. I'm a bit concerned because this video is probably a little bit long. But to cover the other tab, this is your theme settings, and we can also edit what settings come up in this section as well through our theme code. But these cover settings that are going to be used throughout the whole website, so headings and links, body texts, sales price, what the color of buttons are going to be. This is site wide stuff, so we can put whatever we want in here through our own theme development, but we've got some standard options here, and this will affect the entire side. We've got the Sections tab, the Theme Settings tab. We've got this selector here to select different pages to customize. Up here, we can see our website on different screen sizes. If we want to see it fully expanded, we can click this button and it'll expand the full width of the screen. The only problem with that one is you don't get access to your customizer. Alternatively, you can click on this one and you can see how your website looks on mobile. You might have different customization options for mobile or for desktop, so you might want to preview them or to see how your website's looking on mobile. A lot of online stores, the traffic is more than 50 percent mobile, so it's very important to have a look at that tab. Then when you're done customizing, you'll want to click Save. One more thing that I didn't cover, theme actions. This is the same menu as what you had. If we go back to where we were before, this theme actions is the same, or maybe a little bit less options, but it's essentially the same as actions right here. We're going to click into Actions probably in the next video, but I wanted to show you the customizer. If we click Save, those changes will be live on this theme. But I don't want to make any changes, so I'm going to click Reload and then we're all at the same starting point. Essentially, this is the user interface you have to interact with your theme. Now what we're going to do is dig into the code of your theme. In combination with what you do in your code plus what you do in your customizer, you have virtually full control over your whole theme, your whole look and feel of your online store. We went over the customizer in this lesson. Let's dive into the code in the next few videos. 4. Intro to Online Store 2.0: In the previous video, I mentioned that it's only the homepage that you can customize and reorder sections on. That's now no longer the case with Shopify's online store 2.0 updates. You may notice that my appearance in his video is quite different to the intro, and that's because this video, as well as a few others scattered throughout the class, have been recorded a couple of years after this class was first published. That being said, these videos should fit pretty seamlessly into the structure of the class and provide a good complement to the existing videos. Something you may have noticed is that the theme customizer, now called the theme editor in most of the videos of this class, will look quite different to yours. If you're watching this class in 2021, for instance, you'll notice that blocks appear in this tree view now, whereas in most of the videos in this class, they'll appear like this. It's important to note that Shopify is constantly changing the user interface of the theme customizer, and there's no need for immediate concern as the core fundamentals of sections and blocks have stayed the same over time. The big change that theme developers need to be aware of is something called "JSON templates". We'll go deeper into JSON templates later in this class, but for now understand that templates can be of either two types, Liquid or JSON. This is getting a bit ahead of ourselves here, but it's important to note as if you choose to use JSON templates over Liquid templates, you won't be able to use Themekit, which is what I'll show you in the next video. Instead, you can use something called Shopify CLI, which I'll use in the video directly after. I think it's a good idea to know how to use Themekit. If you're working with modern themes, those are the themes that created after June 29, 2021, you may want to skip the next video. 5. Setting up Themekit: In this video, we're going to set up something called Theme Kit in order to develop and edit our code on our own computer. If you've done any web development in the past, you understand that editing from a online web browser like an interface like we have here, is not going to be best practice. We can of course, if we wanted to make any changes to our theme, go in here then we have access to every theme file within our theme and we can change things. But it's a lot cleaner and a lot better workflow usually to develop locally. That's why we will be using Theme Kit. To warn you upfront, Theme Kit does require a bit of configuration. I know configuration is my least favorite part of web development. I'm sure you guys aren't fond of it either. But just so you know, this is one lesson here of setting up Theme Kit and then we'll be straight into developing and changing our online store. To learn about Theme Kit and what it is, I'm just going to type in Shopify Theme Kit into Google. The first result if you've worded your query correctly, is this one right here.This will tell us in one word what Theme Kit does. It's a command line tool for Shopify themes. We just download the application and with a tiny bit of setup you're off to the theme creation races. Just to give some context and explain why we need a tool like Theme Kit and what it does. Essentially, we are using a third party proprietary system with Shopify. When you're developing other apps and websites, you might spin up your own server on your own computer. Then you have your code running on that server and you can edit it directly from within your computer. The place where your code is being served, and the place where you're editing your code is the same. With Shopify you can't exactly do that because you can't run a Shopify store on your own computer, and therefore, you can't run a Shopify theme on your own computer. How it works is we're going to be interacting with the code I just showed you in our Shopify theme. In order to see all of our changes that we're making to the code, we have to actually run the theme on Skillshare servers and go in and view it like we have done beforehand. With that in mind, before you start playing around with your theme and making edits to your code, which could break your website, you will want to do that in a different theme from what you're currently running. If you're familiar with staging and web development, this is essentially how you can stage your changes with theme development. What I'm going to do is instead of editing this theme which is currently live on the website, I know this is just for practice and we're using it just for practice and nobody's going to see this site. But say for instance, you wanted to edit a theme that was live already. You don't want to edit the code that's already running, the theme code that's already running on your website. Maybe people are already browsing your site and making purchases. You want to create those changes on a separate theme and then move them over when you're confident with them. The way we're going to do that, is all you need to do is click in actions and then click duplicate. Now what's going to happen is it's going to create a theme and it's going to default to copy of, the name of the theme. But as that's spinning up, we can rename it. I'm going to call this Skillshare Dev Theme. I'm going to rename that. In order to see what our website or what our store would look like with this theme, we click on actions, preview, instead of view. Then when we look at it, the URL is going to be the same, which is confusing. But right here we know we are previewing our Skillshare Dev Theme because we've got this bar here. So if you want to share this preview with somebody you can actually click, share preview and you get this link to share with anyone for the next 14 days. You can also hide the bar, which I wouldn't recommend unless you have to because, you don't want to get confused about which theme you're currently editing. Or, you can click close preview, and this will take you back to your actual store that's running the live theme. Because we just duplicated the theme and we didn't make any changes, it's going to look exactly the same. So, moving back to Theme Kit, what we're going to do is first install it and then we're going to configure Theme Kit so that we're interacting with that particular theme. Then, we are going to download our theme to our computer and then we can start editing it. So the things we're going to need to install it is probably a package manager. I use Homebrew on the macOS. You might be using Windows in which they recommend Chocolatey. I already have the Theme Kit installed, so I'm not going to go through installation myself. Hopefully by going through these instructions, you can figure out how to install Theme Kit, but it should be pretty simple. I just ran these commands and it worked for me. Now I have Theme Kit installed on my computer. If we go into commands, we can see the configure command. Right now if we open up our Terminal. So it's Terminal on Mac and Command Prompt, I believe on Windows. But essentially whatever your command line tool is, mine is actually iTerm not Terminal, but it's all the same thing. I'm going to navigate to the directory that I want my theme to go in. I'm going to do code. I think I have it in personal current. Now we're in this subdirectory of my code folder where I put my personal current projects. What we need to do from here is set up a file called config.yml with these details in order to tell Theme Kit what theme we actually want to edit because right now we've just downloaded it. It doesn't know to connect with this theme just yet. So that's why we need to configure it. You'll see here, we need a password, we need a theme ID, and we need the store URL. So the first one, your API password. It might be a bit hard to get your head around as a non-developer, but essentially an API stands for an Application Programming Interface. Especially with something like Skillshare, which is a third party proprietary system, we're going to need access to the API in order to change anything about our store. Right now, we only have access to what's in this menu in order to edit our store. We only have access to the options that Skillshare gives us through this user interface, through this back-end dashboard. But in order to make any changes outside of this, it has to be done through an app. So if I click on apps here, there's a few different kinds of apps. One of them is a public app. Anyone can create an app and make it available to buy or use on the App Store. You can see a couple of popular ones here. These gain access to the Shopify API and can make changes to your store. For us, we just want to change our theme. So we need to set up a very basic app, which just basically provides us the ability to edit our theme files. If I go down to here and find this link hidden below those, called manage private apps, I can head into this interface which allows us to create our own private app. You can think of this private app as just the interface for us to be able to interact with our theme code on our own computer. I'm going to call this a descriptive name, Theme Kit connection because that's really all we're using it for. I have to put in an emergency developer email, even though we're just playing around. It just won't let me submit the form otherwise, and we need to give access to this app to allow editing of theme templates and theme assets. Otherwise, this app is going to be useless to us if we can't edit those theme templates. If I click save, I will see here that it's warning me that if I create these API credentials, anyone who has these details can go in and read and write theme code. That's cool. I understand. Create the app and now we have the password. The other details are going to be your theme ID and your store. The store is very simple. It's just when you click view store, that's the name of it right there. The theme ID can easily be found by going into the customizer. Let's go back to themes, got too many tabs open here. Remember we want to edit this theme, not the live theme right now. So, we want to go in here and we want to click here and click customize. In the customizer, you can see this number hidden away in the URL, and that's the one we want to use for our theme ID. Like I said before, you can either create this config.yml file yourself or you can use this command line command in order to automatically create this file for you, given the details. It's up to you how you want to do it. I'm going to use the command itself. Now that I'm in the directory where I want my project to go, I can run that command. Just to show you, right now we have an empty directory. That current directory is completely empty. Once we run this command it's going to create a new file for us. So I'll show you that in just a second. Let's run through, theme configure, dash dash password equals. Then we go into our private app, find the password, we can just click copy here. Paste that in. The next variable is going to be store. You can click in here, grab that store address. The final one is theme id. Like I showed you in the customizer, we can just copy it from the URL. Let's check our code to make sure that we've got it all set up correctly. Yeah, looks good. Now, I'll hit "Enter". In a few seconds, it should come back with no errors. If we look at our directory, we'll see the config.yml file is in there. If I open that with my code editor, I'll be able to see that file that we talked about here is right there. Now, if I run Theme Kit commands within this directory, it knows which theme I want to connect with. The next step is to download our theme. That's really simple. The command for that is theme download. As that's running, I'll just show you it here. In the documentation, you can run theme download, and then you can specify specific files after that, or just run theme download and it will download the entire theme. Here you can see it's downloading now and it's at 28 percent. Let's just skip ahead until that finishes. That finished with no errors. If we check the directory now, we can see those folders that we saw. If I go back, which one do I want to click on? There are so many different links up here. We actually don't need the private app password anymore, so I can use this tab. Go back, click on "Edit Code". You can see that we've got the same structure. If I move this over to the side, you can see that we've got the assets folder in here, config, locales, sections, all of that stuff that was in the Skillshare Dev Theme code is now here in our directory. One thing that Shopify Theme Kit doesn't do is put it all into a new folder. I'm going to call this skillshare-theme, and I will need to go into my code editor here and change directories into that skillshare-theme. All right, I should also mention that there's another option called theme new. You can actually create a new theme. Instead of putting in a theme id, you just put in a name of what you want that theme to be, and it will create it for you. If you do that, it'll set you up with a starter theme that doesn't have all the features of Debut. I would recommend that you duplicate the theme it gives you, and then edit that one, rather than start a new theme from scratch. That's my recommendation. In the later video, we'll be covering Slate, which is even more complex than this. If you wanted to actually build your own theme from scratch, definitely stick around to the end of this class. There's going to be a bonus video on Slate. If you want to go the full process of developing your own Shopify themes, definitely stick around for that lesson. For this Skillshare class, I wanted to show you how to get up and running as soon as possible. I don't think it's necessary to redesign everything, to rebuild everything from scratch, that's why we're using Debut as a starting point. As I showed you just before, we have our theme code here on our local computer, and we can edit these as we please. What I'm going to do to do that is run atom dot, but this command completely depends on what software you're running. I use atom, so I can just select atom dot. Now, I have access to the whole project. I can go in, click on different templates, and edit them. I can go in here, make whatever changes I want but of course, I'm going to want to see what that does to my actual theme. The last thing I'm going to want to do is run theme watch, so that whenever I make changes to my local theme files, it's going to update my actual theme, and then I can look at it in the browser and see what changes have been made. In order to do that, all I have to do is run a simple command, theme watch. As you'll see in just a sec, now says, watching for file changes to the theme, and then it has the id there. Let's just make a simple change to show how this works. I don't expect you to know how to navigate around the theme templates just yet as I will show you that in a later video. But let's just say we want to get rid of these icons in the header. You can go into the Header.liquid template in sections and search for that particular part of the header. It looks like it's right here. I'm going to find the opening and closing div tag and just delete that all together. I'm going to hit save on that. If we go over to our terminal, you will see it started to process that header, and then it updated it on our live theme. If you don't have this already, you need to go into your theme that you are actually working with and click Preview. I've got it right here, and you can see I'm definitely previewing this SkillShare Dev theme right here. If I refresh the page our icons should have disappeared. There you go, there's no icons there. Obviously, this is a change you probably wouldn't want to make.We can go back and control Z to put it back in, and then those changes are going to update pretty quickly. I'm impressed at how fast Shopify does this. It doesn't slow down development too much, but there you go, they're back now. Now, you can see that we're able to edit code on our local computer, and it's updating on our theme. This is the workflow. We have our development theme running, which is just a fancy word for a theme that's not the current theme because we wouldn't want to edit the current theme if it's a live store. We run our preview, and then we have theme watch running, and we just edit the code and do as we please. We have environment set up essentially. Now, one final note before we move on to the next video is you'll still have access to go in here, and edit your code from within the Shopify website. I would recommend against this because this would create discrepancies between the code you have on your computer, and the code on your actual theme. You can go in and change this, but it's not going to update in your local files unless you run theme download. To be clear, this process of theme watch only happens one way. It's only when you edit your files locally, but if you edit them on your Shopify website, it's not going to come through to your local computer. I would choose where you want to edit your code and stick with it. If you're going to be editing it on your own computer, which I highly recommend, don't edit it here. If you do, just know that you'll have to update it on your own computer. Now, we have our environment setup, and we have all the tools we need in order to modify our Shopify website and customize our own theme. In the next video, we're gonna take a break from the actual code. Talk about the Shopify platform itself because it's good to have some familiarity with that, and then in the video after that we're going to actually go in and explain all this code we just started looking at. I'll see you in the next video. 6. New commands in Shopify CLI v3: Hello students. In this video, I'm going to quickly cover the changes that happened in 2023. What happened was Shopify CLI upgraded to a new version two, version three, which means that some of the commands in the following video, I'm going to be a little different. I covered how to migrate and the different sort of commands compared to version two on my YouTube channel. So you can go check out that video. It's a good idea in general, if you want to stay up-to-date with what the changes of Shopify because the platform is changing a lot to check out my free YouTube channel and you can see the what's coming out. New one, Shopify. I update that more frequently than I'm creating classes here on Skillshare. So what you're about to see some of the new commands in CLI version three. If for whatever reason you're using CLI version two, then you can follow the next video as normal. But some of those commands are gonna be different in version three, which at the time of recording is the latest version. So I'll throw it over to myself earlier in the year to talk about these commands for you guys so that you're not in trouble in the next video, okay. It was brought to my attention from a review of one of you guys that the commands we're out of date. So I just wanted to throw in this video to make sure you guys realize there's a new version and something commands. I have changed. So watch this one first. If you on CLI version three, now that we're all on to version three, then next step is to understand the new commands. To retrieve a list of the Theme commands. In version three, we can either check the official documentation or run the command Shopify theme from within the CLI itself. The first thing you might notice is that there is no longer a serve command. This command was what we used to run our theme code locally, but it's now been replaced with the command dev, which works in almost the exact same fashion. The big difference here is that you don't need to run a separate command first in order to log into a store. Instead, you add the store flag to the command with the address of the store you wish to login to hit Enter. And as soon as you're authenticated, the CLI, we'll start to serve that theme Code. You can see this difference as well as a few others documented here on the official Migration Guide. And you can see the full list of commands here on this page. I encourage everyone who's migrating right now to just simply check out the table of workflow changes on the documentation. And once you internalize those, it should be easy to adapt to the new changes 7. Shopify CLI for Online Store 2.0 Theme Development: In the previous video, we learned how to set up Theme Kit. But unfortunately, Theme Kit is not compatible with the new JSON templating system present in modern themes. To check if your theme uses JSON templates, you can head over to the theme section of your Shopify admin and click on "Edit code" on the theme you wish to inspect. Then simply look inside the templates directory and see whether your templates have.json on the end of them or.liquid. They may be a few here that have.liquid on them in the customer section and maybe the gift card template. But if your major ones have article.json, cart.json, index.json, pageproduct.json, if these ones are all.json, then you're working with a theme that uses JSON templates. In this case, you'll want to use the Shopify CLI instead of Theme Kit. Here's how we do that. What I'm going to do is head back to the theme section here, and I'm going to open up the official article on how to use Shopify CLI for themes. I'm going to type that literally into Google Shopify CLI for themes. You should find this article comes up towards the top. Click on that one on the official Shopify developer website. Here you can read all about Shopify CLI for themes. Shopify CLI has been around for a while now, but only recently at the time of recording allows for theme development as well. As you can see here, Shopify CLI replaces Theme Kit for most theme development tasks. You should use Shopify CLI if you're working on Online Store 2.0 themes. That's essentially themes with JSON templates. Let's go down and look at how we install Shopify CLI. I'm just going to open that up in a new tab to keep this one open. Here you can see the guide for installing it. We won't get deep into installation in this video. Here's the instructions here, depending on whether you're on a Windows, Mac or Linux computer, just make sure you have Ruby 2.7 or higher installed on your computer. How you verify that is to open up the terminal. For most users you're going to use the Terminal app. But I have something called Item, which is my terminal app. I'm going to run the command ruby-v to figure out my version. As you can see here, I'm running Ruby 3.0.2, which is greater than 2.7, so we're good. Here you can see the instructions on Mac. I've got Homebrew installed, so I just went through these installation instructions and it was pretty easy. I'll give you a second to install it, if you haven't already. Pause this video and come back to it when you finished installing. To verify that you have installed, you just type in Shopify version and you should get back a version number if you have the CLI successfully installed. Now that we have the CLI installed, close this window and go back to our getting started guide. I'm going to scroll down here to the command references, how Shopify CLI works. It's a little bit different to Shopify Theme Kit in the sense that Theme kit, you have this one configuration file, the config.yamlfile. You pass into that file a password, a theme ID, and the store that you wish to connect to and how it authenticates is through a private app, where you put that password from the private app into that config.yaml file. You would've seen all of this in the previous video so if you don't know what I'm talking about, go back to that one. But how Shopify CLI does it is they authenticate in the beginning. Once you're authenticated, you can start to serve themes locally. How we do that, I'm going to go into the Shopify CLI core command reference first. Let's click on that one and look at login. Login authenticates you to the Shopify CLI. This is the first step to basically doing anything on Shopify CLI. An important thing to note here is that you can't use the CLI with development stores if you only have partner staff member access. What that means is if I go to partners.shopify, which I often do, and login to the store via my partner account, so I'm going to go into stores and then see here, Chris Testing shop. If I click login through this link, I'll be logged in through the partner account and I will likely get an error when I'm trying to authenticate with the Shopify CLI. That's an important thing to note. If you are working with a development store, you can't use your partner login. What you need to ensure instead, if I go back to my Shopify store here and go into my settings, is that I'm logged in with the admin or store user account. Clicking on plan here, sorry not plan, users and permissions, you can see here that the store owner is Chris Testing shop admin, and that's the account that I'm logged in as. This should work. Heading back to online store themes, let's run the Shopify login command. I'm going to go back to my terminal here, run clear to clear up those previous commands and let's run Shopify login with the perimeter of store and then we just copy the my Shopify address of the store. I'm going to go in here, copy that. Hit "Enter" and it'll start to log us in. Now logged in. Usually a separate tab is open, I think because I'm already logged into the store. It didn't come up with that tab, but just to show you. So if I log out, Shopify logout, you can see I've successfully logged out the account. I'm going to clear again and then run that command, Shopify login with the store address. Hit that and you'll see it opens up a new tab for me to login. From this list of accounts here, I've got to choose the one that is the store owner, which I believe is this one and it says now authenticated successfully, you may now close this page. I'm just going to look in my terminal and you can see here it says you've logged into the store. I should be all good to go now. That's all we really need from the core commands, login, logout. You can also populate your store with data. A lot of cool little features of this tool right here. I encourage you to check out the documentation. But I'm going to go backwards and go into the theme command reference now. The button right under the core command reference. Let's go in here and you can read all about the different commands. The first one, Shopify theme in it essentially does what it says here clones a Git repository to your local machine and it also creates a copy of the Dawn example theme. If you want to start theme development from scratch, this is a good little command to use. But what I'm going to do instead is just like we would in Theme Kit, I'm going to connect to an existing theme. The way to do that is through Shopify theme serve. But we need the code from that theme downloaded on a local machine first before we can serve it. If I go back here, you can see even though this store was created before June 29, 2021, I have installed the Dawn theme. This is the new theme that uses the Online Store 2.0 paradigm. As we saw before, it's one of these modern themes that has.json files in the templates folder, as you can see here. That's what I'm going to use as my theme that I'm going to work on with the Shopify CLI. What I'm going to do is just like we do with Theme Kit, I'm going to find the theme ID of that theme, which I can find by going into the customizer and grabbing that part of the URL. I've got that in my clipboard now. What I'm going to write here is one of the commands you can see here, which is Shopify theme pull. To use this command you just write Shopify theme pull and then you put in this parameter --themeid, followed by the theme ID. What I'm going to do is first make a directory inside this Skillshare directory. I can do that through the Command on Mac, MKDIR. That's the command for making a directory. I'm going to call it the same as the theme, dawn-main. Now I have to run the command CD dawn-main to navigate inside that. From here I can run the command. I'm going to do Shopify theme pull --themeid equals followed by the theme ID, which I seem to have lost here. Just going to go quickly grab it again and hit "Enter" on that. You can see it's pulling the theme files from that particular theme. Pulling just means downloading. In a few seconds, we will see that that will finish. I'll fast-forward and meet you at the end. That's finished downloading now, so I'm going to head into that directory. You'll see in my Skillshare folder here, there is a directory called dawn-main. That is the one I created with this mkdir dawn-main command. Inside it, you can see I have all my theme code. Now that we're inside this folder, we can start to run the command Shopify theme serve to serve that theme code locally. But before I do that, because we're going to be editing some code, I'm going to stop using iTerm and start running commands inside my code editor app. This is a bit different, I think, from the original videos in the class. But I'm now using a tool called VS Code provided by Microsoft. I'm going to open up that one. It'll look a bit different to the other code editors in this class. But still, all the same principles apply. We just have this terminal here that we can run inside the code editor. I'm going to clear this terminal just like we did on iTerm and from within here, what I'm going to do is run the command Shopify theme serve. Shopify theme serve and while that's loading up, as you can see here, I'm going to go into the documentation and let's talk about what this is doing. It's going to upload the current theme. Wherever your terminal is running from, if there's theme code in there, it's going to run that and it's going to create a development theme. Now, this is a new concept. Development theme is like a Pseudo phantom theme. You'll see in just a second that it creates a theme ID and we're able to view it and edit the code. But you won't actually see it in the theme library on your Shopify store. You'll see that in just a second. Instead, you'll get a link to the development theme and link to the online editor as I just mentioned, and a preview link. For all intents and purposes, you get all the same features as a normal preview theme, like if you were using and working with themes on Theme Kit. But this one is generated when you run Shopify theme serve and disappears when you run Shopify logout as it says here. Of course, the theme code continues to stay on your computer and you can also push and publish the code once you're ready to go live. But we'll see that in just a second. If I go back to my code editor now, you'll see that the process has now finished. I'm just going to open up a terminal so you see more here. You can see that it's serving to this local address that we can look at in the browser. What's interesting is here you can see we've got a theme ID. You can see the preview link has that theme ID and the theme editor link has that ID as well. We can go in, we can customize the theme as we usually would using the same theme editor that we would use on any theme, and we can preview the theme using this link and share it with people on the Internet. If we share with them this link, they won't actually be able to see it because this is a local link. But this one right here is a public link that we can share with people. As you can see here, we've got this strange little theme name, development followed by a little code. Like I mentioned before, if we go into our theme library here, even if we refresh the page, the theme won't appear in our theme library. It's like a disposable theme that has an ID, has a customizer, but doesn't actually get stored on your Shopify store. If we head over back to that theme customizer link, we can, of course, move some stuff here and edit this. But what's weird about this theme editor in the development theme is that it doesn't appear that these changes get stored outside of this session that we're running. If I switch over to my local link, you will see that the change occurs. I'm talking about the theme editor changes here. You will see that it occurs, but when we push our theme code changes to the store later, you'll see that this won't actually push to the store. We can customize and play around with the theme editor here, but this won't actually save once we push. Be very careful with this with the CLI. I'm not sure what the thinking is here from Shopify, but I've gone and tested it and the data doesn't actually change where it should. This is just all throw-away data. I'm going to close that down and I'm going to close this public link down as well as we don't need it anymore. I'm just going to refresh our local development link. Now the cool thing about Shopify CLI compared to Shopify Theme Kit is what happens with Theme Kit is it's not actually running a server at all. What its doing is editing files directly on your Shopify store. Then you have to, of course, click View or Preview on that theme in order to see those changes and it's all served through the Shopify store. Shopify CLI changes this now because we can serve that theme locally and what this means is that it gets updated much quicker. Let me show you what I mean by this, because this is a little bit of developer's pick and for those beginners out there, you might not quite understand what I'm talking about here. But if I go in and let's make an edit. Let's say we edit this bar up here. We're looking for announcement-bar__message. I'm just going to use my code editor to find that piece of code. Instead of block.settings.text escape, I'm just going to put in. I just want to show you this side-by-side so you can see this happening. Close this down, close this down. Let's have a look at what happens when I change this code. Let's change this to Announcement bar text, something generic like that. I'm going to hit Save right now and look at what happens. You'll see that without me even reloading the page over here, it changes. It's detecting changes and updating it here on our local server. Now remember this theme does not exist in our theme library over here. It just exists on our local computer. Of course, we've got these links here, we can share with other people. But we're not actually affecting code on the theme of a theme that's stored in our theme library here. This is all just served locally. I'm saying that a bunch of times just so that it'll sink in. But you'll see with experience if it doesn't quite make sense yet, what that means if you compare working with Theme Kit compared to Shopify CLI. I'm going to make another change here. Let's just change the background color of this announcement bar to something random like blue. Hit Save on that. You'll see that that updates as well. That's a pretty obvious change. Let's open up these to full screen again. What I'm going to do is push these changes to our Shopify store. Let's head back to the documentation. In our theme commands, you can see this command here for Push. Before we do that, however, there's also this command here that we might want to run called Theme Check. We've only made a very minor change. But if we've made a lot of changes, maybe we want to run this command which will check our theme for any errors. I'm just going to close down the server because we're ready to make this change live. Run Shopify Theme Check. You'll see here there's a bunch of offenses. A lot of this is not particularly critical. Obviously, these errors were probably running before I even made those changes. I'm not sure what you want to do with that, but that is an option. If you want to run Theme Check, I'm sure it comes up with critical errors. If you have any in your code, most of the time now it's pretty clear to see when those errors come up in your browser. But what I'm going to do now is head over to push and here you can see we can upload local themes to Shopify, overriding the remote theme if specified. We can put in an options object here, or we can just simply write Shopify. I think I'm going to run these side-by-side again, so you can see. Let's increase the size of this. I'm going to do a Shopify theme, push. Here, if I don't specify any options, it will actually ask me where I want to push this code. I can push it to any of the themes already in my theme library, which is pretty cool. I'm going to hit Command or Control C to break out of that and what I'm going to do is do Shopify Theme push --unpublished. Hit that and it will now create a new theme in my theme library to create a new version of this theme with. It'll push the code that I've created my local theme into the theme library. I'm going to call it dawn-two, let's just call it that. Now, it's going to basically deploy that code to a new theme called dawn-two in my theme library on the store that we're connected to. That will take a little bit of time to complete, so I'll see you after that finishes completing. Now, it says that my theme was pushed successfully and that I can now view or customize it. But I can also head to my store, expanding my windows here and refreshing on the store. You'll now see that I have a new theme called dawn-two here. If I click Preview on that, it has all the changes that we made on top of the original dawn theme that we made earlier in this video. We essentially just created a new preview theme. Last step here, and this is not really necessary to use the CLI for, but we can also use the CLI to publish themes as well. If I head back into my terminal here, I'm going to run Clear and then run Shopify theme, publish with no options. It's going to ask me which of the themes that aren't currently published I want to publish. I'm going to select dawn-two here and it asked me, are you sure you want to make dawn-two your new live theme? If I hit Yes, that'll now complete that process. If I go back to the theme library and refresh the page, you'll see that dawn-two is now my live theme, and dawn-main has been knocked down to my preview themes. That's how to use the Shopify CLI for theme development. It's a little bit more complicated than Theme Kit, I would say. But it has more modern features and it's more developer friendly, so take some time to get used to it. If you have any questions at all, obviously, leave it in the comments. But that is the Shopify CLI. In the next few videos, we'll be learning about some basic Shopify admin and then getting into our theme structure. After we talk about our theme structure, then we will talk more in depth about these new JSON templates. I'll see you in the next video. 8. Product organisation, variants and the customiser: Before we dive into this code and learn how it's all set up, there's one thing else store is missing and that is products. An online store with no content isn't very good, and the main content that you would have on an online store by its nature is products. Right here you can see that at least, Shopify gives you some place holders, but if you click on these, they're not actual products that you can interact with. What we're going to need is some products. Now, if you are developing your own Shopify theme and you're just following along this course to learn more about how you can customize your theme. Maybe you already have some products. Maybe now is a good time to add products into your store. But if you're just here to learn Shopify theme development, and you don't have a stored or work on right now, you're going to need some demo products. So lucky for us, Shopify provides a small set of demo products through their timber theme. If we go and search for Shopify timber or Shopify timber theme in Google, it should be the first link that comes up. I'm going to click on that to give you a little bit of context, timber is archives now it's no longer in use, but this used to be what is now Slate. It used to be this starter theme that Shopify provided, now they use Slate, which I mentioned previously, but we'll go into more detail on Slate and in later video. The reason why I'm bringing you here to the timbre theme Git repository is that they still have it up and they have this CSV file for importing some products into your website. If we download this CSV file, I've already got it downloaded right there, so I'm not going to download it again, and then we go back to our online store. We go into our products menu and we click Import, just below products. We can grab that file. Click Upload, just click Start Import. It might take a little bit of time to run that, but when that's done, you will now see products imported, and you've got a bunch of example products, all of them, basically shoes. If we go into any of these, we can click View. It'll open up a new tab in which we can view the product page with this particular product loaded in. We've got a pretty nice product page already because we're using a duplicate of the debut theme, but you can edit this as much as you want. You can have the layout different. It's up to you, you have access to the whole theme code now. One thing we've got is the input breaks with the variance. We're going to have to go back here, and down in variance, we're just going to delete all variance. As you're running an online store, products are central to your store. This video is going to focus mainly on products. Here in your products page in the Shopify admin, you have the ability to duplicate view and promote. You can change the title, the description. This is where you add your product images. Pretty simple, pretty self-explanatory, putting your pricing, but the parts of your product page that I want to get into and discuss more about in this lesson are variance and organization, so product type, vendor, collections and tags. First of all, variance. A variant is basically the different variations of the product. You'll start to see what I mean by that in just a second. If I click Add variant, it gives me the option of setting an option name and a list of possible values. A pretty standard one is size, and it's definitely relevant for a product like this, not everyone is going to want the same size of sneaker. What we can do is put in different values separated by a comma, and you'll see what happens when I put the comma in. If I press 8, 9, 10, 11, 12, you can see that I have this option size and I have five possible values. So I am saying that these shoes are available in these five sizes. If you go down here, a table of variance has been created. Because I only have one option, and I have five option values, I just get five variance because you can only order the shoe in five possible variations. But if I was to add another option, say for color. Let's say, I can get all sizes either in red or black. Then suddenly my list of variance expands and doubles. That's because we need to multiply the number of values in one option field with the rest of the option fields, that will give you the total amount of possible variations given that we are able to have red in nine, black in eight. All of these different options combined together create different variance. We can add a third one in here, says material by default. I don't know what material shoes are made out of. Let's just go with a common material cotton. That's not going to increase the amount of variance we have here because there's only one possible value, defeats the whole purpose of using variance if it's just going to be one value, so we have to put in more. Let's say, Lycra, probably doesn't make any sense for shoes. But I'm just coming up with stuff off the top of my head. Three options is the max in Shopify. If I add more values to all of these, it can start to multiply and get out of hand pretty quickly and actually Shopify limits to you too 100 possible variance on every product. This obviously depends on if I do have every possible combination in stock, and as that product available, do I have cotton red size eight sneakers and red-black 10 sneakers. That's up to me to figure out what variables or what variations I have in my own store, and put those in. This is irrelevant, so I'm going to remove that. With these different options, it's going to create 10 variants for us. The point I want to get across here, and the thing that tripped me up is, these are the variance here. These are your options. All right. These are variance, these are. If I click Save on that, you'll see that we get this nice little table here and we can update SKUs here or add in variant images for specific variance. We can also filter selections by clicking on an option value. Go in here and just check the ones we want to edit and edit them in bulk. But to see what that looks like on the front end, what I'm going to do, we've already hit Save, so we can click View, and we can see what that's going to look like to the user. As you can see here on the front end, the user just gets two options, and I want it in size nine, and I wanted them black. Then they'll add to code. For us, in order to fulfill the needs of the customer who can have these options, we're going to need all of these in black and all of these in red, so I'll need 10 different shoes in total. But for the user, they just get to have more customization options. Hopefully, that clears up variance and makes that pretty clear. There's one more thing we can do to provide a better customer experience, and that is to use variant images. I've got a random picture of black shoes on my desktop. What I'm going to do is click Black, and I'm going to update images for all black shoes. I click on Add Image, and I've got these Nike sneakers here that are a black color. It's going to upload them. You're just going to have to ignore the fact that these aren't the exact same shoe. If I save the page and right click on "View" and select "Black", you'll see that it automatically switches to that product image that represents that variant. Size is going to look pretty much the same, so it doesn't make sense, but color is a perfect example of when you change this, you want your product images to change. It only works one way, I forgot to set this to Red, so it works backwards as well, but you get the point, okay? Actually, I'll just go in there and do that now just to be thorough, update images of all the red, and set that as the variant image. The next thing is Organization and the main ones here are Collections and Tags. These are the most important by far out of your Organization options. These are extra Organization options you have for Product Type and Vendor. Vendor is a good place to categorize your stock by the brand, so maybe you want to make the Vendor of this, Nike, and Product Type, you might want to put in shoes. In my experience, what I've found is Collections and Tags are the main ways that you can categorize your content. Speaking of the word category, you can think of Collections like categories, but unlike categories in some other kind of platforms like WordPress, for example, which I've worked with in the past, you can't nest collections. You have to be more strategic about how you nest your products into different categories. At the very top of your Organization structure should be Collections. If I go to my store here, making sure I'm on preview, and I type into my URL collections/all, you'll see that there is a collection that comes default with the Shopify platform and that is the all collection. You don't need to set it up in your backend, you won't actually see it in your backend, but if you go to collections/all on any Shopify website, you'll see all the products that are public on that website. You can go through and check them out. This, by the way, is showing your collection template, so we'll get into that when we get into code. But if you go into your Templates here, the code that you set here, it's linking to a section, so let me just go into that section, this is the code that runs every time you hit a collection page. Now, obviously, the products and other features might change, but that is dynamic based on the code that you put in this template file and section. Sorry, jumping ahead a bit there, just wanted to make note that anytime you view a collection, you're viewing it within a collection template. As I just mentioned, this is an automatic default collection page that you get with every Shopify theme. But if we want to create our own collection, we can do so by going into the Products menu and clicking "Collections." We can go Create Collection and let's call this one, featured products. We can add a description if we want and then we select the "Collection Type." You can either manually add the products one by one, and you can do that either in the product themselves or right here, after we save, or you can make it Automatic based on certain conditions. You can use Product Tag, Price, Vendor, Type, Compare at Price, Weight, to create your custom filter and then put that into a collection. You could use price to maybe show all products that are on sale for less than $10 and maybe, that's a collection that you want to create. But for our purposes, I'm just going to go with Manual and I'm going to click "Save" and that'll refresh the page in order for us to add in some products. You can use this to search or you can click "Browse." I want to select these ones at the end, I definitely need to select "Gnarly Shoes", my God, Good Old Shoes, oh yeah. I want the Insane Shoes, my God, that sounds great. We've got our five different products in our collection, and it looks like that is automatically saved. If I go and click "View" now on that collection, we'll get a similar page to what we saw before, but now it has our custom collection name, and it has the shoes or products that we added into that collection ourselves. Now right here, you have sort by and that comes pretty standard with most themes, but we can filter again using tags. Let's go back to our sneaker and instead of putting Nike, which appears to be the brand, with this Nike ticked there, instead of putting that in Vendor, which would be a good place to put a brand, let's just say we want it to be a tag because that's easier to filter with and tags are very powerful as you'll see throughout your Shopify journey. Let's just put in Nike as a tag. I'm going to click "Save" on that. Now, I want you to notice what happens to this bar when we refresh the page. You'll now see, we can filter by tag, and this is built into our theme. We can go in here, filter again, and the other thing I want you to notice is our URL. Remember before we went on collections/all, now we're on collections/featuredproducts, which is the name of our collection, and then after that, we have Nike. We can actually put the tag name in the URL. If I was to share this with somebody, then they would see the same filter. It's a pretty cool way of filtering your products and building basically almost like nested collections. Although, this title still says featured products, it's filtering by Nike here, so you can see that feedback there, but this is a way to filter from within your bigger collections. At the end of the day, we could also create a new collection for featured Nike. We can go into Collections, Create a Collection and let's say, we call that featured Nike shoes or products. Let's say, in our mind, it's a nested category of that other collection. Well, unfortunately, like I mentioned, Collections can't nest, but what we can do is set a condition that the product tag must equal Nike and then we could set up another condition and tag all of those products in the featured collection with another tag that says featured, let's say. Let's just do that now. I don't have that yet, so I'm just going to save the Nike. Oh, here we go, we need to remove that. This is just going to show all products that have Nike in them, and you can see here it's autopopulating, but let's just say that we want all of these. Again, this is not super clean, but if I went into all of these products and then gave them a tag of featured. If, I'm just going to rush through this part. Now that I've added the featured tag to all of the featured products, I can go into featured Nike products, add another condition for product tag has featured. Hit save. Now we can see that awesome sneakers comes through because it is featured and it is Nike. To go back and apply this same logic to our featured products, maybe we want to make this automatic. Fortunately, we've already set it manually. We'd have to go delete that one. Let's create another one that's called Featured Collection. When the tag is featured, we will include all of those products in the Featured Collection. Now we can go into Featured Collection which we had before, but now it's automatic based on tags. And we can filter by Nike. Or if we wanted to have some custom content, like have a description or we wanted this title to change, we could go to how, I think it was, let's go back and we can just view it from within here, Featured Nike products. As you'll see, this is similar to this, but it's just set up in a slightly different way. If we have a collection, there's more options available to us to show the title that comes up. We also have access to the collection object, which allows us to grab all the products within that collection. Again, that's getting a bit ahead of myself. But you can see at the very top, collections is a way to organize your store. You could always just organize your store with tags alone, like that's possible. But most themes, they have a collection page and then you filter by tag, which is the standard shopify way of doing it. That's essentially how you would usually organize your products. Like I said, you can also organize by product type and vendor, but this is not particularly important to us. Just another way that you can filter and other variables that you have access to within your theme code. I spent a lot of time on the product page. There are other menu items here in the shopify dashboard, obviously. Orders which isn't really gonna make much sense until somebody orders a product. Customers are the details of the people who have placed an order with you and analytics you can go in and see who's using your store and how many sales you've made, marketing. All these kind of relate to the day-to-day running of your store. Not necessarily related to your theme. But what I wanted to do was go into products because products kind of, that's like the content of your website. It very much relates to theme development and that's why I wanted to dig into products and collections a little bit more. Going back to our online store here, you can see that we can also create other content in the way of blog posts and pages. Now we're going to add a page later in this class and a blog post if you've used any other kind of platform that does blogging. A blog post is essentially a page with a timestamp on it and then it's put into a feed that shows the most recent article first. You're familiar with a blog. Technically, it is really the same as a page, but just has a different purpose. You can also go in here, and this is where you update your navigation, which in your code is called a linked list. You can go in here and add in a menu. Not sure if we'll get into that in this particular class. But right now you can see that we're running, which menu I'll be running, the Main Menu here. So in our customizer we've set, it's to pull in Main Menu. If we go into navigation here we can see it's got Home and Catalog, which is what we have there. That matches. Domains, preferences. Preferences we saw before when we turned off the password for the site. There's some other stuff here that you can put in Google Analytics code or change your SEO data. But the final thing I wanted to finish on in this particular lesson and the part of your store that most relates to the theme, of course, is going to be your theme customizer. We already went over this customizer briefly in a previous lesson. I don't want to spend too much time going over the same details. But essentially, we mentioned the Collection Page before. You can go in and modify right here it's defaulting to feature Nike products. But we can go in, change the grid. We can show product vendors and it's going to show the tets. I don't know what tets is, but that's the joy of demo products. You can show the collection image, which for this collection we don't have. All of this is setup within a section called Collection Pages or in our back-end, it's called Collection Template. I'll show you that all of these options come through a schema that we've written here. That's just to give you a preview of what's to come in this class. I think that's a pretty good overview of your Shopify back-end. Obviously, products are the main thing that your site is going to be promoting and the main thing that you'll be interacting with, with your code, it'll be your customization of your store is generally going to be around presenting your products in the best way with the best options, filtering in a way that makes sense for the user. Then having good navigation, which is pretty self-explanatory. Setting up good pages for that navigation to link to. If you have an About page or a Contact Us page. But yeah, that kind of covers an overview of the Shopify online store experience from the perspective of the seller. Now in the next few videos, we're going to dig into your theme code. So this is where we get into the actual Shopify theme development or theme customization because we're not developing something from scratch. But we will be going into the code and how you can basically edit anything about your theme and actually where to find the code that you want to go and edit. I'll see you in the next video. 9. Theme Code - Assets, Config & Languages: Welcome back everyone. In this video, we're going to finally dive into our theme code and talk about what's going on. Let's open up our code editor, or if you want to follow along in the edit code section of your theme, either is fine. As I mentioned previously, I recommend you make all your changes here. But just for looking at the code, you can look at it here if you prefer. I'm just going to look at it in the code editor because that's where we're going to be editing, but you'll see here that if I contract all these parent tables, we've got assets, config, layout, locales, sections, snippets, and templates. Templates, snippets, sections, and layout are the main folders of your theme. That's the ones you're going to be editing to edit the look and feel of your website, what you'd expect from a theme. But there's other important supporting folders here; assets, config , and locales. In this lesson, we're going to cover those first, and then we're going to go into the main ones, break them down in the following two lessons. To start with assets. Assets, if you're new to web development, stuff like images, style sheets, and JavaScript files. That's really what we have here. We've got images that we use within the theme, we can put in here. We've got JavaScript files. This one is for when you do gift cards. We have SCSS files and you can see there's a.liquid at the end there. The most important one in your assets file would probably be your theme.scss.liquid. Something that you may not be familiar with is a technology called SAS. SAS is basically a CSS compiling language. It basically comes before CSS and allows us to do call things like functions, and variables, and nesting. What it does is it compiles or transforms into regular CSS when we either choose to compile it, or, and this is the great thing about Shopify, is that SCSS is compiled for us. When you see an SCSS file, you can basically put in whatever CSS you want in there. CSS is backwards compatible with SCSS, but this is basically your style sheet of your whole theme. Now, the reason it's got.liquid on the end of it, is because we're able to put it in liquid variables. We're going to go into liquid in a later video, but I can search for this right here. You can see here that we're loading in some SAS variables with variables that are set in our customizer. We're also going to look at this in a sec in our config. But settings here, the global settings object, is what our theme settings is. If we go back to here, this is going a bit too deep too quickly, but we'll get there. If we go into here, so we are going to the customizer part of that, then we go into theme settings. Here at settings color text, that's going to be in colors, and it's probably going to be one of these ones, probably the body text. It's essentially putting what selection you have here in your customizer inside a SAS variable. Then what you can do instead of calling a specific color, you can call this. You can search for usages of that variable. As you can see here, this is pretty normal CSS apart from the SAS variables. If you're not familiar with SAS, I definitely recommend looking it up. It's not too complicated to learn if you already know CSS. If you are overwhelmed by this and you didn't expect to learn SAS as well as learning Shopify development, don't worry at all, you don't have to use SAS. You can throw in regular CSS in here. If you want to think of this as your main CSS file, you can go right ahead and do that. Don't worry too much about SAS if you're new to it. But if you are familiar with SAS or you want to learn it, it's great that Shopify does compile SAS and allows you to do stuff like I showed you where, let's see if I can find it again, it's too hard to find, but basically where you can set a variable in your theme settings to a variable in your style sheet and then call it throughout your style sheet. Very cool. The other one is your theme.js. Now, this could easily be theme.js.liquid, but with this theme, it appears that there is no liquid variables that are going to be inserted in this file. It's just theme.js, and that goes for here as well. If you're not inserting any liquid into it, you don't have to put.liquid on the end. This is going to hold all your themes JavaScript. If you're not too familiar with JavaScript, this could get a little gnarly as well. Best to leave this unless you need to dig into the JavaScript. Here you've got some other JavaScript libraries. Lazysizes is something that a lot of Shopify themes use in order to optimize image sizes on different screens. Again, you don't need to worry too much about what's going on in here. What you do need to know is that the assets folder is there, and that's where you find your style sheet, which you'll likely be editing, and your JavaScript file. Moving on, we've got another folder here called config. Config is interesting because you know how we talked about how that color text was set in your customizer, in settings.colortext. Well, you can actually look up that value in your setting_data. If we were to do that, find out what it's calling color text. If I copy that and I go into our data, I can actually find where that is set. Here, you can see there's thirteen of them. Let's have a look. Current. Here on current, which is what we're using right now, you can see the color text is set to this specific value. But if we were to go in and change it here, it's going to update in that theme settings_data.json. All the data in Shopify are setup in json format, so that's J-S-O-N. Again, if you're new to web development, that might be something that you're not familiar with, but it's pretty simple, you nest within these curly brackets. Say for instance, you wanted to get to current.colortext, go into current, go into color text, and there you have it. Pretty simple stuff. In settings_schema, that is the layer that sits outside of what data you have in here. You have the value for color text here, but in your schema, you set that as a value that users can edit within the customizer. As you can see here, settings, Id, color_text, this is what sets it up as a customizer option, and the type is a color selection. To show you, if we were to delete this altogether, this option, you'll see that it doesn't even show up in the customizer anymore. Press save on that. I'll look at theme watch. By the way, if you made any errors, it should come up here. Definitely keep an eye on this. If there's any errors, it actually won't compile and send up to the store. But if I want to refresh the editor here and head into my theme settings, go into colors, you can see that color is gone, and it wasn't actually the body text, it was the one above it. I can't remember what that one was called, but if we bring this back, you can see the label was headings and links. If I save that, which I've done, it's going to re-upload again. Refresh the page, theme, settings, colors, and there you go, that option is there again. This is a first introduction to schemas for us. We basically got a giant schema that sits on top of the whole theme with a bunch of different settings, and this mirrors what we have in our theme settings. This is like the developer backend JSON representation of all the data we have in here. I could even change it here, and it will update over here in our actual theme. Or I can change it here, and that will update in our theme here. Both are tied together. Now, when I deleted this before and I brought it back, you'll notice that it still has that value. Now, that probably is the default value that's set here. But even if it wasn't, even if there was no default value, the data still saves. If you go into your schema and delete something like we did, it doesn't actually delete the data as well, and maybe you want to delete that. But usually when you're doing theme development, this is specific to the store and you don't necessarily want to edit this stuff. I would generally leave this stuff alone. It does come in handy when you're maybe migrating a store and you've made some changes to settings, you may want to copy those settings that are all listed out here when you make those changes. If that was a bit overwhelming or it went a bit over the head, don't worry too much. The main reason to know about this stuff is, say for instance, if you wanted to create your own setting. If you wanted to create your own setting, you could come in here, maybe you want to create another color text type. You could just throw that in there, rename the ID, change the label, and then suddenly you would have that in your list of options here and then within your code, you could reference it just like we had in our example here. You can reference that new variable that you set anywhere within your template. That's the real benefit of having the schema here to edit. You can create theme settings from this file and then this one just stores your data. You probably shouldn't need to change anything here unless you wanted to do a migration and you didn't want to have to go through and update all these different values yourself through the Customizer. Final one and then we'll move on to the actual like layout files is Locales. In Locales, it's basically your languages. If we go back into our online store and in the theme section, click on actions and edit languages, we can see a user interface for us to change all the language options. Now what are these language options? Well, if we look through our code, so let's just go into, let's just choose header and we can see here a bunch of them already. We can see { layout. navigation.search} and then we can see this pipe symbol here with a' T.' The 'T' basically says, filter by language. Why that's important is, instead of hard-coding in values here, we can set them up in languages and then we can translate them. Hopefully this will make sense, I might provide an example later in the class, but let's look at a more obvious one, just for demonstration purposes. A common one is Cart language. If I click on I'm going to do it with my customer, I might as well do it here. If I go into here and I see your cart on the cot template. Let me go into templates, cart and it links directly to a section called cart template. I'm going to go into that section. If I try and find your cart, it's not there, I can't find it and the reason why is because your cart is set in the language settings, so you see here your cart. If we wanted to change that label, we could go in here, find where the language variables come across. I think it's this one { cart. General. Title}. Let's just go in and change that. I'm going to get rid of that liquid tag and just put in,> this is the cart<. I'm going to save that, check that everything's working fine with theme kit and then [inaudible]. Let me just click on it from over here, making sure we're on the correct theme. It's not that one, so we've obviously edited the wrong one, but I can actually find what it's [inaudible] in here. This is the English language file and we're running English at the moment as you can see and if I was to go to find title. Let me just look for cart and they'll have general title, your cart. I need to find that cart general title. Some product title, sorry, there's a few uses of the word title in here. It appears we were editing the right one, but we just don't have any items in our cart that's why this header is not actually showing up. Let's just add something to our cart to demonstrate this, so we don't have whole products showing on a homepage yet, but we can go to the old collection. Let's just add this to our cart. Now we're in our cart page and as you can see, the text we put in, this is the cart is showing. We can obviously cart code values into our project right here. Just to show this is the cart cart to make it clear, like I am editing this particular page. I am editing it right here, we don't want to do that and the reason why is, if we change to say, for instance, German and we offer this website in German as well and we want to have certain language that is easily translated into that language to come through and be in that language, is going to come up with this is cart cart while everything else has been translated. That's why we use languages. If say for instance and you may not care about other languages, may be you are only advertising to the one market. Maybe we don't care at all about languages, but even still, it's a best practice to use these variables. I'll go into here and Instead of changing that in the code here, I'm going to update the variable. Instead of your cart, put in, this is cart cart. I am just making it really obvious that we're changing it. Because nobody would say this is cart cart, quite obviously. If we refresh the page it will come up with this is cart cart. Essentially the same result, but just a better practice to have all of these common words in a file in your locales, then calling that variable within your template. You'll see here we using a lot of standard language and it might trip you up a little bit if you didn't know about these language files because you might go in and be like, well, I want to change this text. Let's refresh it again, back to your cart. You know, it might trip you up if you want to go on, well, I want to change that word in my Shopify theme. Let me search for your cart in cart template. What the hell, I can't find it. Like, how am I going to change this? That's why we need to talk about language variables because if you want to change something like that, you're going to have to change it in here. All hard-coded, as I said, hard coding is not best practice. If you want to change language like that, that standard across the theme, change it in here and if you ever in future, when I translate it into a different language, you've got these other files here. You can see cart general title and this is what it is in English. If we go into this which I believe is German, you can go cart general title and that value on a German [inaudible] is going to be this word instead, which I won't even try to pronounce because it looks hard and I don't speak German. That's locales, that's config and that's assets. Maybe I rushed a bit through this because there is a lot to cover with Shopify themes, but essentially, this is where you store variables related to language. This is where you store a schema data or like General Settings data and this is where you define what options are available in your schema, which translate directly to your Customizer. Finally, to review assets. Assets is where you put your style sheet, you JavaScript file and any images or other files that you need to call in Frontend assets that will help your store run. But again, you shouldn't have to edit any of these, it's just theme. SCSS. liquid which is the most important one because inevitably you're going to want to change some CSS on your page. You can do that using liquid, you can do that using SAS. But you can also just put in plain old CSS that'll work to, all of those options are available to you. In the next video, I'm excited to get into the other parts of your theme template. I look forward to seeing you in the next video. 10. Theme Code - Layout & Templates: To set us up for the next two lessons on editing our theme code, I have closed down a bunch of tabs and now I just have my store, my partner account and this diagram that I've prepare to break down what's happening with our theme. Now, this might look nully, but it should provide a good overview of how it all works. Essentially, we've got these colored boxes and these represent rather the four major sections that we're going to be talking about. If we go back into our code, sections, snippets, templates, and layout. At the very top, this is the entry point. Anyone entering our website, they're going to get the layout. Then within the layout, you might have snippets which is why you've got this line going down here. You might have sections in fact, you're very likely to have sections. Inside the content for layout, which is in the middle of your layout, you'll get a template. These lines show the flow of the templating structure. At the bottom you have sections here, then sections flow into this template, but they also can flow into layout they also can flow into content for index. Then you have this template which flows into layout. So layout sits at the top. Trying to find another word other than layout, but it's basically the structure that sits at the top of each page. Then you get served the template and then sections are really cool dynamic pieces of code, dynamic sections that we can put into our homepage, throw into our layout, throw into our template, and then snippets are just reusable bits of code that we can basically throw in anyway. Now I've got these clouds in here as well. I made it a cloud because it's dynamic content. We can't actually edit a theme template for header content or content of index. It links to different parts of your theme with this double line. The double line is just to signify a dynamic link. In your layout, it's linking to header content, which because it's denoted with a Cloud is communicating that we can't actually edit this specifically, but it's an out layer. The same for content for index. Actually this line here probably shouldn't be here. This is only on a specific template, the homepage. So I might delete that link. But as you'll soon see, and something I touched on briefly is that content for index is the thing that sits on your homepage and you can add in sections dynamically. This diagram might look a bit nully at first, but after these two lessons hopefully the relationship between all these parts should make pretty clear sense. In this video we're going to talk about layouts and we're going to talk about templates, and then we're going to break it up so in the next lesson we talk about sections and snippets. Let's start at the entry point. Let's just go preview our theme. When the user comes to our store, they're presented with this which is a mixture of all we have in here. First of all, it's going to hit a layout file. That's why layout, if we go back to the diagram, sits at the top. We're going to go into our layout photo. Usually you only have one layout and it's theme.liquid. As you'll see in this video, we're able to create our own layouts, but the standard layout is theme.liquid. If you haven't set a custom layout, it's going to go to theme.liquid. Let's just assume that you haven't set a custom layout. It's going to go theme.liquid. This is the code that will generate what you see here. That goes for not just the homepage, it goes for pretty much every page that doesn't have an alternative layout. This is the skin that will run on every page of your website. But as we'll see, there's some dynamic bits of content in here. We've got liquid tags as you can see here, which are denoted by the two curly brackets ending into curly brackets. There's another one that you might see that has instead of two curly brackets, curly brackets and a, there we go. Curly brackets, percentage sign, and a dash to eliminate white space, we're going to go into liquid and how it works in a later video. But I just wanted to go through and let's see where this page links to other parts in our theme. We have got some liquid logic here. Don't worry about that too much. What I'm looking for is this first tag content for header. Basically by putting content for header here just before the closing head tag, what it's saying is take whatever we have and put it right here. Again, seemingly can't edit it, it might be hard to understand what actually goes in here, and that's why I've written this box here. This is according to the Shopify documentation, that content for head of variable must be placed between the opening and closing tags. It inserts the necessary Shopify scripts into the head, which includes scripts for Google Analytics, Shopify analytics for Shopify apps, and more editable in preferences. That answers the question of where would I go to edit that? So I can go in, click on Preferences. So things like Google Analytics code. If I had some Google Analytics code, I would paste it in here. That would dynamically go into content for header. Then with this liquid tag, basically controlling where it goes in our liquid layout. But it's something that you shouldn't really mess with. I'm just letting you know that that's where it inserts. It doesn't really make sense to move it because it needs to be in that head tag. Going down the page, we can see this word include and include followed by a string here. What that's doing is including a snippet. If I go into My Snippets folder we're not going to be covering snippets in this video, but you can see if I look for Icon Search going down, there's a lot of different icons here. Right there it is. It's just an SVG file, but I can basically can include it anywhere I want on my whole theme. Going back to theme.liquid. Let me scroll down again by putting in include and then the name of the snippet. Going back to the diagram, you can see that we can include snippets anywhere in our theme code, layout, template or sections. That's why the line links to those three. If we scroll down the page, we can see another keyword here, which is section. Just like include, we can bring in the header section by using the section word. So Include to bring in a snippet, section to bring in a section. If we go into our sections folder, there should be a file called header.liquid. Remember we don't have to use the.liquid to call a section snippet or template, we just put in the word without the.liquid. Liquid knows what you're trying to do. As you can see, we've got another section here, and in between, we've got this other dynamic liquid tag called content for layout. Going back to my diagram here, we can read what content for layout is. The content for layout variable must be placed between the opening and closing body tag. It outputs dynamic content generated by all the other templates. Index.liquid, product.liquid and so on. As you can see, I've got this box in-between layout and template. That's because this is where the template comes in. If we go into our templates here, the code in these templates will be loaded into here. You might be wondering, well how do we know which page to load in here? The answer is, it depends on the URL that you're in. If I'm on here and I go to collections.all, like we have beforehand. I'm still on the theme layout. I'm still on this layout file. But then once I hit content for layout, it sees that I'm in a collections page. Load up the collection template. We're in the collection template right now. As you see, there's pretty much nothing in here apart from a section. We'll get into more details or more reasons to why that is in the next video. But essentially the main reason why, and if we dig into this section briefly, is because we want to make the whole section customizable using a schema. We can set a bunch of options here, and then we can use that within the code. If you're ever curious as to why you would have a template file and then suddenly you have it linked to just a section, why is that the case? That's why. Because in our templates we don't have a schema to edit anything. As I showed you before, if we go into the customizer, so I'm going to get out of preferences and I'm going to click customize on our theme. I'm going to go to the collection page. You can see here that we've got this section block here. So we're able to edit settings within this collection. We can also add in a random section if we wanted to, which we'll do just in a sec, or we can remove this completely and there's no content in the template file. But just to demonstrate if I was to get rid of this section and just maybe put a random div. Maybe I still bring in the collection content because we're in the template here. So I can bring in a collection. I'm not going to, I'm just going to type in hello. Just to demonstrate. Theme watch is running fine. I'm going to preview the theme so you don't need to leave the customizer. Go to that page again, collections.all. Now you can see that we've got just Hello. You're Okay, that makes sense, but now if we go into collection pages in our customizer, you'll see that it just has collection content. There's no little section here for us to go in and edit settings. Hopefully that makes it a bit more clear why it just links directly to a section. It gives us the ability to go into a tab right here and not just have our content in there, but also have options to edit it from within here as well. That pretty much covers the layout. If we go back to liquid. You can read it here in the code itself or you can have a look at the diagram, but main liquid tags you've got is header content, content for layout over here and any snippets or sections you want to include in your layout as well. I am going to demonstrate alternative layouts in just a sec, but let's talk more about templates. We showed a quick example of the collection page, but what I want to do is create a template for About page. Let's go into our templates here and as you can see, we've got page, we've got password, products, search. Maybe I want to create a new page. Let me go into my back end here, click in pages, add a page and this should look pretty familiar. It's pretty similar to products, it's just title and content. I'm going to put in About Us and I'm going to generate some Lorem Ipsum just to fill it up. I'm just going to search for a random Lorem Ipsum generator, just grab a bunch of dummy text to put in there. I'm going to click Save and what I want you to notice here, because it is a page, we've got the page template suffix, that's by default. If we go and click on View page, you can see here that once again, it's loading our theme layout, which is going to happen on every page unless we specify otherwise and then because it's a page, it's loading this. Then within here, we have our dynamic content, which we just set up in our back end here, a title and content. You can see here in between the h1 tags is title and in our div here is content. We could change this up, we could structure this however you want it. Maybe we want to take this here and the first line we want to say, this is the page for Save that and we go back to here and you can see this is the page for About Us and then it goes on with the content. Not very practical, but you can see here, we can take those two variables and we can use them however we want, this is totally customizable. But I want to show you a more practical example, and that is to be able to include a section in this template. For that, I'm going to create my own custom template. I can do that by going, New File, and here's how you would create an alternate page template. You do page, then you'd place a dot after that, and then you put in the name of your alternate. Mine is going to be About and then of course you need to end with.liquid. If a page about, I'm going to copy the exact same content as page, but I'm going make one change and that is, I want to bring in a map section. If we look in our sections here, we have this section called map. As I'll show you in a later video, sections are great because we can pull them into any area of our website through templates. I'm going to add in a section like we saw before, the section map, press Save and see if that worked. Now there's going to be a two-step process to changing this page into the About Us template. This is what you would expect the behavior to be. You would expect to be able to go in here and just change your About. You've got it in your theme code. You should be able to go in here and update that template suffix. Well, the gotcha here and something you're just going to have to remember to do if you ever get caught on this step, is the alternate template needs to actually be on the live theme as well. This is not a problem, it's just an extra step. If we go into our current theme, click on actions, click on edit code. We can create a template of the same name and it doesn't have to have the same content. It just has to have the same name so that we can select it from within that admin area. I know this sounds silly, but this is what you have to do within Shopify, because this page menu here, this is for everything. This doesn't change the pages, the blog posts you have on your site based on what theme you have. That answers the question why it's not related to the theme you have published because it's going to pull the templates from the published theme. Again, I think it should have all the templates that are available in all the themes, but that's just not how Shopify works. Anyways, just a little bit of a gotcha and the way we can get around that is create the same thing, but we use this user interface here on the Shopify website and what we can do is just choose page and the alternate is called about, and then Shopify are going to create it with the correct name, page.about.liquid. Once that's done, we can refresh the page and we can come down here to template suffix and we have that page.about. I'm going to click on that, click Save. Now, when we go back to our About Us page, we will have a map section underneath. Look at that, isn't that great? Now, what we will also have because we want to be able to customize this. Unfortunately, we can't customize the section within this page from within our pages because we can only edit title and content, but what we can do is find this template in our theme customizer by clicking here. Unfortunately it's not there, we're just going to refresh the page. Click there again and as you can see, we've got this new section here for pages with About Us. Now we can go in and we see this section here, we can actually go in and edit the section. Store is the Skillshare store or whatever you want to call it on Fake St. Toronto, Canada and you can add an image there or whatever you want do. That is a great example of maybe you want to insert a section in a certain page. You don't want it to happen in all pages so you create an alternative template and then you're able to call that alternate template on any page. Now remember, I said that I would talk about alternative layouts as well because what's the point of having this layout file here in a folder if you aren't able to change the layout? The way we do that is also in the page template. We got to use a little bit of liquid at the start of the template. We're going to use a little bit of liquid at the start of our template to call the layout that we want to use. Like I said, by default it's theme.liquid, but we can choose another one if we so choose. What I'm going to do is I can do this in either order. This is probably the backwards order of doing it, but what I can do is I can write the tag first and then create the layout. I'm going to call this naked, and the reason why is I'm going to remove a bunch of stuff from the standard theme.liquid. I'm going to create a duplicate of that and instead of theme.liquid, I'm going to call it naked.liquid and I'm going to remove the header and footer. Don't ask me why I'm doing that. I'm just doing it for demonstration purposes. If I hit Save on that, if I go back here, no errors and I refresh the page because remember we're already using this template. You'll see that the header and footer have disappeared and that's because I have signaled this particular template to use the layout of naked. Right here we set an alternative layout based off the theme.liquid, which is the standard layout. Remove the header and footer from that. Now we're able to update the layout on this particular template. That's basically the major points with theme templates and theme layouts. Finishing on the diagram here, hopefully this diagram starts to make a bit more sense now. We've got the header content that comes from preferences and other areas coming into our layout. We have the content for layout, which brings in the template and then we can stick sections in either the template or the layout and we can also stick snippets in wherever. In the next video, we're going to go further down the chain here, talk about sections and snippets. Snippets are quite simple, but sections are really exciting and powerful. I think we can cover both of them in the next video. I'm excited to show you that and wrap up this section on the theme code. I'll see you in the next video. 11. Theme Code - Sections & Snippets: In this lesson, we are going to go over sections and snippets. Obviously, we have already touched on sections and snippets a little bit in the previous lessons. Indeed, there's going to be some overlap in this whole structure, but let's dive deeper into talking more specifically about sections and snippets in this lesson. One of the templates that I didn't show you in the previous lesson was the template for the homepage, which is interesting. If I go back into ADaM and you can see here, collection uses this selection collection template. I must have accidentally put that in there, let me save that. If you go into a lot of them either they have a bunch of their own custom content or they just link to a section such as the collection page, just links to the collection template, the blog page just goes to the blog template. As we will soon find out so that we can use the features of sections which include customizing in the customizer. We had looked at that a little bit, but I want to show you the index.liquid template first. This is the template that loads on our homepage and it includes this dynamic tag content for index. If we go back to Owl theme structure, I had this template linked to content from index, but I deleted it at the start of two lessons ago. That's because it's not related to every single template, but it does show up in one template, and that is the homepage template. But you know what, I might be wrong because maybe we could put content for index in every template. Let's just run that experiment right now and honestly, I've never tried this before, so I don't know if it's going to work, but let's see if we can just shove that in any of our templates. That is the collection template. If I go into my customizer. Be interesting to see what happens with that dynamic tag. Any errors in our theme watch? No. Let's go into collections list. Sorry, that's the wrong one. We want collection pages. Interestingly enough, we have this section here which has been hard-coded into the collection. But then we also have the selection that we had on our homepage content for index, which allows us to dynamically add, remove, and order sections. Pretty cool. I've never tried that before and I don't know whether that is too practical, but how it's set up by default. I'm going to revert this to how it was before. Is on the homepage, you have this content for index. Maybe I need to put that thing back in my diagram there we go. You have access to this super awesome tag called content for index, which allows you to have a dynamic list of sections and if it makes sense for you to put on any other page other than the homepage. Feel free to do so, but on the homepage, by default, you have content for index. Now of course, you can go in and make this template like any other template. This template is here for you to use it does not have to just be content for index, but content for index is cool because we can, as I mentioned before, add sections. Now we are going to go deeper into sections in a later video by creating our own section and then you are going to really learn the power of sections. But for now, let's dive into the code of one of them. we've gone a bit into this already but if we go into templates and look at a template for cart, everything is contained within a section. If we go into here section for cart template, then we have everything that shows up in our cart page with a schema for editing. This is basically the part that separates sections from any other of the files in Owl theme code. The schema might look a little bit daunting at first, but it's an amazing way to add in customizable options that we use throughout our code here and we allow the user to edit them. As you can see here, there's a bunch of different language data and this converts the label or the name of the schema based on your language. But you don't have to do that, you can just get rid of this object all together. If you just wanna do it in one language, you can have cut page. Most of the themes actually I work on are like this. There's not so many different options for languages. I'm going to just get rid of that object and simplify it and you can see here, we've got the top level of our schema. We've got the name of this section, settings, and then within our settings, we've got all the different settings that we can change. Just like we had here in our settings.schema, we can create a schema for each individual section and then only call in those options when we need them. It works in a similar way to the schema in our setting schema, this is for the whole theme. If we go into a specific section, what did we have before? We had collection template, wasn't it? Anyway, it does not really matter. They are all similar in how they operate. It was not this one but let's have a look at this one too. We've got a name, collection pages, and here's our settings. We've got different input types here, and the different input types we have available to us we can go over right now. I'm just going to go into the documentation. Just typing into Google, Shopify input types, configuring theme settings. Let me have a look and see if this is the document we are looking for. Input settings if I click that, here we go. Now we have in the documentation, the various input settings. You can create different inputs based on whether we are going to use texts, whether we are going to select an image, whether it is going to be a true or false boolean selection like one or the other, whether it's going to be a select box, checkbox range. We can see this working if we go into our customizer and we can look at the rich range of different input types we have here. This is going to be an image one. If I go to here, this is going to be image picker. I go back to my customizer, these are selects. If I go into here, that's a text. This is a text area, and this is actually a link or URL field. Let me check the name on that one to see if it's a link or URL, link list. There was URL. So the input type for that one, which majorly looks like a standard textbooks, but it's not. If you actually click on it, some options come up and we can set that by using the input type of URL. Okay? So let's look at slideshow, okay? Because that's a pretty good example. If I go into here and find that section in our theme code. And I looked down at the schema. This schema will directly represent what's going on here. So if I look at the things at the top, it has to have a name and it has to have settings. So the name of it is slideshow, and that's what comes up here. The class, is for setting CSS classes on the actual section. So we can't actually see it here, but it's in there. And then we go into our settings. Okay, this will be our first setting. And it's select the ideal slideshow height and the label is slide height. So if we go in here, there it is, slide height. And then what defines these options here? Well, that's in the schema as well. And we can go down to this field called Options. And then you've got a list of options here. Again, you've got so much language information that's just making it confusing. So I'm just going to delete some of this to just make it simpler for you guys. We're all speaking English here. So you'll still be able to understand what's going on here without setting it to so many different languages. Alright, so first option, the label is adapt a first image and the value when they select that, is going to be adapt. Okay? Adapt to first image. And then it's going to set this value which the user doesn't see. But this is the value we get to look at within our templates. So if I search for adapt now, I can see that if we look for, that's not a great example. But we'll have to have a look at where this is being used. Let's just look for the slideshow height because there's no point in setting it if it's not used in the code. So this should be somewhere else in the code. And you can see here, we can call that option by first calling it object section, then going into settings, and then looking for the slideshow height. And actually there was adapter right there. So it's saying if the slideshow height is set to adapt, that option that we looked at before. Here, adapt. Then we want to do all this, okay? So we're using the value that we've set in our schema, which the user can edit over here. And we're directly putting that into the code. So hopefully you guys can start to see that this is really powerful. You can create a bunch of customizations within your new code that once built, you can actually go in here and use a user interface to interact with. And that's going to be good for if you're developing a website for say, a client. And it's going to be good even just for yourself. You build it once and then you don't have to go into the code anymore. It's an option for you to customize. Maybe you want to switch it back every so often, that's an option for you to do. So I know the schema might look a bit confusing and honestly once you start to get nested into deeper levels, starts to get even more harder to read. But over time, you should start to relate what you see here, to what you see here. And it should be easy to create more options. Alright? So just as an example, what's something that we can add to this slide show as a customization?Maybe we want to change the text size. That was my idea, but now I can see it's already been done. Yeah, anything basically you want to change about all or give us a customization option in the customizer, you can set up in your schema and then reference in your section code. All right, so just to recap how we can use sections. We can either select them in content for index. We can slide them specifically in the code into a template, or we can slide the section into a lab. And of course, header and footer, why they appear on every page is because they're sections included in the layout. These headers and footers are going to be on every page unless of course, we went in. And let's say we deleted section header from theme.liquid. We refresh the page. After we confirm that the page is updated, we reload the page. We'll now see that header is gone and it's gone for every page that uses that template, which as I mentioned before, for theme.liquid is standard. So even header and footer that you include in the theme layout is a section as well. So going back to the diagram, you can insert sections dynamically into content for index, into templates by hard-coding them, or into layouts as well by hard-coding them. And just to recap how we do that, it's just with this liquid tag here. The curly brackets, the percentage sign section, and then the name of the section. So, hopefully you get it now that sections are pretty powerful and they kind of sit at the heart of your theme. Now, as I mentioned, we're going to build our own section, and that's going to hammer home this theory a little bit more to you. So you're going to get some experience with this section and really learn the power and how you can develop your own custom sections. But we have one more thing to go over, and that's snippets. So snippets, you can think of as almost like a dumb section. Basically just a piece of code that you want to reuse on different parts of your site. So, there's usually nothing too fancy going on in here. All it does is bring in, let's say this is products. What's this one called? Product price.liquid. So if I want to go search in my theme, search in folder for product-price, it's going to show me all the references and I can see here where that snippet has been included. So, I can go into Collection.liquid. And you can see here, I'm including that snippet. So, if I wanted to edit the content here, I will have to dive into the snippet and edit that code within the snippet. Just to show you basically creating our own snippet based on content we already have. Let's just say, we wanted to reuse a section within here and it just made more sense to have it as a snippet. So, let's just say we want this search drawer to be a snippet. So I could just take all of this, remove it. Put in a liquid tag. Right. Include search drawer. So I'll call it search drawer. Okay, save that and make sure you have that code saved in your clipboard. Or you can just Ctrl + Z to get it back. And what I'm going to do, is go ahead and create that snippet now. So, I'm going to call it by the exact same name that I've put in next to the include. Search drawer.liquid. Don't forget the.liquid, and I'll put it in there. So, now if we go back to our website. I wonder if this is still using the naked, that one's still using the naked layout. But if we go back to our homepage we'll have a header again. And the search drawer is what comes up when you click on this I believe. Let's just check that. It's up here. Search drawer is this thing that comes up at the top. And you can see, even though the code is not in there anymore, we're including it still from another source. So as you can see, you could really get away with no snippets, but it's a really good practice to use them if you plan on reusing code or maybe you just want to clean up this file and not have so many different components in there. Maybe this reads a bit better for you. So, you go into your theme.liquid, you see all includes search drawer, then it goes into the header. Okay, cool. On the flip side, it means that you're going to have to go and find more files if you use more snippets. So, that's the trade off there with using snippets. Is you get to put them in a nice little place that you can reuse later. But then you're obviously going to have to go in and find that snippet, which I'm trying to do now. And you're going to have to edit it there, cool. So that covers pretty much the everything in this diagram. So, we've talked about layout, we've talked about these dynamic liquid tags, header content and content for index. We've talked about content for layout. And we've talked about how the four major areas of your theme, layout, template sections, and snippets all interact together. And once you start to play around with Shopify, it really starts to make sense why it's created in this way. And it gives you a good structure for really doing anything you want with your theme. So it's really cool. The one thing that might have confused you through all of this is of course the liquid. So, we've been seeing a lot of this templating language called liquid. Here's a great example, lots of liquid in here. In the next video, we're going to dive deep into liquid. So, don't worry, we're going to cover what's going on with this liquid code. Maybe not specifically on this template, but we're going to talk about liquid in the next video. So, I'm excited to continue on this journey and I'll see you in the next video. 12. Theme Code - JSON Templates: In this video, we're going to talk about JSON templates. JSON templates are a newer alternative to Liquid templates that provide for greater flexibility in the theme editor, allowing us to create reorderable sections in the admin for not just the homepage, but for the other templates as well. If we look at the index file in the previous default theme of Shopify Debut, you'll see the tag content for index. This tag dynamically generates our homepage based on a list of sections. This list of sections we can both edit in the admin, as well as inside the settings_data.json file. If you check out the settings_data.json file, you'll see here the list of sections in the homepage under the current object. If I scroll down to content for index, you can see this is the list of sections that appears on the homepage for this particular theme. Notice if we go back to the index.liquid file here, there is no liquid code in this file apart from this singular tag content for index. What if instead of this tag here, we stored the list of sections that we found over on settings_data.json inside this file instead? This is essentially what Shopify have done in their newer theme, Dawn. If I navigate over to the Dawn theme which I have stored right here, click on Edit code, you'll see that the index template is now a JSON file. Just like our settings_data.json file in our Debut theme, you can see that similar data exists now in the template itself. Here is the order of sections, just like we had in the content for index array on the previous theme that we looked at. The index template is now a JSON file that stores the list of sections as is the product template, the article template, the page template, and so on and so forth. This is what enables reorderable sections in all of our templates now, not just the homepage template. The consequence of this is that you will need all liquid code that may have been stored inside these templates to be moved into sections instead, even if you only plan on having one section in your template. Let's take a deeper look at the code that goes into these JSON templates. Here, I've got the dawn-two theme that I set up earlier in this class. It's exactly the same as the Dawn main theme with a minor edit, but seeming it's published and it's right here, I will edit this one. If I go into Edit code and then I click here to Add a new template, you'll see there's now an option here to create your template as either a Liquid template or a JSON template. Let's keep the JSON option selected here, and instead of article, I'm going to switch this to product. We've got product.json, and I'm going to leave it with this default name of alternate. Let's create that and just like we saw a few videos ago about templates, we can create alternate templates with JSON as well. I'll show you how that shows up in the latest theme customizer in just a second. Now, as always, what I like to do is open up the documentation and we had that just on our screen a second ago. Let's switch back to it now and what I'm going to do is put these side-by-side. Put this over to the left and then I'm going to close that down, put this over to the right, and zoom in on our code. Unfortunately, it seems I can't get rid of this so I'm just going to move this over, and there we go. Let's read about JSON templates. As it says here, JSON templates allow you to control the look and feel of different pages of the online store using sections, and they are now data files that store the list of sections to be rendered rather than templates that contain Liquid code. I encourage you to read everything on this page, but let's scroll down to the important stuff, the template structure. JSON templates must be valid JSON files, the root should be an object with the following attributes, so we've got some here that are required and some here that are not compulsory. Obviously, we're going to need to have the required fields filled in in our object over here. But for the ones that aren't compulsory, we don't necessarily need to put them in the object, but we can if we want to. As you see here, this is already been populated with a section's object and an order array. What's missing is the name string here, so I'm going to add that now. Name, and I'm going to call it Alternate Template because I can't come up with anything else right now. Let's hit Save on that, make sure we haven't got to any issues. Here we go. Sections can't be blank and order can't be blank, so it will give you this when it starts up. But then if you try and save on it, it'll come up with an error. In order to fix those errors, what we're going to have to do is fill out this object and this array. I'm going to open up this object and inside, what we're going to have to do is create a section object. What we need to do before we do that is decide on what section we're going to load in because we need at least one section, and in the Dawn theme, we have a section called main product which goes in the main product template as well. Let's just use that one, and so I'm just going to call that one main. Let's open up an object for this main section and inside here, what we do is scroll down and look at section data. Again, we have this table of the different fields that are required, and basically, all that's required inside this section itself, unless we get into blocks is the section type. As it says here, it's the filename of this section file to render without the extension. That's very simple. All we need to do is put main-product in here without the.liquid. We've got type and then inside type, we got main-product. Now, of course, the other error that we've got to fix is that order can't be blank, so you've got to put in even if there is only one section, we've got to put in what's here, the name as we defined here inside the section object, we need to put that in our order array. If I hit Save on that, we shouldn't get any errors. We're all good, and now if I go to Customize theme, open that up, I'm going to open this up to full, minimize a little bit, and then click up here to choose the template that we're editing. I'm going to go into Products. In here, you'll be able to see the alternate template we just created which we simply named alternate. If I click on that one, you'll now see that we've got this product information section here which is in fact main. We now have our section here and we can start to add new sections to it. It's important to note that any changes we make here will now be stored inside the template itself because this JSON template stores the list of sections and it also stores the settings. Now no longer we have this need for so much data to be stored in this one JSON file. The data for each individual template and its customizations get stored in the template itself. Even if we click on settings_data.json, you'll see this current object is completely empty because that data has been moved into the specific product template. What I'm going to do here is add in an extra section here, and you'll see this reflected in the customizer. I'm just going to copy this object here and what should we add? Let's add in a newsletter section. We're just going to call this newsletter and then inside the type, remember we've got to use the name of the actual file minus the.liquid. Newsletter.liquid, remove the.Iiquid and there's our type right there. Of course, we need to add that to our order here so I'm going to add comma and then I'm going to put newsletter. I'm going to hit Save on that. Now let's go over to our customizer and refresh, making sure we're on the alternate template, and here you can see we've got product information and email signup. Now, remember I said any changes we make here will be reflected back in our file as well. You just saw we made an edit here to the file itself and those changes were reflected in the theme editor. Well, it works both ways in the sense that if we change the order of these or add blocks, it will be reflected in the file as well. If I hit Save on that, reordering the email signup above the product information. This is all broken anyway, but we'll refresh over here, and as you can see, we've now got newsletter first and main second in our order, and we've also had some default settings being added to our object here. I'll type newsletter which we had before. It's now at the top and we've got some default settings populated in this settings object. Like I mentioned, we've got two-way data binding here so if I was to change this here, it would reflect in the customizer. If I go up to email signup, you can see all these color schemes, background one, background too. I'm going to assume that the ID for the second one is background-2, so I'm going to change that in the file itself. Hit Save on that, head back into the customizer refresh and you'll see that background 2 is now stored. Then again, I can change that to background 1, head back here and you'll see that that setting is stored in the file. The paradigm shift is this. JSON holds data, whereas.liquid files hold liquid code. Here you can see that the new system of templates is having templates as data, not Liquid. What that allows us to do is make them more dynamic and make it so that we can edit our section data and section order in the customizer, allowing us to do that on every template now because we've got template data stored on the template itself. Now what we have is data stored in templates rather than Liquid, and what that allows us to do is have customization on every page, whereas previously we used to hard-code in section tags in different parts of the Liquid code to say put the section here. Now it's all just data and it's a lot more dynamic. One more thing to note here is the block data, and I don't recommend trying to do this manually in the file. Just go straight into your customizer here, Add block. Let's say, we want to have a heading here, subscribe to our email. These are all default settings and putting it in email form. Let's hit Save on that and let's just have a look at how that affects our JSON object. Refreshing the page over here, you'll see that just like it says in the documentation with the blocks and etc. Let me move this over. You can see that we have a block ID for the block. We have the block type which is arbitrary. It's just whatever your code responds to and then we have a settings object to store the settings inside that block. All the documentation is here, and our documentation can be hard to read for some beginners, hence, why I'm here providing this tutorial. But essentially the main points to understand here is that we're storing data, not Liquid code in our templates when we're using JSON. This is the way moving forward so that we can have the most amount of flexibility for our admins to go in here and edit whatever they want and reorder sections on different templates. It's been a big frustration of Shopify users for a long time having a homepage where they can reorder sections like this feature has been available for a long time on the homepage, but it hasn't been available on other templates until now, until JSON templates and this is the technology that enables it. Of course, you can continue to use Liquid templates if you so choose. But we have these JSON templates now and you'll start to see that more commonly as time goes on, this is the modern way of doing it. Hence, why I've added this section to the class. Any questions, obviously, leave them in the comments, and in the next video, we'll dive a little deeper into Shopify liquid. 13. Liquid: Shopify's 'Programming Language': All right guys, welcome back. In this lesson we're going to talk all about Liquid. In the previous lessons, we looked at our theme code and we talked about the structure, and I showed you that diagram, but throughout our theme code, if we go to any of our templates sections or snippets, we're inevitably going to see some liquid. Look at this one, for instance. The product dash template. We've got lines and lines of Liquid. You should be familiar with HTML. You can see here, there's HTML, but there's plenty of liquid around it as well and there's also liquid inside. Liquid is like the templating language of your Shopify theme. It's kind of like a dumb down programming language that, as it says here, gives you some programming logic that tells a template what to do. Tags are wrapped in these characters except for when we're just outputting a simple variable. Instead of using the percentage sign, we put out a second curly bracket. If you're wondering what's the difference between these ones which start and end with two curly brackets and this one which starts with a curly bracket and a percentage sign, this is when we're performing logic, and this is when we're just outputting a variable to the screen. This dash here also, I recently learned that, that removes whitespace. So,if I just remove this from either side, it's going to register a new line in your code and so you're going to get some whitespace. It doesn't actually affect the logic, it's still going to work, but you'll see in your output file, if you don't use these dashes, that you'll get a lot of whitespace and that might make your site load slower. Just as a side note. How are we going to break up this section? Obviously there's a lot to cover with Liquid. We're going to talk about variable tags, theme tags, control flow tags and iteration tags, in a kind of high level broad way, and if you want to go deeper into any of these, inevitably you're going to have to do so the deeper you go into theme development, this is the place that you'd want to look. There's also a quick reference called the Shopify Liquid Cheat Sheet. If I just type in Liquid Cheat Sheet, I can grab this. This is the original I believe, but it's now broken, so the one that's on the Shopify website, it's probably going to be better. Now you can see the cheat sheet, which basically has all the different options and what they do. Say for instance, if I just press command-F or Control-F on Windows, I can now search the page and maybe I want to find the title of a product. I'm going to type in, products dot title, and then I can learn more about what it does. Just simply returns the title of the product. I was thinking, maybe it's a product name, search that, that doesn't come up, title. That's the key word I got to use or maybe I'll go just to product and see what variables I have available on the product object and then, I see, that's the one I'm looking for. The cheat sheet's really valuable. Some people recommend printing it out and having it on your desktop, but you've got this link here at all times and at least you can search if it's in your browser. I always like to keep the cheat sheet handy, but luckily, it's only a short Google search away. Definitely reference this as a quick reference, and then you've got your Shopify documentation for deeper learnings. What I'm going to do is start from the bottom up. I'm going to click on variable tags first, and let's learn about our variable tags. As you can see here, there's a summary and we can go to each of these different ways of interacting with variables. The main one is going to be Assign. If you've done any programming in the past, you should be familiar with assignment. In Liquid, we just need to use the word assign, and then a variable name, then the equals sign, and then the value we want to assign to it. As you can see here, a very basic example, assign apples to favorite food, and then when we use the double curly brackets syntax, we can just output the value of that, and then your output's going to be this. If we go into our code, we can see here a lot of the signs for product, dash, template. Assigns make it easier for us to say, for instance, we have a value that we want to use multiple times on the page, maybe it's a good idea to assign it as a variable at the top and then you can change it in one place or maybe you have a very long string like this product dot selected underscore or underscore first, so on, so forth. You don't want to have to write that every single time, so you can put it into a smaller variable name that's perhaps more descriptive. Here, we have a Case Statement which we'll get to in a sec, where I'm assigning the value of things based on different cases. If I take this, this is obviously where it's being assigned and I search it for other code. This right here is obviously where it's being outputted. You may assign variables yourself, but more likely you'll be using variables that are on objects. If we go back to our reference, and we go into our theme cheat sheet, we can go down and look at the different objects and what variables are available to them. So, we have an object for cut, we have an object for checkout, object for article, object for address. So many different objects. The more obvious ones, products object right here. When we're working with the products, we want to be able to access all of these different variables within a product. We've got the page object right here. The great thing about Shopify is it's quite logical in the sense that if I'm in the page template, I have access to the page object. If I'm in the product template, I have access to the product object. Just showing you as an example, we had a look at the page template before. If I go to this one right here, you see we're in a page template right now. We have access to the page object, and then we can call a variable of the page object right here by going dot title. You can see here, I haven't assigned a title to page. There's no assignment in the code itself. What it's doing is it's looking at the page we're currently on and finding the title, as we said in our pages admin area. That's probably more common, at least in the beginning, than assigning your own variables, you're going to be looking at variables that come on the object that you're dealing with and you're going to either output them or do other operations with them. That covers "variable tags." Obviously, there was a few others in there. Sorry, I'll just go back to it. You may want to look at "capture", "increment", "decrement," but "assign" is the main one. I definitely recommend you go back and read this documentation, but we're going to breeze through this in this lesson because it's only one lesson to go over the entirety of Liquid. All right. So going into our "theme" tag section, these are things like "include", "layout" that we saw before, "section", so anytime we included a "snippet." If I go to "theme.liquid" we're probably going to see the best example of all of these. So remember we created this "snippet" earlier that is considered a "theme" tag. And obviously if we go down, we've got "sections" and then "layout" was one we used in our "page.about." We decided to use an alternative "layout" that we set out in our "layout folder", okay? What other ones do we have here? We also have "Comment." So if we want to make a comment in the code, we can do so using the "comment" tag pretty common in any programming language. "Include" for "snippets." We can also send variables to the "snippet." If I include this snippet name, it's going to obviously include the content of that, but then it's also going to give that "snippet" access to variables that I sent to it. Okay. Also if you're creating a "form" instead of using a standard "form" tag in HTML, you can use a more intelligent version in Liquid by using the "form" and "endform" tags. Okay. We're going to breeze over that because we could get caught up on "forms" for quite a while in itself. There's a bunch of different "forms" in Shopify. And if we use this syntax, we can take advantage of some of the built-in logic of Shopify. All right. "Layout" we used before. "Pagination." This is really cool because "pagination" can be a pain in the ass to program yourself but in Liquid, it's quite simple. We just need to "wrap" the thing we want to "paginate" in this "paginate" and "end paginate" tags. All right. Then we can "paginate" by five or whatever value we want. "Raw" allows us to put out Liquid in raw form. I don't know why you would ever need to do that. "Section" we saw and we can use "style" to output some styles in a actual template. The reason why you might want to do that is because it allows us to make live color updates from the theme editor without a full page refresh. So if you saw before when we were working with our "customizer" and we edited something and then it came up "live." Like if we changed a color and right next to it in the preview, it updated instantly. It's because we're using these "liquid style" tags. I'm pretty sure if you put in your own "style" tags that aren't Liquid, so if you just put in the standard HTML ones that look like this, it won't update automatically, but it will still work. It's better just to use this because then you get instant feedback. "Theme" tags are handy. They're used throughout your theme. They're the ones that are more of the "programming type" ones that you'd see in any programming language. "Control-flow and Iteration". Lets go over those right now. "Control flow" is basically conditionals. So if you've done any programming before, you would have seen an "if then" statement. So right here, it says "if product title equals awesome shoes" then it will output that. If that's the case, you will get this. If not, you won't get anything, unless it's like the opposite of "if." It's basically the same as "if product title does not equal awesome shoes" then you get that. You can also add in an "else if." If it hits this and it doesn't, then go this one, and if it matches that, then output this. But if it doesn't, then you can go to an "else" and then you end the "if." That's pretty standard in any programming language. Also a "case" statement. If you have one variable and you want to check the value on that for a different variables. This is a nicer way of writing conditional rather than having to do "if", "else-if" and on and on and on. If you want to have multiple conditions, you can use the keywords "and" and "or" which is good because it's just standard language. It's not pipe or other kind of weird characters. This reads pretty nicely. "If line_item.grams is greater than 2 thousand and customer_address.city equals Ottawa" then it'll output this code in-between these tags. That reads quite nicely. It just make sense in English reading it. On the flip side you can use "or." We'll have a look at a few examples in just a second. Let's go into "Iteration" tags finally. This is stuff like loops. The main one that you're going to see over and over again in liquid is "for." The language for "for" in liquid is pretty self-explanatory as well. You're going to loop through every product in "collections.products" and you're going to grab that particular product object using this word. This word could be anything you want. It's just best to use a descriptive word. For product in "collection.products" you have access now within that loop cycle to the particular product, to that particular object, and then you can do stuff with that. I know that's vague, but there's a lot of things you can put within here, but this is a great example of you're going to want to loop through a collection of products at some time. This is pretty standard in Liquid and any programming language for that matter. You can also put an "else" statement within a "for." You can break the loop if it matches the sonic condition. You can also skip one cycle of the loop if something matches a certain condition and you can limit offset, define a range of different things with "for." But usually, it's just as simple as this right here, just cycling through a list of objects and outputting the same thing for each of those objects in that collection of objects. Like I said, it probably makes more sense to actually see it. Let's take a look at some random Liquid code now and see what's going on. Actually, before we do that, there is one more thing that we need to look at with Liquid that is going to trip you up if you don't know, and that is "filters." Quickly, we're just going to have a look at "filters" before we dive into the code. "Filters" is kind of a unique thing to Liquid. If you're familiar with other programming languages, usually you would use functions or methods to get the same result as what a "filter" does in liquid. Once you get used to "Liquid filters" you'll find that they're actually quite simple and it's pretty easy to be able to "filter" content that actually makes sense. Let's look at an example right here. We've got the product title that we just want to output on the screen. But now we've got a "filter" that says "upcase." What that does, is it'll take whatever is here and make it uppercase. Your output is going to be, if the product title was "awesome shoes" which it is here, it's going to create an uppercase version of that and then output that to the screen. There is, of course, lots of different "filters." One of them is "remove." This filter will remove "awesome" from the "product.title" so you'll just get shoes. You can also "chain" multiple filters together. You've got "product title" "upcase" and "remove." We're going to "upcase" the "product.title" and then after that we're going to remove "awesome" from it. Then you just get "shoes" in uppercase. Let's have a look at a few others. Obviously, we're not going to be able to get through all of them. Yeah, actually, there are way too many to look at. Let me have a look at some that we might see often. "Image" tag is a good one. We can just put the name of the image and we can grab the "asset URL" of that. We can also "wrap" that in an "image" tag and so you'll get this, which is pretty cool. That's an example where tags really come in handy, instead of trying to find the address of this image and then having to put tags around it, you can literally just define the image name in your assets and then find the "asset URL" wrap that around that and then find "image" tag, wrap that around the output of those and you've got this. You can "chain" a bunch of them. Sometimes you want to put in a colon and some options. Other times you just put in the "filter" by itself, but without going deep into all the different "filters" that's essentially what's happening when you see a "pipe." You'll see a piece of "content" then you'll see a "pipe" and then a "filter" name. If you don't know what's going on, all you need to do is look it up.If I search this in our cheat sheet. I can go in here and see it returns the URL of a file in the assets folder of a theme. Very descriptive, and it shows us a pretty good example right here. So, that's the final thing. We've got our tags, and we talked about objects and filters is also important, but filters goes quite deep. Let's dive into the code now and see some examples, because I think that's where it's going to make the most sense and hit home the most. Okay, so right here we've got a really basic template. I like to show the page template, because it is quite basic, but we're inevitably going to get ones are a little bit more complicated. If I go into the product dash template in sections. You'll see here we've got a bunch of variables that we're assigning. Then we've got a case statement,and the case statement is to figure out what we're going to assign to these variables based on the image size set in our section settings. Now remember, when we see Section dot settings, that is set in the schema below. All right, we're going to dive deeper into sections in the next lesson. So we're going to have a little bit more exposure to sections, so you'll learn more a bit about what's going on here and how to use it. Here we can see a for loop. And this for loop, as we can probably tell from just reading it, it takes the image out of the product images. For each of them, it does a bunch of stuff amongst just displaying the image. If you're wondering what all this is, this is how it does responsive images. Instead of just doing image SRC, this is like a New Age HTML thing where we can output a lot of different images based on the screen size and resolution. Just a side note for those who aren't familiar with responsive images, okay? We can see throughout our template, we're getting just variables that we want to output into various sections of HTML, and we can see that the loop is ending here. Now we can see an if tag here. So if products, dot image sizes, dot size. That's basically if the length of product images or how many products images there are, if that is greater than one, then we do all of this, and if it's greater than three then we want to enable thumbnails. So, a lot of logic in here. You're not going to be able to get your head around it straight away on something as complex as this. But, we'll soon see when we work with blocks in a section in the next lesson, you'll start to see that for-loops, case statements, if statements they are very common and then not that scary. It's just in this one, we're seeing a lot of it all matched together. Here you can see a filter. Here's an example of a filter that you're going to see throughout your project, is the translate one. This one is a special one because it looks up this variable in our languages file, and it outputs the text based on what language we're in. A more common filter, let's have a look, escape. Using what I showed you before, if we wanted to figure out what this filter is doing. Obviously we're outputting a value, but we want to see what escape does. Let's go to our cheat sheet and type in escape. Here we go, string filters. Escape. Escapes a string. That's a bad example because basically what we're doing is, we're taking the string and we want to actually output the HTML tags. Let's look for another one. Another filter. Here we go, pipe json. All right, so let's look in here. We can see general filters. So, what does the json filter do? It converts a string into json format. Again, not the best example because it's a little bit complicated, but we're taking a piece of string here, converting it to json and you'll see here that we get this json version of the object. Let's try and find a more simple filter, because I don't want to overwhelm you with these crazy filters and you just think that they're too hard or too complicated. We can see image URL here. We're taking the logo that we've set in our section settings. We're running it through a filter of image URL, with the argument of one by one. Let's look up that one in the cheat sheet. Image URL. Click on this one, returns the URL of an image, accepts image size as a parameter. So, if we put in one by one, it's going to put in a one-by-one image. You might be wondering why we're putting one-by-one in. Well, we're running it through replace again with a dynamic width. Probably another complicated example, but we'll try and use some more simple filters in a later video. Here's one that's a little bit more simple, append. If we search for append, it just appends a character to a string. So, sales append JPEG, it just adds it to the string. So, that one's a simple one. We're just taking this and we're adding an X to the end of it. That's pretty simple, let's end on that one. Going back to our documentation, if you need to review more about liquid, I definitely recommend you go in and read more. Probably the way you're going to learn better, is by going into the code and just trying to figure it out. Start with the less complicated templates first, and if you see a filter that you don't recognize, which is going to be pretty much all of them if you are new to this. Actually go in, look it up in the cheat sheet, or the documentation. Sometimes you might need more information. The cheat sheet is good, because if you click learn more, it's going to take you to that part of the documentation. But the cheat sheets a good reference because you've got everything on one page and you can just search for it. Obviously, there's a lot on this page and there's a lot in documentation, we don't have forever to go over every option in liquid. But I think it's a good idea to do as much as you can when you're developing your theme. And whenever you come up against something, look at the cheat sheet, look at the documentation, and hopefully you can start to get a grasp on what liquid tag you need or what liquid tags that are already on your project are doing. So, that's liquid. In the next section we're going to bring our knowledge of the structure of our template code and what we've just learned with liquid to build our own custom section, and then we're going to include it on a template. So I'm excited to tie and what we've learned already and show you the exciting power of sections in the next video. So I'll see you there. 14. How to create a custom section: For this lesson, I've closed down our liquid documentation and our cheat sheet, and I've brought back our online store because in this lesson, we're going to learn how to develop our own special Shopify section for our custom theme right here. I feel like sections are the best place for us to go in and do some custom development because sections are really the center of your whole theme. It's the place where you can actually put in schemas so that you can have those customization options within your pages and your templates. So as a good little project for this particular class, what I want to do is actually create a team member section in our about page. Okay. So if we go back to here, click on customize. I'm going to open it up in a new tab. We go to the About Us page that we created earlier. Remember we hard coded in a section for map. I want to replace that with our own section for team members because on our About page, we might want to have a section on the different team members working at, let's say we're a firm or some business or some store, obviously being a Shopify store. Maybe we want to highlight some key team members or the people that work for our company. First of all, I'm going to get rid of that layout tag because I don't think it makes sense to not have a header and a footer. I'm going to go to page dot about, remove this layout tag, save that. I'm also going to get rid of section map and I'm going to take it back to basically, the exact same thing as the regular page. Okay. Refresh the page on our customizer. You can see here we've got a standard page template and in between header and footer, we've just got page content. The content of our page, of course, we are able to change in our pages menu item here. Then, click on the page. This is where we edit that content. Okay. So what I'm going to do is go into the code editor again. In sections, I'm going to create a section with the name of the section that we want. I'm going to call it team members dot liquid. You could call it staff dot liquid, whatever you think is a good name. Okay. Now in order to build this team members section, I'm going to reference other areas of our code and we can copy some structure that's already existing. To get us started, what we're going to need is some kind of div where we're going to put in our code. Then we're going to need a schema. Now remember what the schema is, is the options in our customizer. For this, we don't have a dynamic section in here yet but you saw in other pages, like the product page, we have a customizable section here. This is all defined by the schema. Hopefully, that has been hammered home already. Moving back to the About Us page, we're going to put in our own schema here, like such. Then we need an end schema tag. Within these opening and closing schema tags, what we want to put in is a JSON object. Okay. Now you may not be familiar with JSON, but as I've said in the previous lessons, it's pretty simple. It starts with curly brackets, and now we have to define a few attributes of our schema. I'm going to actually reference the documentation in this lesson because sometimes it's good to refresh the memory and I forget all the time what attributes we need for our schema. Let me just search for themes, schema and Shopify. Theme sections. Let's jump to here, schema in the theme sections part. Okay. Sections should have a name. So put in a name and we're going to call it team members. What else does it need? We can put in a class, and that's the CSS class that will go into the div. We will give it a class of team members section. This is the class we can reference in our CSS. Then, of course, settings. Now, we can write the settings probably before we even write any of the actual HTML code. In order to define our settings that are going to be an array, we need to open and close square brackets, and then we can add in some more JSON objects. For each of the settings, we need an ID, a type, and a label. There's other things we can put in like a default value but we're going to need an ID, type and label for every section settings. The type is the input type which we went over in a previous lesson just briefly. The label is what shows up in the customizer and the ID is the variable that we will use within our code in order to reference what the user has put into this field or the default in the case that there's been nothing put in there. You'll see this all happening as we build. The first thing we're going to need, ID and the first setting I want for our team members section is a section title. I'm going to call it title. For type, it's going to be text and label is going to be section title. You can set this up however you want, it just has to make sense. The type definitely has to be text because that's going to be the input type that shows up in the customizer. Everything else you can set to whatever you want. This variable can be called something else. Whatever shows up to the user on the front end, that can be whatever you want as well. Just note that. Time to add in another object. That's going to be where I define the blocks. What I want to do is, we haven't really looked at blocks a lot in this course already. In fact, we hardly touched on it. What blocks allow us to do, and I showed you in the slideshow section, is allows us to basically add content in blocks. I don't know how else to say it, but it allows us basically to add blocks of content which we can either remove or add multiple. The limit of how many blocks we can add is defined by us. I think blocks makes sense in a team member's section because number one, we're going to have more than one team member most likely. Number two, we might need to add or remove team members in future. I think it makes total sense to use a block. Coming back to About Us. I don't know why I keep clicking back on this because we don't have a section imported yet. Let's actually do that right now. This isn't fully formed yet, but I'm going to go jump ahead a bit and throw that section in here because when it's ready to go, it'll be right inside this template, ready for us to customize. This section is going to be called team members. That word there relates to what we've labeled our section in our sections file, obviously without the dot liquid. I'm going to actually create a default for this so that as soon as we run the page, we're going to get a value without us having to write anything. I'm just going to say, it's meet our team, team in capitals. That's going to be the default value. Let's actually pause here for a sec with the schema. Close that with just one setting and actually use that setting now so we can actually see it come through in the customizer. What I'm going to do for that is, I'm going to steal the structure from another section in our sections section. Too many sections. Let me find a good example here. Maybe, featured collection, feature columns. You can see here that if the section title is not blank, we want to put it out on the screen and we want to use this HTML structure because there's CSS already associated with that, we're going to get some automatic styles right out the gate. Let's do that. In fact, let's use this page width container as well. That's going to make sure that the content we have conforms to the page width. We've already got the closing div tag for that there. I've just basically added the class page width. Then, inside I've got if section settings dot title is not blank, then we put it in and we escape any HTML that is put in there. Because we labeled our title as the ID of title, this is actually all we need to do. We don't need to change the variable name. If I save that, double-check we haven't made any errors with the theme watch, we are all good, and I refresh this page in the customizer, what you'll now see is a team member's section available for us to customize in between the header and footer. If I click on this, you can see our single option that we defined for section title. Instead of Meet the Team, maybe I might say our team. This updates dynamically right in front of our eyes. How cool is that? I'm happy with Meet the Team. Now, I want to define some blocks. Let's go and look in here and search for blocks. Rendering section blocks. That's not we're after. Blocks. Here we go. Sections can define blocks in their schemas and their containers of settings and content which can be added, removed, and reordered within a section. That's a pretty good one sentence explanation of what I was trying to explain earlier. A block needs to have a name and a type, and then you give it some settings, just like you would, usually, in the same way we've done for our section settings. After our settings here, after this little square bracket, what we're going to want to do is put in blocks. It works similar to settings. We have to put in an array and so we're going to use square blocks again. By the way, I just expanded and contracted that just to make it easier for us, but I'll expand it out again. Inside blocks, we have an object. In that object, as it says, we need a name and a type. Name is going to be team member because it's a single team member. Actually, we can just write it in readable English. Then we're going to need to set the type and the type is whatever we want it to be, because this is a block. It's up to us to set our own types. I'm going to call it staff-profile. Now we define settings. Just like we've done up here with settings, we're going to put in the settings for each block. We're going to open up a square bracket and we're going to need ID type and label again. The first setting is going to be the name of the staff member. I'm going to call it staff-name. The type of that is just going to be a text field. The label will be name. Because everyone, everyone's name is going to be different there's no point of having a default. So next option, I'm going to put as the staff title. This is their role at the company. Have it type as text as well. Label is going to be job title. Scroll down to give us some more space. We'll give it one more setting and that will be bio. We will call it staff-bio. This time, we're going to use text area instead of text and the reason why we're using text area, it's the same thinking as in regular HTML, it's going to be a multi-line bio, most likely. We don't actually want to have text because that's just going to give us a one line input. We want a bit of an area for us to write the bio. Now that we have these attributes, what we're going to want to do is put it in HTML up here. What I'm going to do is use the for loop that we saw earlier. What we going to have to do is cycle through the blocks in this section and then put them all out. I'm going to do for block in section.blocks, I believe, and then I'm going to end my loop. This object here in the schema, if you're following along, is the section itself and then in here things we can reference. The section dot name, the section dot class, section settings, section blocks. Actually one thing I'll change is give this a more descriptive name. I'm going to call it staff in section.blocks. Because we've only got one type of block and its a staff profile and we know that all these blocks are going to represent a staff member. I'm just calling it staff. Actually, staff can be plural, so maybe I'll just say member. Again, you can name this whatever you want, just whatever makes it more more sense for you and more readable. What I'm going to do is put in a div for each team member and inside that div, I'm going to output these three variables that we have defined here. What I'm going to do for that is a h3 for the name of the staff member. I'm going to do a span for the staff members title and then I'm going to put in a paragraph tag for their bio. In here, this is where we put our liquid tags and we just want to output whatever is in the block settings. So I'm going to take the object of member, which is what we have up here, go through its settings and select staff name. I'm going to copy this because the only thing we need to change is the end part and instead of staff name, I'm going to put in staff title probably didn't need to put in the staff at the start of it. Actually, I might go in and change that now. Probably doesn't make sense to have. Just going to go in and get rid of staff because we don't really need it. We can just do name, title, and bio. Now we should have enough for a two function. We're going to need to make a few more changes, but at least to get it coming out on the screen, let's have a look after we save. There's no errors in our theme watch. We should be sweet and if we go to our page in the customizes, refresh the page. Now if I go into Team Members, you'll see we can add a block. I'm going to add a team member. I'm going to give the team member name of, let's just give it my name. Web Developer. As you can see, it's coming out right away. I'm going to add in some Lorem ipsum, just copy it from the top here as the buyer and there you go. We have some content inserted in the page. If I add another team member, let's just say it's Christopher Dodd again. I did not come up with other staff member names in preparation, so you're just going to have to deal with seeing my name twice. But as you can see, it's adding another div with all the content that we've set here. It cycles through the blocks and then adds in this content. Very cool. I'm going to click "Save" even though it looks like crap. Let's do some styling. We can take advantage of the grid system in our theme. This is a slight thing that happens on pretty much every theme that uses light to be built or the Shopify free themes will be using the slight grid. What I can do is wrap this in a grid. 'm going to put a div around this, call it grid. For this div, I'm going to give it a class of grid item, and I'm also going to add a class to define columns. There's a few screen sizes developed in the grid system. If you want to learn about the slate grid, let me just see if there's information available. Slates grid. There might be some information available on Google. Here styles with liquid. No. Let me get out of the slight documentation. Click on "CSS Examples". Here we go. Right here we have our CSS breakpoints, medium, large, widescreen, gutter is the space in-between grid elements. If I scroll down here, you can see some examples of the grid system. For instance, if we wanted the column to take up one half of the page on screen sizes that are medium and up. This is the class we would use. In fact, that's the exact class I want to use for our little team members section. I'm going to put that in there. As you can see, it's similar to what they've defined here, they've got a grid and then they've got grid items, and then they've got the column specification. You can stack these with small one third, one sixth. You can have it change how wide the column is based on the screen size. But for us, medium up, one half should be fine. Going to my theme, watch everything sweet. I'm going to go back here, refresh the page. Now you'll see that our team members section is in this nice two column grid. If I was to add a third team member, say it's my name again. You can see. That we've got another section here. Obviously there is spacing issues here. An easy way to fix this is by just giving some margin top to all of these grid elements. Again, we should probably be doing this in CSS, but just in the interest of time, I'm just going to put it here in line. I'm going to give it a margin top of 15 pixels. Save that. Theme watch is happy, refresh the page and now we've got a bit more of a margin. We can increase that margin by whatever we set in here. Maybe we want it at 30 instead, not a big deal. It's up to you what you want to do with your styling. Going back to our about us section, there's one more thing that I feel like our team member profiles need, and that is an image. Now I've left image to lost because it's a little bit more complicated than adding a text field. Looking at our input options. I'm not sure if there's input options here, let me have a look. Input types. I guess we're on the wrong page for input types. If I search the documentation, is it this one? Basic input setting types? Here we go. Here you can see that we can use an image picker for image uploads. There's two parts to this, obviously, I got to add the option in our block and then I've got to add it into our actual HTML. I'm going to put it actually above name. I'm going to create a new object here and inside, I'm going to have the id of photo, type is going to be what I showed you before image picker, and label is photo. We can say whatever we want. I save that and now we have that option in our settings. The next step will be to put it in our actual content. I'm going to put in an image tag up here and the way I'm going to do that is by using a filter that we saw earlier. I'm going to open up an opening closing curly brackets, and I'm going to grab member settings. Was it image or photo that we called it? Photo. Member settings photo. Then I'm going to run it through the image URL filter to get the URL of that photo. Then I'm going to run it through image tag to get the tag to output on the screen. If I save that, check if I've made any errors, look so good. On theme watch, refresh the page. You'll see here that we've got a bunch of No Image. What we should do actually is first check if there's an image. Otherwise we're going to get that ugly No Image. This is an optional step, but it's going to make it look nicer. We'll put in a conditional here, member, settings, photo. We'll put it in and if not, nothing will come up. Save that. See if we got any Liquid errors, no, we're all good. Refresh the page. Now you can see no images show up, until we add them ourselves. If I go into this section, I go into a block. You can now see that I have this photo input. I can actually explore Free images through Shopify's database, or I can select my own image. What I'm going to do is find an image of myself and upload that. Here we go. Once that's in, it will go into the content. If I go out here and add images for the other sections. Let's just add the same one. You'll see it comes up here in the actual block as well, which is pretty cool. You can identify the different team members easier. You'll now see that I have the photo, the name, the title, and a buyer. Now, of course, we want to fix this padding and spacing. We can do that in CSS, but that's not the point of this lesson. The point is to show you these blocks, and how we can build our own settings in the customizer through our code. Now there's one more issue that we have with this, and that the image size is very small. That's because if you use image URL without any parameters, it's going to show up with an image that I believe is a 100 by 100, quite small. What we're going to do to finish off, is add in a parameter here, which is going to tell Liquid how big we want the image. I'm going to say 500x. That will make an image with 500 by 500. Save that, refresh the page, and now you can see we've got a 500 by 500 image on each of our team members. That's actually a bit too big, so I'm going to scale that down to 300, and I'm going to add in another team member, which is just going to be me again, just to show you the extent of the grid. Christopher Dodd, Job Title: Web Developer, Bio, we'll just copy from the other ones. There you go. Save that, and now you can see we've got this two-column grid with our team members. We can go in, we can delete blocks, we can reorder them, or we can add new team members and all of that without using code. As you can see, we've set it up once in the code. We've set up our options. We've set up where we want those values that we set to show up in our code, and we've developed our own section. Now, there's one more thing I want to show you, and that's adding a preset, so that we can use this section in our content for index tag. Let's go back to our documentation here, and maybe we'll find it in this place, presets. No, so we're going to have to go back to the page we were on before. Configuring theme settings, was that it? Theme sections. Here we go. Presets. Here we go. If we click on "Presets", we can see this section, which we can define a name and a category for us to be able to use on our content for index section. If we go into our Home page where content for index is running, and we click "Add section", let's see. There's Custom content. That's not what we're after. Rich texts, Map, Newsletter. See, we don't actually have our team members section here. If we wanted to add it as one of our sections in content for index, we just need to add a preset. I'm going to grab this as an example just to save time. Go in here. Close down blocks to make it a bit easier to read, and put in presets. Now, we don't need blocks because this is just going to set a preset on our blocks, which we can do if we want to, but not necessary. All I want to do is give it a name and category, so that we can use it in our content for index. That category should match one of these ones here. I think the most appropriate maybe Store Information. Let's just go with that. I'm going to call it Store Information, and because it's in capitals, I'm not sure exactly whether I should put mine capitals or not. I'm just going to see how they do it with the map template. Going down to map and scrolling down to the bottom to see the preset, we can see the name is Map and the category is Store information. Just like we've written it. Category, store information, and the name is going to be Team Members. Press "Save" on that. Have we gotten the errors? No, we haven't. Actually we do. We've got an invalid JSON. That's because we haven't closed this down, and we haven't actually closed the square bracket either. How do we boot that up? Hopefully we don't have any JSON errors now. Updated. Now, if I refresh our Home page in the customizer, click "Add section." Now on the Store Information, I don't know why it's coming up twice, but at least we have it here. We can add our Meet the Team section. Down the bottom, we can add team members just like we did before, and it'll show up in a nice little grid. As we update the content, it will come up automatically, and we can reorder that section, within all of our other sections. There you go. How good is that? I'm actually not going to save that because I don't want to meet this Team section on my Home page. But that pretty much concludes booting your own Shopify section. Now, as I said before, you'll want to style it a bit differently. You'll want to add some either inline styles or go into your theme.scss.liquid, and add in some styles using classes to target what you've put in this new section. Maybe putting in class of team member, underscore, underscore name, and then doing the same for your title and bio. This would be a good way to lay out your CSS using BEM, Block Element Modifier is what that stands for. If you want to learn more about why we're using underscore, underscore here and why it's used all throughout the FEM, BEM is what you need to research. But that's outside the scope of this class, unfortunately. What I've just done here is put in some classes that we can go and target in theme.scss.liquid. This is not specifically a CSS class, so I won't get into that. But yeah, that's it. That's your custom section built. Hopefully that shows you the power of sections. I've worked with other platforms in the past, and I haven't seen anything like this where you can just define a bunch of options in a JSON block, and then suddenly you're able to use it directly above it and have such a nice user interface for customization. If we go back to that About Us page, where we've hard coded this section in there. We are able to use this lovely user interface which updates what we have over here in the preview live. That's really cool. I hope you guys have enjoyed learning how to do this. In the next few videos, we're going to wrap up this side, show you how to send it off to a client side or to a proper store where you're going to actually pay for a plan if you so choose. Stick around for that. I'll see you in the next video. 15. How to further your learning: So in this course we learned how to quickly spin up a Shopify development store, how to edit the code of the debut theme that came with the store and in the process, we learned how themes work and the options available to us to customize virtually anything to do with our online store friend. Now this knowledge alone might be enough to satisfy your basic Shopify needs. But inevitably, you're going to need to make changes beyond the scope of this course. Now in the next bonus lesson, I'm going to introduce you to a much more complex way of developing Shopify themes, starting almost from scratch. But before that, I'm going to assume that the debut theme or any other theme that takes your fancy, provides a good base for how you want your site to function. And this is definitely what I recommend to everyone who's developing Shopify themes. There is a lot of great themes out there and especially when I'm working with clients, I usually use an existing theme as a starting point. Doesn't always make sense to re-invent the wheel unless you really need something custom. And that's why we're going to talk about slate in the bonus lesson. We're also going to talk, after this lesson about, how to take your site live. I've actually put this lesson before, that one, because once you actually transfer ownership of your store, you may lose access to it. Unless the person or the account that you've transferred ownership to starts on a paying plan. So if you're ready to get on a paying plan, you can definitely learn about how to move your site onto your actual Shopify plan in the next video. But for now, what I wanted to talk briefly about is how you would take the next step in learning what you want to do with your Shopify theme next. So let's just dive into our theme and talk a little bit about maybe some customizations we would want to make. Now the first customization that you might want to make is a styling change. And that is very normal and that's probably going to happen at some point with your theme. You might want to change say the margin between this heading and this right here. So you go into your section and you look for that option in your customizer and you don't have a option in your customizer to change the margin here. So you have two choices. You can either go in and just create the change, or you can create an option in your section code to allow yourself to do this in your customizer. So if it is a styling change and you just want to apply it to side-wise without making it a customizable option, what you can do is just throw it in your theme.scss.liquid. So let's just use that example that I just talked about. Let's find out what this is. So we are in the image with text overlay section, and unfortunately we can't look it up by the template name. We're going to have to search the folder and find image with text overlay. So image with text overlay and then in here we can see where that appears and that name appears in the schema of this section right here, hero dot liquid. So this is the section that we're currently looking at. If we look at it right here, maybe it's not clear which of these divs actually relate to what we see on the page. So we might want to inspect and this is something I often do. Using our development tools, we can see what that is. And as you can see here, it is this div with a class of R-T-E dash setting mega dash subtitle, mega dash subtitle, dash, dash, large. So looking into my code here, I can search for mega subtitle. I can already see it, but just to be clear. So we've got mega subtitle, and mega title. Here we go. We've got it in a few different places, but this is the one we're looking for. So if we wanted to make it a option in the customizer, what we could do is add an inline style and set margin top and we would define it maybe as, so we go into section dot settings and maybe we called it top margin. Now we'd also want to check if we actually have set the top margin first. So we'd want to put an if statement around this. But let's just say we want to change the top margin site-wide. So we would go into our theme dot S-C-S-S dot liquid, scroll all the way down. This is a very big file and let's create a rule for mega dash subtitle. And in here, we're going to set the margin top to something ridiculous, just so we can see that it's working. So I'm going to press save on that. Check that we haven't made any errors. Yes, it's updated now and if I refresh this page, you can see now that we've got this ridiculous margin top that's affecting any element with a class of mega dash subtitle, which should hopefully only be that section within this section or that piece of text within that section. So I've just removed that. It's updated our code. If I refresh the page again, we're back to normal. So that's one scenario. Maybe you want to update the styling. So you can do that with CSS. Maybe you want to update something that happens with JavaScript. So I'm not sure how much ajax we have on here. If I put that up to three, looks like the debut theme is not heavy on the JavaScript. I have to click update here when quantity updates. But this could be a customization option. Instead of having to click Update, maybe we want this to update whenever we click on this. And because this is a live page change, we would want to do that with JavaScript. So you would research how to do that and then you would go, and likely you put it in your theme dot js. So let's say we want to do that, how would we word that problem? Open up a new tab and search in Google, make quantity update price automatically, and then of course, we need to put in what platform we're using; Shopify. Okay. So there's a bunch of different articles on here. I haven't actually searched this before, but this is the process I would go to find the answer. So this is not the best thread. You're not always going to find the perfect answer on your first search. Here we go. Here's something that looks about right. So judging from my knowledge of JavaScript already, and of course, this is not a JavaScript course, so if you do want to get deeper into JavaScript, I have got a course on JavaScript here on skillshare.com as well. But you're going to want to set up an event listener here to check when this changes and then we're going to have to update these parts here, rather than having it updated when you click the update button, which you can see here is reloading the whole page. So that's a customization you might want to do. Of course, before you customize anything with code, you should check whether you can actually just customize it using the inputs that you already have in your theme customizer. I mean, that's why they're there for you to use without having to dig into your code. And as a side note, if you are digging into your code and you're creating something that you might want to change later, make it a option in your schema and that way you can edit it here and flip it around without ever touching the code. That's one of the reasons why to use this schema at all. So it could be a styling change, could be a change you could easily fix with your schema, could be some dynamic JavaScript stuff. But it's likely you're going to come up against something that you don't already know how to do. Again, as I mentioned in this course, we only have enough time to do an overview. So your best places to go find some answers, if you're okay with reading documentation, let's go to the Shopify documentation again and go to themes. Here is where you're going to be able to search for all the information that Shopify makes available for you to develop themes. So if we want to learn about sections, search for sections in the documentation. Click on Theme sections. And then you can learn about the schema. You can learn about including JavaScript style sheets, rendering section blocks, all sorts of stuff. So the theme documentation should be your Bible, should be your textbook on this stuff. And then also the Shopify cheat sheet, which we looked at earlier. So if you go and click the first link, this is like a summarized version of the documentation, and were able to use command F or Control F on a Windows to search for what are the different variables on a particular object like product. So those are the two main places you might want to look. Obviously, there's two other courses on Shopify, on this platform, skillshare.com. They are a little bit outdated and one's quite basic, and the other one just goes really advanced really quickly. So I guess pick your direction with that. But otherwise, I was actually thinking of creating a start-to-finish Shopify course. If there's enough interest, if you guys want to learn that, definitely let me know in the discussion box below and if you have any issues or any customizations that you want to do within Shopify that you are struggling to figure out, definitely leave it as a comment in the discussion box below and I'll do my best to point you in the right direction. So as I mentioned in the next video, we're going to talk about taking your site live and then in the video after that, we're going to do a bonus on Slate. So Slate is if you want to get really serious about theme development and start from basically scratch, that's where you want to look. So two more lessons and then we're going to wrap up. Hope you guys are enjoying the course. I'll see you in the next video. 16. How to take your site live: All right, so for this lesson, I've once again closed down those tabs and I've brought us right back to our store. We also have the tab for our Shopify partners account still open. What I'm going do in this lesson is show you how to essentially take your site live or migrate it. Or get it ready to become a live theme on the internet. To have users come in, use the theme on a real store front. So there's a range of different ways we would do that. So the first scenario, let's say, is that this is an existing store. So Chris's skill share store is a store that's running. There's orders coming through there's products already in here, customers. This is a live store. All right, so we've done our development in a separate theme, which is not live, which is the way we should do it. If we're ready for that theme to go live, all we need to do is click in Actions and then click Publish. Now if you are working in an existing store, you want to be careful about the things that you edit, that aren't the theme itself. So if you're redeveloping a website and you're adding pages, those pages are going to be live on the site the moment you create them. But it's not such a big deal unless you really need those pages to be private because you're not going to be linking to those pages most likely. The other thing, navigation. So you might have to create some new menus. In your theme you're going to link to those menus. Those menus are going to be there with the existing menus that are in the live store all in the same place. So stuff like blogs, pages, navigation, and products are in your store itself. All right, they're not specifically related to the theme, so we need to be careful with that as well. So scenario number two, you're working with a client store, but you are developing your theme on a development store. Now you may want to do that for this particular reason that I've just mentioned, because they have their own products, blog post pages and navigation already set up and you want to create something that's completely separate. So what you're going to want to do is maybe packaged this theme. So Download it and then Upload it to the other store and then migrate the other stuff that you want to come across as well, like products, blog posts, pages, and navigation. That would be the most time-consuming and manual way to do it. So usually you would try to avoid that. So a good mix in between those two scenarios is to develop on an actual store. But be careful about what you create in the products, blog posts and pages, and where possible, maybe hide them or obscure them or not have them linked to anywhere on your current website. If they are still in development and not ready to go live, you want to make sure that they're almost invisible to the public. But if this was your store and you haven't even gone live yet, you've developed your theme. You just hit Publish. As simple as that. So let's say scenario three, you only have your partner's account and you've just developed this store as a development store and now you want it to be a real store where you can accept orders and basically become a legit store of its own domain. Or maybe you want to transfer this store to somebody who's going to do that. So maybe you developed this for a client and you can transfer this store to their account so they can start paying for Shopify. Now they have a duplicate of the store we just created on their own account. So that's really what development themes are built for. They're built for us to be able to develop a theme, get it ready for the client. Whether that's another person or it might just be us. Get the theme ready and then it goes over to a paying Shopify plan. So, a warning before we demo this, as soon as you do this, it's going to be transferred over. There's a likely chance that you will lose access. In fact, I'm actually pretty sure that once you transfer this development store off your list of development stores onto a client's plan, then for as long as they take to actually stop paying for that plan, neither of you will have access to that site. So warning, do not migrate or transfer ownership of a site until somebody is ready to pay for Shopify. So if [inaudible] out of the way, let's go through the process. So I'll actually close down the store and I'll go to the partner count. Just refresh this because the links actually expire. So we want to make sure that we have the most recent page. As you can see here, we've got Chris's skill share store under development stores. Now to make this a real store, we want to transfer ownership to somebody. So right here it warns us what's going to happen and this dot point right here is the warning I gave just before. The store cannot be accessed until the new owner selects a plan. All right, so we're going to go in here. Right now, we cannot select any new owner because what we have to do is add a staff account. So I'm going to click "Add a staff account" and it's going to take us back to our store. So I'm going to create myself as a staff account, Freelancer.com. This staff account will have full permissions. So I'm going to click Send Invite. I have actually already done this. So let's see if I can find another email to do this in. I have a few different emails, luckily. Now I've sent the invite. So you can see here the account owner is Chris's skill share store admin, which is our partner account, but now we have this stuff account. So if I go into my inbox, I can actually accept that invitation. So let me do that right now. Here we go ahead, it took little bit. But now it's here and it's asking me to create a staff account. So I'm going to create a staff account. I'm going to have to put in a phone number and a password. Let me generate a new password with my password management app. I'm just going to use this same one actually as we used for the store. Then I'm going to click Create Account. Now I am logged into the store. But as you can see here, my name is Christopher Dodd and not Chris's skill share store. So same store, different user logged in. Now I have full permissions to access the store. I can do whatever I want. But the issue with this is I'm still on a development store. So if I want to take this store live, I am going to have to go back to the partner account. So getting out of these stores and I'm going to refresh the page we run before. Now I should have that option to transfer. So if I go into the Select box now, I can see Christopher Dodd, okay? So I can click on Christopher Dodd, Transfer the store and this is where I will lose access to the whole store. All right, so you can see here that this Chris's skill share store. If I go back to development stores, It's no longer there. Actually, it's going to go over to manage stores. Actually, it's right here. I actually did a test one before. As you can see, it's inactive. But if I click Login, looks like I still might be able to access it. No, so I can't access it right now. What's going to happen? Like it said, in the warning before, I will have to wait for the account that I transferred it to starts paying for a plan. Alright? So if I refresh the page now on that account I was logged into as Christopher Dodd. We will try and log back into the store. Fortunately, it's not letting me. This is convenient. But let me just go back and type this store name in explicitly [inaudible]. Alright, so we've got this. Be back soon. I'm going to click Sign in. Maybe it's because I'm logged in in two different accounts. So I'm just going to open a private window. Chris's skill share store. Was it Chris's skill share store? Yes. Click Sign in here. Hopefully, it allows us to sign in. Yes.So now we can sign in with that partner account that we created and hopefully my password's still saved to the clipboard. No, it's not. I'm just going to grab that from my text edit. I have that now. Now it's logging me in. What you're going to see coming right up at this dot is choose your plan. So this is why I warned you about doing this until you're ready to actually start paying for a plan because there are no other options once you login to that staff account, than to start paying for a plan. So you would choose and you would go through the motions and set up your billing and all that. So from the perspective of the partner, so I'm logged in in the partner account here. It's a managed store that I actually can't log in to or access until this staff account, the person or the account that's actually going to take the store and go live with it, chooses a plan, and starts paying for Shopify. That's what that box is. But let's just assume the client or yourself or whoever this account is associated with, chooses a plan and starts paying for it. Well, now you'll be able to access the store in your partner account still by clicking login. So it'll go from like it already has done, from development stores to manage stores. Then you can start to manage it as a quote, unquote, Shopify partner. So this makes total sense if you are developing a store for a client, you've transferred it to them, you've told them, start paying for Shopify. Your site's about to go live. They do this. Then as you're the developer or the partner working with them, you can still log in and collaborate and work on their website as well. So that's how it works with development stores. Again, like I mentioned, and we're not going to have access to the store anymore. Are we? Yeah, so we have been totally locked out now. But as I mentioned before, unfortunately, I can't show you because I'm logged out at the store. But as I showed you before, we could just download the theme file itself and then upload it to another side. If we didn't want to go through this whole transfer ownership part of the whole process. So there's a few ways of doing it, but this is essentially how you would take your site live. Step number one is you need to actually turn that theme live. Then you need to start paying for a plan if you're not already. Then you have a fully functioning Shopify store. So that pretty much concludes the whole process from spinning up a Shopify store with a default theme, going in, exploring the code, creating a custom section, customizing it as much as you want, and then finally, transferring it when you're ready to another account for you to start paying for Shopify and start running your store. So that's the whole process. In the next video, we're going to actually show you a different process, starting with Slate. So if you're interested in that, stick around, otherwise, I'll see you in the conclusion. Thanks so much for watching guys. I look forward to seeing you in the next video. 17. Bonus: Slate part 1: In the next video, we'll talk greater in depth about an old-school development tool that Shopify ended support for back in January 2020. I'm talking about something called Slate. Since January 2020, it's been clear that Shopify have been moving away from Slate, and now with the announcement that the Shopify CLI has been extended to allow for theme development as well, I see little to no reason why anyone should start a new Shopify project using Slate. That being said, I've left the next video in as a tutorial for anyone who has forced to use it. Some older themes might still be using Slate, and therefore this knowledge is not completely obsolete. If you have any choice in the matter however, I definitely recommend using the latest tool for the job, and that tool is currently the Shopify CLI. 18. Bonus: Slate part 2: Welcome back guys. In this lesson, I have closed down all those other tabs, I have closed down my code editor, and I've closed down my terminal which was running theme watch, because we're going to learn about Slate in this lesson, okay? So if you've used Theme Kit before in this course, and Theme kit is great because it allows us to edit themes on the fly, and Slate does something similar, but it also has another element to that, and that is, it creates a brand new theme for us. Actually, we can do the same thing in Theme Kit. I probably mentioned theme, new as one of the commands for Theme Kit. It creates a theme that's, kind of a Stata theme. So you can't do something similar within Theme Kit. But if you are very serious about developing a custom Shopify theme, you're going to want to use Slate, and Slate is a little bit more complicated. The folder structure is going to be a bit different and it takes a little bit more effort to set up. But that's why it is a bonus lesson in this Shopify course. I didn't think I could do a Shopify theme development course without at least talking about Slate. So, we're going to talk a little bit about Slate, get it setup on your computer and if you want to know more about it, you can let me know in the discussion box below, alright?. So let's just look up Slate now. So if I go Shopify/slate, we've already gone through the documentation and looked at, the grid. There's two links here. Let me have a look. This is the GitHub repo. But what I want to look for is the actual website, for Slate, which is right here. The information in here is not the best, especially with getting started, so I actually recommend you follow along this class rather than follow the instructions here, because I actually learned how to get started with Slate through a video, on Shopify's YouTube channel. So, if I type in Shopify Slate YouTube video, maybe it'll come up, yeah. So right here you can see a video by the Shopify partner' s YouTube account, and this is actually how I learned to the steps of installing Slate. So you can also reference this or you can just listen to me in this lesson right here, okay? So, first of all, there's actually a slide in this video, which talks about the history of Slate, and it actually comes from Timber, so remember I mentioned Timber before, and they have a slide in here to say why it's now Slate. The timber framework was too opinionated and this is like a programming word, which means that, it decided too many things for developers upfront, so they stripped it back even further and they created, Slate, okay? So Timber is now Slate, and slate is actually the starting point that Shopify themselves use for all their Shopify themes that they develop. It's also the starting point for a lot of themes that you'll find on the Theme Store, and in fact, I've worked with themes before that it developed from the party developers, not necessarily Shopify, that still use the Slate responsive grid. It's good to know a little bit of Slate even if you want to go off and develop in a different way, chances are you're probably going to use Slate if you want to develop custom themes, because this is basically what Shopify recommends and what they use themselves. Like I said, you've got the documentation here, and of course it's going to be a good reference, but in terms of installing Slate, I recommend you just follow along these steps, which I've found easier than what it says in here. So the first step is you need the Node package manager for those that don't know, Node is a JavaScript development environment, so we look for a Node. It's technically a JavaScript runtime, okay?. You don't need to know what that is. All you need to know is that you need Node and you need Node Package Manager, in order to start using Slate or installing Slate. So download and install Node, then you want to, download and install Node Package Manager, which is just npm for short, and I'm not actually going to go through and show you how to install Node and npm because I already have it on my computer. You should be able to find pretty detailed instructions on how to do that on both for their websites, and lots of articles, online about it too. Then, once you've installed Node and Npm, you're going to look for the package for Slate CLI so I'm going to, click on the first option here. You can see this one which isn't the right one, I don't know what that is. I think we need to, be a bit more specific and say Shopify Slate, and as you can see here, we're looking for the one that has @Shopify in front of it, so maybe I'll just, type it in as I know, Shopify, Slate, there we are, exact match. I don't know why that didn't come up in the search box. Here you've got Slate CLI and if you're not sure if you're on the right one, you need to be on the one that says @Shopify/slate, okay? So this is it, this is the one you need to install and you have installation instructions right here. So you're using an npm command to install Shopify Slate and that's why you need npm, because you need npm installed in order to install this package right here. Now as I previously mentioned, I already have Slate installed, so I don't need to do this, but let's just say you run that command and now you have Slate installed. The next thing you're going to want to do is just like we did with theme kit, navigate to the directory in which you want to start your new Slate project and then run a particular command. So I'm going to, open up my terminal again, and I'm going to navigate to where I want that to be. So I'm going to icd, code/personal/current, and now that I'm in current, the command I'm going to run is going to be in a Slate documentation so, it should be a menu item here for commands which there are, and what we want to do is create a new project with Slate. So, I doesn't actually have it here which is why. I feel like the documentation isn't that great. Maybe it's in here. Slate theme, no. Okay. Well, that Command that you're looking for is Slate, theme. Then the name of the theme that you want to create. I'm going to call it Clean Slate, came up with that name all by myself, and it's going to download the slate theme and set it all up for you to use. This might take a little bit, so I will catch you at the end of the installation. Now it is finished downloading slate, and the reason why it's taken so long to set up is because it's downloading a bunch of dependencies as well. If we go into our current folder now, I've got the Skillshare theme here, and now you can see in the directory as well I've got clean slate. I'm going to click on that, and open that up in my Finder Window here, but what I'm going to do is also change into that directory through here. Now that I'm in that directory, I can run Atom dot because I'm running atom, and I can open that directory, that project up in my code editor. All right, so let's contract some of these folders here, and you can see that the folder structure on the top level is quite different. We've got this config.ylm file that we need to set up as well, but as you can see, we've got a folder at the top with node modules. This is a long list of dependencies and that's why it took a long time to download, I think for me it took maybe a minute, which is pretty considerable time. Then you've got this src folder, which inside you should recognize some of the folders. You've got assets, config, icons, layout, locales, scripts, sections. There's a few other ones like styles, scripts and icons that went in the theme that you developed before, but this is basically in the src folder, that's basically your theme where you actually make your changes. The big difference with slate is we don't actually upload this to your site, what it does is, compiles all of this and we'll create a different version of this and then that will go into your theme. We'll see how that works in just one second. What we're going to need now however, is an actual store to run this theme on, and unfortunately, we already transferred that development store, so I am going to have to create a new store. It's not biggy though, I'm going to use the same password and I'm going to call this, the Slate Skillshare Theme, if that name is available. Yes, and I'm going to use the same password as before. Put in a random address and then we can say it's for testing an App or a theme, click Save. This should all be pretty familiar, we've done this before, it's creating a store. Now we need to go through a similar process to what we did before. Now because we are going to create a new theme and we're going to upload it to the store, we don't need a theme ID, what we need though is the store name, which we can find here, and also the API password. Like we did earlier in the class, we need to go into Apps, Manage Private Apps, Create New Private App. Sorry, I'm going a little bit faster this time because we have done this before. I'm going to call it Slate Connection. Obviously it has to put in an emergency developing e-mail, and we need to give it the same read, write access as we did previously to the theme templates and theme assets. Other than that, we are good to save, I understand, Create the App. Now we have two of the ingredients that we need to actually configure slate. The reason why I need an API password to the store and the store name is because we're going to run a similar commands, a theme kit watch, which is slate watch. We're doing this ahead of time, but we don't need it just yet, what we need to do is actually build our theme and then upload it to the store. I'm going to right-click here, so we still have access to our password to reference later, and In our Commands over here, you can see the command for build, and it will build a production ready version of the theme by compiling the files in the dist folder. This is stuff that happens behind the scenes with theme kit, but for slate, it's happening right in front of your eyes and what I mean by that is you'll soon see that we have our assets, our styles, broken down into multiple files. You can see blank states, forms, the grid, remember with our previous theme, we had only one css file or scss file that held everything. Well, slate is a little bit more modular, it's a little bit more complex, it's more of a scalable way to make shopify themes because you're separating out what would be a big css file, which is what you want when you run it on your actual website, but in terms of development, it's nicer to have different folders and different files, but what you want is all that compiled into css JavaScript in a single file, okay? So you can see here plenty of different scripts and in our styles, plenty of different styles. So one of the things that's going to happen when we run slate build is going to compile all of that into like one style sheet or one JavaScript file, and we'll see that happening once we run the build command, so again, it's just slate tools build, think actually we can use the word slate without tools, there we go, that happened pretty fast. If we go into our code editor now you can see a folder called dist, and in dist we can see assets and now we can see theme.scss.liquid and theme.js, which is what we're used to. So it took all the styles from all these different style sheets and put them together in this, and it took all of our scripts and put it together in this, all right? So that's part of what it's doing when it's compiling. So this is where we want to develop, but this is where we want to upload to the store. So we can actually compress this file, make it into a zip and then upload it to the store, but we actually have a command within slate where we can do that automatically. So I'm going to call slate zip, and now we have a upload folder with clean slate.zip, okay? How goods that? All right, so let's go back into our store and as you see, it's password protected so we might want to disable password, but what I'm going to do is click, Upload theme. I'm going to have click, choose file, going to go to my directory where I have that zip file, Upload folder, click on clean slate.zip or whatever you called yours, upload that file. It's going to start spinning up, and then I'm going to click "Actions", "Preview", to see what our theme looks like. Now this is a Slate Theme. It is super bare-bones, pretty much no styling whatsoever, but it is a fully functioning theme. So if I wanted to put some products into my store, I could actually select them, add it to a cart and buy them, believe it or not, in this terrible looking store,okay? Now this is the whole point about Slate and the reason why I recommend you start from an existing theme, unless you want to develop your own custom themes that you may be going to sell on the Shopify platform, or you have maybe a client or needs that a very particular, you probably don't want to start from this starting point. But, for that purpose, you have Slate here for you to use, okay? So now you have your Slate theme on your online store, but just like we did with Theme Kit, we're going to want to be able to edit that theme through our own computer, like we have with our code files here, okay? We don't want to edit it within here for reasons that we previously mentioned, okay? So just like Theme Kit, we can either update config.yml file, so we can go in here and put in the details there, or we can run the configure command that's quite similar to our Theme Kit or theme configure. So again I can't see any documentation on configure, so let's just do it the other way. Let's just put it in our actual config file. So let's find out our store name, which is right here. Pick that, put that in here. Theme id, actually let's do password next. Put the password there, and then remember how we find the theme id. We just go into our customizer and then in our customizer, we can pick it off the URL. Okay. So now we have our project actually pointing to this theme that we've uploaded. So now they are essentially configured to connect to each other, okay? And as you can see, we can still customize even this bare-bones theme using our theme customizer section here, okay? In theme settings, it should be pretty bare, which it is, because there's not many CSS rules set up, but that's for us to decide what we want to put into these theme settings, okay? Now, if we want, we can run slate deploy, and any changes that we make locally to our theme, because we've set up with config.yml to point to this particular theme on this particular store is going to upload all files and deploy them to our website. But as we just saw, all we did was zip the original theme and we've already uploaded, so right now both versions of our theme, the one we have on our own computer and the one on the actual online store should be exactly the same. So what we can do for detecting local changes is run "Slate Watch". So I'm going to do that right now, "Slate Watch", and if our config.yml file is set up correctly, this should start watching for changes. Now the difference between Slate and Theme Kit is it actually creates a local address for us to look at the theme as well. And there's actually some steps here in the documentation to create a self-signed SSL certificate, but this can be kind of cumbersome and annoying to do, so a way to get around this privacy error is just to say that you accept it and you're going to proceed to the local host. All right. So let's close now and we can enter using the password. So we actually didn't turn off password protection, so rather than turn it off, I'm just going to find out what the password is in our preferences. It gives you a really basic password by default. I'm going to put that in here to access our theme, and here you go. You have the theme, just like you would by going into your themes here, and clicking "Preview", we have the same thing, but on a local address, which is kind of misleading because we are still running it through the Shopify platform which is not actually local, but it creates this little environment here for us, so at least we know we are working with Slate on the development theme. So just to conclude its working and that it is actually watching for changes, let's actually edit something. So remember we go into the SRC directory to edit our theme, and let's make a basic change. So I'm just doing anything to demonstrate. Let's inspect this element and see what that is, it is the site logo. So let's just remove that. This is probably going to be in the header section, so I'm going to go into here, search for a site logo, here it is, and let's just delete this whole, a tag. Think I'm going to hit "Save" on that. Let's have a look at what's going on in our terminal. You can see here, there's some stuff going on, reloading browsers, file change is successful, sync to store and now if we refresh this, we should see that that site logo, which was just text, is now disappeared, and if we bring it back, hit "Save", it should register that file changes successfully synced to store. Sorry that's a tongue twister. And refresh the page. It's back again, okay? So I'm not going to go through how you're going to set up this theme to actually make it look presentable because that would be a course in and of itself, but this should provide you with a good starting point to maybe take your Shopify knowledge to the next level. So by learning how to actually customize this and change this into a fully functioning theme. While it is fully functioning, but I mean it's just terrible user experience. It just looks terrible. If you could transform this into a really cool store-front, then you're really going to know the Shopify platform. And maybe that's something you want to do. Maybe you want to create a whole custom store-front. It's up to you. That's why I put in this little section about Slate at the end. If you have any questions, of course leave them in the [LAUGHTER] discussion box below. Thanks so much for watching guys. I will see you in the conclusion. 19. Conclusion: That pretty much concludes this class on Shopify theme development. For your class project, I want you to create your own store and share it with the rest of the students in the class projects section below. Of course, don't be concerned if your store is just for practice as we're all here to learn skills. Just make sure that you either share the password or remove password protection entirely, so that other students can view it. In terms of further learning, there's a lot of information about the various aspects of liquid and Shopify themes on the official Shopify website. Plus, you can access the Partner Academy through your partner account by clicking on the Education link. That being said, if you need any tips or guidance, be sure to leave a comment in the discussion box, and I'll do my best to point you in the right direction. Anyway, guys, thanks for watching and I hope to see you again in some of my other courses.