Shopify Theme Development EP03 - How it works

hello and welcome to this third video in this series on Shopify theme development in the first video we covered what a theme is and where it sits in the context of the Shopify environment in the second video we learned what data is contained in your theme and what data remains the same while changing themes in this video we'll be getting into the nitty gritty discussing the actual process of updating and developing Shopify themes so let's get into it so you have an online store already but you want to change the way it looks and operates or maybe you're building your first online store either way the process is quite similar because for most people building a Shopify theme from scratch is usually a poor idea let me show you what I mean so I've jumped inside another development store of mine this one's called Chris testing shop and this is where I do a bunch of different theme experiments one of them is creating a new theme using theme kit so new theme is a command in theme kit and it basically gives you a blank starting theme so let's have a look at what that would look like alright so pretty basic there's nothing on the homepage apart from this menu up here if I click on catalog it'll take me to the all collection which shows me all of my products I have some demo products in this fake store let's say I want to buy this tuxedo this is all fully functioning might look terrible but it actually works so I can click Add to Cart there's a card here if I click checkout I I can't actually go to checkout because I'm on a development store um but you get the point you can actually go through pretty much everything you could do here's some blog posts I stole from Shopify website just to fill out my store with blog posts so you could start from this point but as you can see it's so bare there's not even a footer your header is literally just a bunch of links there are no styles basically I don't think there's any CSS in this theme so ever so maybe it's gonna be the case where you're just doing something so custom that you need to you know start from a starting point like this but most of the time and even in my experience developing themes for clients I've never really started from this starting point or anything similar we always start from an existing theme and to contrast that with what you just saw this is debut which is a free theme that comes with the current version of Shopify if I view that this is already a much nicer starting point you know I can use my own icons here I can update the fonts and everything but at least I've got you know a framework you know at least I've got some things already in there and that's why I recommend everyone start with an existing theme unless you've got very specific needs it just makes sense to you know use this as a starting point and go from there so that should make it pretty clear most of the time you should use an existing theme as a starting point whether that be a theme you've already worked on or something brand new from the theme store let's start with the free theme debut so I'm back in my development store and right in front of me I have a fresh copy of the debut theme doesn't matter what theme you're starting with this is the one that just came pre-installed on my Shopify store when I started it this is a free theme you can use a bunch of different free themes from Shopify basically we're starting from scratch with this theme but I will admit I'm not starting from scratch when it comes to the shop because I have put in some demo products so you're gonna have to put in some products whether they're real or just to play around with if you want a CSV that you can import to get all these files into your store just comment below and I'll find a way to send it to you okay all right so we are starting from scratch here and if it's the live theme we can actually click here to edit the home page and now we're in the theme customizer so we have pretty good control already there's a lot of things we can do we and update the logo we can change the menu that is linked here we can have an announcement bar at the top and we can change the text on that it's pretty good and this is why I recommend you know having one of these themes as a starting point you've got lots of different options we saw in an earlier video me changing that color alright so let me show you some of the stuff you could do here we're in this image with text overlay we can set a background image and then instead of image with text overlay shop the new range and that will update pretty quickly after I write it in here okay now this is what I recommend you do when you're trying to customize your online store you want to use the full abilities of the Shopify theme customizer say for instance you wanted to reduce this section height look in your customize the settings here we go section height there we go so it's right there it doesn't make sense to go into the code unless you wanted a more precise Heights specification it just makes sense that you would use what you have available hearing your customizer but let's say for instance you go into this section which is a featured collection section and first of all I need to link to a collection because this is all just placeholder content and I'm gonna add an actual featured collection okay now here we have a few options that are available in our theme we can check this box and it'll show the product the vendors now don't take much notice to the actual words here but you'll notice that underneath our product title there is a product vendor and that is what you've set up in the actual product so to show you the actual product if I go to this one awesome sneakers and I go over here to organization you can see the vendor is what set here so I'm just toggle Adhan and now you can see the vendor underneath it now one customization that I see I can't do here in this section is add the product type so product type is another attribute on your products and I've set it to kicks what about if I wanted kicks to show up instead of vendors maybe I don't even care about vendors I want this to be an option for kicks instead well that is an example of where you might need to dig into your theme code and in this case that is likely to be the only way that we can change that is by digging in to the theme code changing the option here and using a different attribute to display here okay so that right there is an example of doing what you can in the customizer but when you run into a roadblock like this that's when okay now I need to jump into the theme code a good rule of thumb is to make sure that the part of your theme that you want to customize is not already an available option in the customizer first before trying to solve your issue with code but now when you've gotten to that stage where you need to start digging into your theme code where do you start well you could dive straight into the Shopify admin click Edit code and update files right in your theme code editor but there is a better way to do it and it's using a tool called theme kit theme kit is a command line tool that allows you to download your theme to your computer and work with it what's called locally rather than update it on your Shopify admin itself the advantages to this are that you can use proper code editing software plus you can manage your code base through the version control system get or other likewise systems now if this is all starting to sound a bit too complicated don't worry about it you can always edit your code through the Shopify admin nothing wrong with that but for any big code changes I definitely recommend downloading your theme code and working with it on your own computer when it comes to theme kit if you'd like to see a full tutorial on setting it all up check out lesson 4 of my Skillshare class on Shopify theme development or simply head to the documentation at Shopify github io / theme kit ok let's return to our example of changing product vendor to a product type our first step is determining where we need to go in our code in order to make that change and for that we need to take a step back and look at how the Shopify theme is structured this is a diagram I created to explain the Shopify theme structure if you check the links in the description I'll make it available for you guys to download and save to your computer I recommend you do that because in a moment we'll be looking at how the structure you see in the diagram is reflected in the actual folder structure of your theme code now as a side note in my Skillshare class I have a total of three lessons that span over an hour worth of explanations on how this all works so if you want to go deep into this check out those lessons but for this video we're just going to do a quick overview first of all let's open up our theme code doesn't matter which theme in our Shopify admin and what I'm gonna do is put the diagram up on the right here and have the folder structure here on the left side by side so you can see how this all connects actually I'm just going to simplify the diagram first as I don't want to confuse you with too much detail now before we start it's important to mention that if you're watching this video a year or so from now this structure may be completely different recently Shopify announced that they're planning to update the theme to allow greater flexibility through master pages and sections everywhere so just a heads up that you might see something a little different if you're watching this video well into the future for now this is what the Shopify theme structure looks like at the top you've got layout templates sections and then snippets just like in the diagram you've obviously got assets here config and locales we had a quick look at config in a earlier video this is where your data and the options available to change your data stored in these JSON files but in terms of theme structure if you had to go and make a change to your website and you had to dig into the code this is where you would do it in these four different folders so at the top you've got layout and to be honest you're probably not going to spend a lot of time in layout usually people only have one layout for their whole theme and this one has one layout called theme dot liquid and this is the layout for pretty much every page in this theme so there's a lot of as you can see liquid code so anything that has this curly bracket and then the percentage sign is liquid code we'll talk about liquid in a later video but all I want you to notice is you've got your head section so you should be familiar with HTML and what the head section and body section is so you'll see the whole head section is here it has a tag here for your special options that will go into your head but for the most part if you need to edit your head directly you would do it in the layout then you've got the body down here and you can put in some stuff that's going to be on every single page here so stuff like a drawer or anything that follows you around the whole website and then you're going to link to your header and footer in sections and then right here is content for layout now inside content for layout is where your template will be shown so right here you've got a lot of them up quite self-explanatory like collection liquid this is the template that's going to show up when you're on a collection page and if you go to any like regular page like a content page not a product or a collection this is the template that you would edit if you're on the search page this is the template you would edit and index is gonna be your home page you've also got article cart if you have a cart page and you might be noticing something here and that is that in some of these you've got very stripped down versions of the template with just a link to a section so I think we saw that in collection template as well and you might be wondering why even have this template to begin with well the reason why it's linking directly to a section and not including really any code at all in this template is because sections are kind of like the intelligent customizable parts of your shopify theme okay so for instance rather than just writing everything in the collection template if I go into this section and find the collection template which it links directly to you can see I've got everything that shows up on the collection page I'm using the collection object which is available on the collection page but if you scroll down you can see a schema and this is set up in the exact same way as your schema down here and config that we saw before but this is specific to just that section okay I'm gonna show you that actually I'll show you that right now so I'm gonna open this in a new tab so we can keep this all open and I'm gonna open up the customizer now in the customizer you can click here to change the page that you're customizing or the the set of pages so this is a collection template and you can see here this is a section so header is a section footer is a section and they're contained in our layout so they're gonna appear on every page that uses that layout which is basically every page okay but this is the section for collection pages and the benefit of using a section and including all your code in a section is you can provide customization options and you do that through a schema so as you can see here I know this is getting pretty deep pretty quickly but as you can see we've got different inputs here so a type of select and it the label is products per grit and here are the definitions of the options so if we look over products per grid and here are the different options okay and I think this should load yeah it's live updates which is another awesome feature of the customizer that's why I say if you can do something in the customizer definitely do it in the customizer don't dig into the code until you need to so if you wanted to add and you pass your page or pretty much control the whole template of your page with settings that you can change in the customizer you're definitely going to be using some sort of section okay now we could go much deeper into sections and I do in my skill share class but for now we've got to move on with the rest of the different types here so we've got one more and it's snippets snippets should be pretty easy to understand it's just reusable bits of code so if we look at the diagram snippets can be inserted anywhere I'm not sure if we have a snippet in our layouts snippets are included by using the include keyword ah here we go so we've got here the include tag and the name of the snippet to include and if we look through here it's all arranged in alphabetical order we should be able to see here we go social meta tags so all snippets does is any code that's in that snippet if you write include and write the name of the snippet it literally just takes the code from here dumps it right in there nothing too special about it there's no schema or anything it's just a way to organize your code especially if you're going to be reusing code over and over again for different sections okay yeah just know that if there's something that you're going to be using in multiple places maybe create a snippet for it first now I know this is a really quick overview of your theme structure but really what you want to do when you're you know making a theme customization to your code you kind of want to start from the top of the diagram from the top of this structure and work your way down so is this something that's going to be on every page if so you're probably going to be changing your layout file and if you only have one layout file it's probably going to be called theme liquid okay maybe you want your customization specifically on collection pages in that case you're going to go to collection and you're gonna see this link directly to a section so you're going to skip templates altogether and you're going to go to collection template here if you want to change something you dig right in and change it unless there is an include in here let me there we go include pagination so maybe you wanted to change the pagination on your collection pages well then you go down and find the code for that snippet just a warning if it's a snippet it could be included in multiple parts of your theme so if you change it you know change the actual code in your pagination snippet right here that's gonna affect all the places that you call that snippet okay so maybe if you want it just on the collection template you create a new version of this and include that or just write it in where the snippet was okay the other thing to be aware of is what objects are available in what templates okay so your templates not only control say for instance what shows up when you go to the collection page in order to dynamically affect the collection going back to the collection template you need access to the collection object so you can see here the call to the collection object this is getting a bit more into liquid but basically the good thing about these templates is if you're on the collection template or in a section that is included on the collection template you have access to the collection that is being served on that page and you can update it so say for instance you wanted to put something after every collection title so you've got collection here dot title you can add some text after that I don't know what you would want to put after that maybe you want to say title specifically let's just do that now hit save and you'll see if we go to collection page any collection page that title is in front of your collection title okay not a very practical example but shows you where you can make theme customizations okay essentially that is the really quick overview of your theme structure looking at it through a diagram and also through the folders but it is set up nicely in Shopify to the point where if you look at it from top down that's kind of how it works except for snippets they can be inserted in any of these three so we're on a different store now but it doesn't matter we're on the same theme so let's do that code change we identified earlier in the video when we were looking at what we can customize in the customizer ok so what I'm gonna do first is go to customize theme get back to that point where we figured out the option that we wanted to customize it was in the I was actually in the home page featured collection section and it was this button here okay so I'm gonna uncheck that and let's go through the process of how we would actually make this work now I need to say one thing on the home page you notice how on your home page you've got all these sections that you can actually reorder you can actually delete the section altogether or you can even add a new section and that's because your home page has a special tag on it it's the content for index tag ok so if I go into index dot liquid you've got this tag content for index if you put that on any of your templates you're gonna get the same thing you're gonna get this really dynamic block that you can add in multiple sections and reorder them alright so the first step is to identify where we need to make the change and it's not gonna be on the home page template because we just looked at it and it's this dynamic content for index so we need to think a bit deeper and think about what section we are wanting to customize and it is the featured collection section now unfortunately the name of the actual file and the title that shows up here might not be the same or even close to being the same but if you're able to search your entire code base you can search for the field the actual title appears in the schema of the section let me show you how that works so I'm gonna look for some looks like featured collection maybe it's this one collection dot liquid and as you can see here in the schema the name has been set to featured collection so this we now know is the section that we're interacting with here okay now I know you might not be familiar with liquid but bear with me I just want you to get the concept here in a practical way we will talk about liquid perhaps in a future video so what we're going to look for is a reference to vendor so we are showing product vendor here it's got to be somewhere in this section okay so let me just search for it using control F then de so here you've got the actual option to show the vendor that's the checkbox that you see here that is defined in your schema if you remove that completely you won't get that checkbox but what we're looking for is where it's actually included in this section and our search for the word vendor doesn't show up anywhere else but here and that suggests to me that there might be a snippet and as you can see there are a few includes here so it looks like we might have to edit this file product - card - grid so I'm gonna go into my snippets folder and look for that snippet product slash card slash grid now you can see here if show vendor is on then we're going to put it in this HTML element and inside we're going to have vendor so let's customize that right now instead of vendor I'm going to put in type okay I'm gonna save this and then I'm gonna refresh my customizer and I need to go back into that section I'm going to click show product vendors and now you can see that Kix is showing up not the vendor this is the actual product type not the vendor that's said on the product so there's one more thing that we want to change before we click Save and say we've done the customization and that's we want to change the text in the option because it's saying show product vendors if a user were to click on that and it shows up type that would be confusing so we need to change it there as well and so what I'm gonna do I'm also gonna change I might not change the class because it could break it you'll need to go into your style sheet for that but instead of calling the option show vendor I'm gonna call it show type save that and then the other part is in our schema so we need to go back to the the collection dot liquid section come down to where it has show vendor and instead of show vendor I'm gonna call it show type and in the label that shows up to the end user call it show product type I'm gonna hit save and then again refresh the customizer head back into our section and here we've got show product type if we turn that on we've got product type rather than product vendor so that is an example of something that's quite small but an example of when you might need to dig into your theme code as always make sure that you have tried to do it for your customizer but if that option is simply not there you might have to dig in and actually do your customization alright I feel like we've covered a lot in this video but essentially that is the whole process at least in the context of a basic workflow however as I mentioned towards the start of this video if you're doing any big customizations or working on a store that already has a lot of traffic in sales you're probably going to want to use a tool like theme kit and you'll want to figure out how you're going to properly stage your changes before they go live and that's exactly what we'll get into in the next video hey guys thanks for watching if you enjoyed this video please give it a thumbs up and subscribe for new videos also if you can't wait for new videos on Shopify definitely check out my course on Shopify I'll link it up in the first link in the description happy coding and I'll see you in the next one

Channel: Code with Chris the Freelancer

Views: 20,146

Keywords: Chris the Freelancer, Code with Chris the Freelancer, Web Development, Digital Nomad, Learn to Code, Shopify for beginners, Shopify 2019, Shopify tutorial, ChrisTheFreelancer, Christopher Dodd, Code, codeschool, Programming, CTFCODE1, Skillshare teacher, Shopify themes, Shopify themes tutorial

Id: 9t6I-YY4o30

Length: 26min 39sec (1599 seconds)

Published: Mon Aug 19 2019