Shopify Theme Development Crash Course - Shopify 1.0, Theme Kit, Node, Gulp, SASS, Git & VS Code

what's up guys good morning good morning hopefully you guys could hear me okay if not let me know in the chat so if you're if you're here hanging out this morning thanks so much for showing up i really appreciate it i really didn't think anybody was gonna gonna come and hang out oh one second got some audio delay there i i really didn't think anybody was gonna come hang out it's been a while since i've done one of these live streams um but i'm really excited uh because i've got a couple of proposals out right now actually for a few different shopify businesses um and one of the things that i realized kind of looking into what had changed since the last time i had worked on a shopify theme is there's a lot of development changes that happened uh for example uh end of 2021 or end of january 2020 um shopify dropped support for slate which was how they used to be able to uh do kind of that local development workflow um so now they strictly use this tool that they have called theme kit and honestly it's i it's something that i've never really played with something i haven't really tried so i really wanted to kind of dive in uh to figure out how we could actually go from having absolutely no shopify store uh no account nothing like that to actually being able to work on a theme and push that theme up um to shopify and hopefully set up some sort of uh development workflow that kind of makes sense where the client can have their live website and we can have a kind of uh development site that we're working on pushing changes to and and checking uh them before we actually go and serve them live uh so that's what we're gonna be diving into today uh i'm gonna if you guys don't know who i am my name is david martin i am a web designer and a web developer uh i'm also an agency owner i own the agency ux hacks uh we help our clients leverage really good ux practice to hack into their traffic's potential and boost their conversions so that's kind of a little bit about me um i'd love to know who's here in the chat feel free to you know drop your name out uh in the chat let me know what you guys are going to be working on today and if you guys want to follow along um i dropped some documentation in the chat as well we're going to be going through that documentation but first let's go ahead and jump into my browser and we're just gonna go and set up a shopify account so this is the one step that i did prior just to make sure that uh you guys wouldn't have to pay for anything uh because as a developer i don't want to bring on any additional costs that i don't have to bring on if i can avoid it um what's great about shopify is first of all they have a 14 day free trial if you just want to set up the the regular trial but they also have what's called a partners account which you can go to by visiting partners.shopify.com and what this will do is essentially allow you to create development sites right so as many development sites as you need to obviously there's going to be some features or functionality that you're not going to have access to um because you're not paying for an account but that's okay we don't really need uh the checkout we just need to be able to go set up a store and actually upload some products and set up a theme and then customize that theme so if you're following along shopify.com partners and you're going to want to hit join now that's going to ask you to create an account i've already done that so i'm going to go ahead and log in and very straightforward it's going to ask you to you know give you some business information so i'll go ahead and set that up and i'm just going to set this up to a co-working space that i have my business registered to uh it's asking me to tell them a little bit about myself so i'm gonna say that i'm going to be building new shopify stores for clients uh again if you already have a shopify store don't worry about this just sign in but this is a great way for you to build shopify stores for clients on your account and then send that over to them as soon as it's ready to go ahead and get launched i don't necessarily have a client that i'm currently working with so this is just kind of like a test account and then they want to know what e-commerce platforms i've actually worked with so i'll go ahead and put some of the ones that i've worked with in the past and then i have read and agreed to the partner program agreement and that's it it's really that that simple to kind of go and get started so here we can go ahead and click to create a store if you're seeing a message that says to actually verify your email address you might want to jump in and do that first i've already done that to save a little bit of time but the first thing that we're going to do is we're going to go ahead and create a store and i'm going to set this up as a development store so this means that um again we're going to be setting up a demo store for a client and then we can transfer ownership to a client what's great about this is if we transfer ownership to a shopify account that hasn't paid yet and they go and they actually pay we actually get um some recurring revenue from the first year which i think is really really cool and one of the the great benefits of being a shopify developer so definitely recommend if you are working with clients that you set up a partner program and that you work on referring your clients through that account just to make some extra cash so we'll go ahead and name the store obviously this is not going to be for uh the agency brand but it's just going to be easier to have it all tied to the agency for me and then for the password let's do something simple so i don't forget it developer preview this is one of those things that again it's new i'm not really sure what it is a lot of this stream is going to be me sitting here and trying to figure out how to do this stuff uh so i apologize if you're here looking for a master class from someone who is super experienced that's not me i've been building websites and themes for you know the past 10 years uh but in terms of shopify you know we handle very few shopify clients as it is um and lately again a lot of things have changed so we're just trying to kind of uh catch up so let's see here shopify's developer preview gives you early access to new features of shopify so you can build on the platform with confidence uh we don't necessarily need that i just want to use the features that i know my clients are gonna have so i'm going to go ahead and hit save that's going to go and create our store awesome it says it's ready to go okay so let's go ahead and see what we can do here obviously we can go and add some products um but what we're really interested in is in customizing our theme so let's go ahead and get started with this now if you're setting up shopify for the first time uh shopify automatically goes and gets you set up with a a theme called debut and that's what we're seeing here so that debut theme we could click here to preview and let's see what that looks like it's very bare bones right but it kind of gives us everything we need to just get started right away they have all sorts of different themes they have free themes and their theme library that you can go and you can explore they also have paid themes which if you're dealing with a paid client a lot of times this is what i recommend is going and actually checking out some of their uh premium themes they have got some really really nice looking ones in here um and a lot of the the functionality is already gonna be built out with for you um there obviously is an option for you guys to go and create a blank theme that has absolutely nothing in it uh but it that's a little overwhelming even for me uh because you're just starting from nothing right and we're gonna do that uh today just so you guys can see what it looks like but if you're doing this for yourself you're doing it for a client uh you'll really be saving yourself a lot of time and effort if you actually think about going and grabbing one of these free or paid themes so let's look at one of these paid themes and here you can see what it looks like this one's very uh graphic very colorful i like this one a lot actually um but they've got some really nice ones that are free which is probably what we'll be doing um but let's look at this one let's add it to the theme library so that we can take a look so the way that shopify works is actually pretty interesting you have your current theme which again if we go and we preview it's the one that we started with but it also lets you add themes to your theme library and the reason that that's really cool is because it works almost like a staging environment where you could work on this theme in the theme library and once you've got it to a point where you're happy with it you can actually go and then deploy that or publish it so that instead of having the debut theme as the theme that's being shown to customers we can go ahead and add this new theme so let's go ahead and hit customize and i just want to walk you guys through this customizer and how it kind of works uh because it's it's really interesting and it's really different than what i'm used to coming from a lot of wordpress development so here we can see this template which is the home page if we want to change which template we're editing we can go ahead and hit this drop down and this drop down will actually give you all of the different page templates that exist on your website so we're cool with the home page we've got the header we've got all this stuff in the body and then we've got the footer and then of course we've got some theme settings so let's open this stuff up here we can add a a logo image we can play with all of the different um all of the different options that we have here for the actual header uh same for the footer we can go ahead and change all this stuff around if we want to very easily drag and drop or uh change uh the the actual positioning of some of these elements we can do things like show payment icons is not showing up but that's okay uh and then what's really cool about this is we have access to what are called sections and these sections are pretty much built out already for you in your theme so that you could actually come in here and you know instead of having to code a bunch of stuff yourself you can say hey i want to add a collection up here to the top you've already got a section for that featured collection right it'll add it all the way to the bottom we can add a page we can add a banner um and it's all set up for us all the code is already set up for us it's already mobile responsive which is really really cool uh so let's say we want to add a banner right under uh this top image we can go ahead and select it it'll add it here to the bottom and we can very easily just drag this all the way to the top and now we've got our banner all the way at the top let's go ahead and put that one under you can go and hide sections if you want to to see what that would look like and then of course you can come in here add images change the text really really cool stuff but what i want to know is how we can go and actually set up some of these uh theme features uh and work on it locally on our environment and what i mean by that is instead of using this uh customize option to edit your theme and then jumping in and actually editing the theme style or the theme code which let's see how we can go okay so if we go to theme actions then we can click edit code and this is the way that a lot of people edit the code on their shopify websites the reason that i don't like to do this is because we lose a lot of features that you kind of need if you're actually going to be seriously developing um themes for shopify or extending or customizing themes for shopify uh the first and most important for me is the ability to actually save your save your progress and track revision history so one of the things that i want to do is i want to set up git on my local environment and if you guys are not familiar with what git is let's talk about that for just a second so get is a free and open source version control system and what this does is it essentially tracks changes to files that as you're making them so if you go and you're actually changing a lot of these uh files that are in these templates so let's go into this index.liquid here we can see content for index if we're actually coming in here and making changes and let's go ahead and do this one here just adding an h1 tag and then hitting save now if we come and we preview our store you can see our change is live there my problem with this again is that you only have version history on a file by file basis which it's great that at least that's a feature but once you're actually editing a bunch of different files it's kind of hard to look at all of the different files that you may have changed and if you made a mistake or you want to revert a specific update that can get a little bit complicated you're gonna have to go into the file you're gonna have to remember uh which time stamp it was that um you actually made that change so there's no commit message or there's no message saying what changed so you're just going to have to kind of go through each one of them manually and figure out which was the correct one which is not ideal right so i want to i want to install git i want to make sure that that works if you don't have get installed go ahead uh git dash scm.com and then go ahead and download if you're following along if not uh don't worry about it we'll get to that in a second um the other thing that i learned which is actually really interesting to me is that shopify dropped support earlier this year for scss directly in their site so it used to be that you would have this theme.scss file and in that file you would have all of your scss and when you would save that or change it it would automatically compile your scss into css and then put that on your store that's no longer supported by shopify they said that apparently people had really slow load times on their site or really slow load times actually here in their code editor which again it kind of sucks for us as developers that uh we have to go through this extra effort to set up this local environment just to get fcss to work but at the same time it's very exciting because instead of just having this one gigantic file which if we look at it you know it's almost 7000 lines of code we actually are going to have the ability now to uh set up partials or different folder structures to better manage our scss so we're going to be doing that as well and the way that we're going to be doing that is using gulp so if you're not familiar with what scss is let's talk about that for a second so it's css with super powers and honestly that's so that's so true um because it gives you all sorts of different features that you don't normally get with css so if you don't have this installed definitely come into sas lang.com install and then you're gonna just want to uh run this command here uh npm install global sas and we're gonna go ahead and just open up our code editor i use visual studio code i used to use atom but honestly visual studio code really does the job for me so let's go ahead and open that up and then i'm just going to open a terminal and i'm going to check to see if i have uh sas installed and the way that i'm going to do that is by running sas sv let's see it's been a while i might have it only locally installed so let's see let's start by creating a folder we're going to do this on our desktop just to make things easier and we're going to call this shopify oreo so then we're going to want to cd into that hit clear and now we're inside of our folder for our shopify tutorial next let's go ahead and run this sas command npm install globally sas and just make sure we have sas installed globally that's done next i want to go ahead and get started with git so i'm going to get init and that's going to create a git repository let's go ahead and open this up in vs code as well go and now we've got our folder here go back into this and now we can test that we've got git by creating a readme file and running git status now we can see that we've got an untracked file but let's really quickly just go and set up a git repository for all of the work that we're going to be doing and we're going to be doing this with github i'm going to go to github.com and you don't have to use github you can use bitbucket or any other service that allows you to create uh git repositories but for this we're going to go ahead and just use github and we'll leave this public so that at the end of this if you guys want to grab the code you can let's go ahead and create that repository cool so now we can go and run some of these commands we've already get in it we'll do uh the get add readme which is the file that we created we can commit git commit and set the message as initial commit so get commit leave a message next we'll want to go ahead and add origin uh if you're working on uh branches you could obviously set the branch as well uh it'll default to main so i'm not worried about that but this is the really important command here get remote at origin and what this does is it tells git on our local computer to come and look at this url when you're pushing or pulling changes to this repository so we're just telling it where on the internet this repository exists and if you are not sure if that was properly set up you can uh run git remote v i think and that'll tell you what are the different um urls that it's looking at for its repository so here you can see we've got a fetch url and a push url you're not sure what that means don't worry about it uh and now we can go ahead and just get push so get push origin master if this is your first time using it you're gonna have to kind of get set up log in to get through your terminal and then probably get some credentials set up using github we're not going to go through that because mine's already set up so here you see the message it pushed uh to this url in the new branch which is master so now if we refresh this we shouldn't see this message anymore now we see the readme file that we created which is great that means that our uh changes are being tracked so now anything that we add to this folder we'll be able to have access to here in version control uh so that takes us to what the next step is which is to start with shopify themekit so shopify themekit allows us again to use workflows uh like git to work with a team of theme developers which as an agency owner this is really important for me because i don't want to be the one that's coding everything i want to be able to hand this off to a team and have them kind of take care of things for me and i just want to make sure that everything is being done correctly it also allows us to upload themes to multiple environments so that's really what we want we want to be able to have our website uh our development environment which is what you're seeing here and then when we're ready we want to be able to push that up to a client website uh and themekit is going to help us do that and then we can look for local changes so changes to our actual local environment and as we're making changes theme kit will automatically push those changes up to our environment so that we can very very quickly just refresh the page and see what we've done so you're going to want to again go to shopify.dev tools steam kit if you're following along and then they've got this getting started tutorial that we're going to be working through so we've already come in here and we've set up a partner account so we don't have to do that anymore next we want to install themekit and if you're on linux mac or windows they've got different instructions on how to do that for each so we're going to use the windows instruction and i don't have chocolaty installed this is kind of a a package manager i'm assuming similar to homebrew so we're just going to get a chocolaty installed here on windows so here there's a command that we can go ahead and run and we need to do that with powershell okay so here there's a little command that we gotta run first let's go ahead and open up powershell for windows if you're using mac again follow those instructions instead all right so let's go ahead and run get execution policy it returned restricted so now we have to run this command just to make sure we have the correct access level uh to use chocolatey so yes we want to change the execution policy okay so the reason this didn't work is because we didn't run it as administrator so let's go ahead and open up powershell again as administrator this time and click run as administrator windows is going to check to make sure that that's actually what we want which it is and we're gonna run this one more time again restricted so let's run that second command yes this time it worked which means that we can run this other command which will get chocolaty installed and now we'll wait for that to install on our local machine awesome but that's done we didn't see any errors just a warning so now that chocolate is installed i can go ahead and close out powershell and we'll go back into this tutorial and let's try to run choco install theme kit here as choco is not recognized let's see why that is let's try doing this as a administrator on powershell and see what went wrong this is one of the not so fun parts about development is you sometimes have to work through these errors so it does work for whatever reason it needs me to do it through powershell that's fine let's go into our desktop okay sorry about that let's just make sure that we've got a folder that we need look at our directory windows system32 and let's see where our directory is supposed to be so inside users ux and then desktop great so now we're in that directory and now let's try to run that taco install commands there we go now it's installing theme kit it says theme kit package files install completed it's asking me if i want to run a script uh to finish the installation say yes i do want to run that script there we go so now we've got theme kit installed next let's go ahead and this is done globally which is why it didn't want me to do it uh here in the terminal it needed administrative access but we're gonna close out powershell for now we're gonna move to step number two which is generating api credentials so we have already access to this shopify website next we're just going to follow these instructions to get um some api credentials set up so let's go shopify we'll click on apps and then near the bottom of the page manage private apps here we go manage private apps private apps are currently disabled we want to enable private app development i understand now we can go ahead and create a new private app and that will help us generate those api keys that we need hopefully you guys are following along again if you have any questions uh feel free to let me know in the chat and i'm happy to get those answered for you guys all right so we'll call this um local theme workflow we'll just add our email in there next let's go ahead and set up the permissions and the permission that we're gonna need to give it uh for this api key is really just to be able to look at our themes but we want to be able to read and write to our themes and here you can see that in number seven now we'll go ahead and hit save create our app and that'll give us our key so let's move on to the next step we want to connect to an existing theme and the way that we do this is by running this command in our terminal so this is a theme get command and then we're going to want to put our password in and then our store url and for our password we'll want to use the api password that we just grabbed and then for the store url that is this url that we have here so in our case uxhacks.myshopify.com let's go ahead and run that really quickly so theme get list password is equal to the password that we just grabbed i will change this after the live stream for security purposes you don't want to give out your api password ever luckily there's not too many people here so i'm not too worried about it next our store url which is uxhacks.myshopify and we'll go ahead and run that let's see what that error is command not theme is not recognized as the name let's see if we need to run this here because we can see that theme kit install was successful but let's try that one more time using powershell if you're using mac you don't have to worry about this you can just run it using sudo so team get list dash dash password is equal to api password and then store is equal to ux hacks dot my shopify dot com i will run that and here we can see the themes that we have available so we've got debut and we've got express so next we can set up our config files so apparently this config.yml file that we need to create is going to be the one that's managing our local connection to our shopify store theme so we've already created a directory for our theme to live on our local environment we've already cd into it now let's go ahead and run this command again but this time we're gonna download a specific theme to work on so in our case um we're just gonna work on debut which is going to be the most common theme that people start with but again if you've set up other themes the way that we did in the beginning you can go ahead and just use that theme id we generally i generally don't recommend you ever work on a live theme but in this case we've got our own development environment this is not a live shopify store i'm not worried about it let me there we go so let's go ahead and run that command team get e and let's grab our password here let's set our store url and let's set the theme id that we want to grab as the id for the live theme which is debut now we can go ahead and run that command something went wrong there even though it does end in myshopify.com clearly it didn't run let's see if we did something wrong here or equals uxhacks.shopify.com not sure what happened there let's just go ahead and re-type that out invalid store domain why this is one of the not so fun parts of being a developer having no idea why an error is occurring let's go ahead and just copy the url get rid of all this extra stuff why is that not working let's just run an update and make sure that it's not because of this update let's try that command one more time this thing is killing me when in doubt we'll google the the error and see what's up okay well let's try this with the long hand the way that this guy is saying let's hope that this works and they just have outdated documentation very frustrating stuff but we'll get through it or stash password [Music] well at least we got through the store one right so let's try this again with just that oh i think i forgot that stash no unknown flag so let's try this with just dash e oh there we go so all we did here is ignore this documentation that is wrong for whatever reason and we use dash dash instead of dash p and dash dash store instead of dash s and that resolved our issue yeah so now this is going and pulling all of the theme files down into our local environment or here into our vs code and now we can see that all of these files have been added so here we can see our templates our snippets our sections all that good stuff so let's give this just a minute to finish updating and then we'll be able to run a git commit so that we can go and we can store this initial commit on our git repository that we created just stuck on 58 for some reason give this another minute before i cancel it hope that it works it does give us this warning which is cool just letting us know that this is actually the live theme on ux hacks there are also these instructions here on creating a new theme which is really cool so this is again if you want to kind of start from scratch um which i think would be great to kind of give it a try in a little bit but for now let's go ahead and edit the existing theme that's there not sure why this got stuck um so we're just gonna cancel it i guess oh it says that it got all 152 files in there so i guess it wasn't actually stuck i don't know let's go ahead and again we'll just open up this terminal that we have and run git status and now we can see all of the different folders and files that were created um that are now being tracked by git because of the way that we set this project up so now we can go ahead and just get at all of these files and folders we get all of these really annoying warnings just because we're on windows but don't worry about that we'll go ahead and clear it now if we run git status we can see that all of these different files have been created now we can go ahead and create a commit and just say initial commit for debuting we can go ahead and push that up and now if we look at our github right here and we reload now we see all of the different folders and files that are a part of our shopify theme very cool so next we can run this theme watch command and what that'll do is it'll watch for changes in our local environment and anytime that we make a change to a file it'll go and it'll upload it over to our website so let's refresh this let's see what it looks like and let's make a super small change and see what happens here so to open up our theme files and let's go into templates let's go into index liquid and let's run that theme watch command so theme watch again we're gonna have to do this through powershell i'm gonna have to figure out another time how to make sure that this works through our terminal so theme watch so now this is actually watching changes so because this is the live theme it's letting us know that we'll want to pass this allow live flag so let's go ahead and run a theme watch dash dash allow live now it's saying that it's watching for file changes to our theme go ahead and just put this over here and let's make a change really quickly we'll add an h1 and say this is a we change to the live website we'll close our h1 add a p tag under this okay this is pretty neat right close our p tag save it now on the right hand side you can see that it's saying hey we're processor change and we've updated your change now let's go ahead and check our um actual website let's refresh and now we can actually see our changes here live on our website and we can start editing our theme as much as we want and we've got version control setup so we can very easily you know run git status we can see which files we've actually changed we can upload that to our repository and we can start this development workflow that we've been working on now there are a few other things that i want to get set up uh the first being um scss and the reason that i want to get that set up is just because i don't want to work in this gigantic theme.css file it's just it's not a really good way to kind of work i'd rather leave the theme code as is and then go ahead and create our own custom code as opposed to coming in here and editing this 7000 line file which is just massive and kind of overwhelming so let's go ahead and get that set up and what we're going to do is we're going to create a new folder and we're going to call this scss and inside of this scss file we're going to create a global.scss file and this is going to be where we pull in all of the different components or all of the different files that make up our scss uh file that we're going to be creating so let's go ahead and create a new file inside for now and we'll call this custom.scss and let's go ahead and just write some very basic code so let's do header and body and let's make that background color red and because we're using scss let's go ahead and have some fun with variables and we'll create a variable called color red and we'll set that i'm gonna have to refresh on how to do sas variables uh because it has been a while but that's okay because we've got our documentation right there we go so poland very cool go back in here and we're just gonna set this color red to the color red and now instead of actually using this color red we can go ahead and just use the variable and the reason why this is awesome is because if you've got a theme and you've got a client they've got brand guidelines they've got a bunch of different colors instead of coming in here and remembering the colors every single time like let's say it's not actually red they use let's say that's the color red that they use right instead of having to copy and paste this color all throughout your sas files we can just go and use the variable color red and that will automatically say all right i'm going to look to see what color that is got it let's go ahead and make that change so we've got this file that has our custom scss now let's go ahead and let's import that into our global files let's just make sure that we're able to import correctly again it has been a while here we go so let's import custom scss so we could come in here and we could run this pre-processing command every single time and what that will do is it will go and it will generate uh the output css file that we need uh but that's kind of a lot of work for me i don't want to remember this i'm i'm notoriously lazy as a developer i'd rather just uh run a very simple command one time and it'll automatically go and get things set up so we're gonna actually use uh another service called gulp so let's go ahead and look up the documentation for that gulp js now if you don't have gulp installed you're going to want to hit get started you're going to need two things the first thing you're going to need is you're going to need node installed so let's just go ahead and see if we have node node version we do have node let's check if we have npm installed we do have npm installed great that saves us some time you can also check to see if you have npx installed which we do if you don't have those things installed then you're going to want to go ahead and get them installed and you can do that by going to node.js and then getting it installed for your specific program uh so i would recommend you know getting the most stable release as opposed to the one with latest features uh and then this will kind of run you through the documentation on how to get everything going uh node is a javascript environment that we're going to be using to run this sas pre-processing and we're going to be using gulp as uh the script manager to actually execute those tasks so we've got that done let's go ahead and check to see if we have gulp installed gulp dash v see check version oh gulp dash fee doesn't look like we oh we put a double flag or a double dash of dash v looks like we don't have gulp installed which is a little bit surprising to me but that's okay we're gonna go ahead and get that installed we might have gulp installed globally so i'm going to try running this command first yep and now make sure we have the command line utility installed for gulp by running npm install global gulp cli give that a little bit of time done next we want to create a package.json file in our project directory so we're already in our project directory let's go ahead and run mpm init this is going to create a node package manager project inside of our directory a package name fine version fine i'm just going to hit enter you really don't have to come in here and edit all this stuff unless you want to once that's done we can see that it's created this package.json file for me very cool now we'll want to install um gulp in our dev dependencies so we'll run that command npm install dash dash save dev uh now once we run gulp dash dash version we should have a gulp installed locally here on our project you'll see that this package json file was updated with a dev dependency of gulp very cool and now if we run gulp dash dash version for whatever reason it doesn't work wet let's give this a try here on our powershell i'm gonna cancel let's see ctrl c that's not working oh there we go let's run gulp dash dash version still not working that's so strange and it's not digitally signed let's see what the heck that means i thought we already fixed the execution policy issue i'm very surprised why this is happening but i guess we didn't now if i run go version it works there we go now it works on our terminal as well all right a lot of steps hopefully you guys are hanging in there but let's just keep on moving so now we can go ahead and create a gulp file so let's go ahead and do that clear this and let's just create a file here and we'll call it uh gulp file dot js and we're just going to create this very simple function called default task it's not going to do anything but it's going to allow us to just run a super simple test but let's save that and let's run gulp now it's saying it's using the go file so it's looking in this file it found this function called default task and it's running the default command so here you can see it's starting default then it finished default after 1.33 milliseconds super fast because there's nothing in it right very cool so that means that now it works we've got the exact same results let's go ahead and actually start creating a useful task and our task is gonna have to do a few different things so the first thing that we're going to want to do is we want to get sas set up and the reason we need to do that is so that our local node environment knows that we actually are using sas and if we go to package.json let's expand this so you can see we can see everything that's in here all right and the only dev dependency that we currently have is bulb so we're going to want to make sure that we've got sas as a dev dependency as well so let's go ahead and get that set up go to the sas website sas and we've got node package manager which is our new best friend for installing some of these dependencies now let's go ahead and install gulp sass by running this command npm install sass so this is asking us if we want to add node underscore modules which is going to be created when we add these kinds of dependencies to a git ignore a get ignore what that does is it tells um git not to track the files or folders inside of it and the reason we want to do that is because node underscore modules is going to be unique to every single machine so it really depends on the type or the version that you have installed of node it might be different when for your other developers so we want to make sure that we take that folder that is going to be a huge and heavy folder and we just add it to the git ignore what's great about vs code is it's automatically asking me if it wants to do it for me i'm going to hit yeah because why not it'll create this git ignore or this dot get ignore file and it's just adding node modules to it which is great so now we've added npm gulp sass and if we go to our package.json file and we scroll down we can see that gulp sas is set as a dependency so let's pull up a tutorial get refresh a little bit on how this works we've got gulp installed you could use the flag dash dash save dev if you want to add it as a dev dependency for me it doesn't really matter these files this package.json gulp file get ignore these are not actually going to go into our shopify theme shopify is very strict about what files and folders it allows into its themes and it's pretty much limited to the stuff that was installed at first which is these folders up here assets config layout locales sections snippets and templates all this other stuff is just for us that's why we set up github and git to track these file changes but they're not actually going to exist on our shopify store in fact the scss folder that we created and these scss files that we created are also not going to be uploaded to our actual shopify store that's why we need to make sure that when we write the command that it imports or that it creates a css file inside of this assets folder because if it's not inside of this assets folder and it's inside of this scss folder it's not actually going to be uploaded to our shopify theme which is not what we want all right so here's an example of a gulp file that uses gulp sass and they created a task here that sets the source for the scss uh files to look at and then it sets a destination so we're gonna do something very similar we're also going to do a clean task after but let's start very simply by creating a gulp task for gulp sass and i'm actually going to cheat a little bit sorry but i'm not a coding genius by any means so i'm gonna pull up a video that i looked at yesterday here on my other monitor uh that actually runs us through how to use scss in shopify uh updated for 2021 just so that i'm making sure that we're writing the correct commands here for gulp class okay so here we can see how we would run or how would we would compose these tasks let's go ahead and make this full screen and let's go into our gulp file let's delete this default task and let's first create a variable and let's set that to [Music] let's name it gulp and that's going to require this gold package that we've created next let's go ahead and add themekit as well and actually now that i think about it we actually have to install the node version of theme kit so we installed it using the basic theme kit command shopify their documentation while useful doesn't necessarily run you through how to create this uh node version of a local working environment so we're going to look that up really quickly shopify dash theme kit here we can see the npm package and we're gonna just install really quickly to our environment here that package as well okay now if we want to make sure that that worked again go into our package.json and now here we can see we've got gulp and we've got shopify theme kit and gold sas uh installed as a dependency so going back to our git ignore or her gop file excuse me let's go ahead and set a new variable here for sas and we're going to require bulb sas which we've just installed as well and now we can start to create tasks so the reason that this is helpful again is because we don't want to go and write a long command every single time that we want to compile our css file from our sas files we just want to run a super simple command like gulp sas and it'll automatically go and execute so let's go ahead and do that by creating a task and then we'll name that task sas and then inside of that we'll pipe a function and what we want to do is we want to return the source for gulp and we're going to set that to uh scss slash global scss so this is telling gulp hey we want you to use this file as the source scss is going to say cool i'm going to import custom.scss into this file and then it's going to go ahead and compile all of this good stuff next we want to tell it hey we want you to go and type that sass that you created and pipe is just kind of telling it what to do next it's kind of connecting the two commands and then we want to go ahead and type again and set a destination so gulp.dest and we're going to set the destination to the assets folder that we created again the reason being is that shopify is very strict about what files and folders it allows onto its themes and if it's not inside of one of these initial files it's just not going to work so semicolon at the end and that should hopefully work let's go ahead and run gulp sass and hopefully what happens here is again it says let me grab this destination right let me go ahead and import this custom stuff into my file and then let me go and create inside of this assets folder a custom css file so let's go ahead and run it gulp sass and now we can see that it's created this global.css file if we go inside it we can see our actual code for our header and our body from custom.scss so hopefully that makes sense to you guys if not let me know i know it can be a little overwhelming running through all these different programs and getting them to work but trust me spending a little bit of time up front is going to make it so much easier to actually do the theme development for shopify in the future uh and once you get this go file done for one project all you have to do is copy and paste it into a new project you don't have to rewrite this every single time unless you've installed a new version of gulp that just has breaking changes so now if we go and we actually look at our shopify store and we reload this the header and the body are not red right and the reason that it's not red is because this global.css file that we created hasn't actually been added here so if we click inspect i'm just going to pull this over to the side and reduce this we can go into the head and we can see all of the different files that are created in here we can see that it's pre-loading this style sheet called theme.css which if we remember is this giant 7000 line file that was created so what we want to do is we want to enqueue this file this global.css file inside of the head and the place that we're going to do that is inside of layout so layout is probably going to be the least used folder that you guys jump into but it includes the actual syntax or the html markup of all of the pages right or specifically the stuff that's not going to change so if we go into this theme.liquid file we can see here that it's got our head right if we close that we can see our head we can see our body right and it's got this html file that it's creating for all of the different pages right so let's go ahead and expand expand the head and here we should be able to find our file for css so here we can see this link or style sheet and it's loading up this theme.css file so what we want to do is right underneath that we want to go ahead and load our global.css and we can change this name if we want to uh usually it's going to be based on the name of the scss file that you've created uh so if you want to name this something like custom that's fine if you want to give it a different name entirely that's okay and it's just going to grab the asset url which is slash assets and it's going to look for this file so we can get rid of some of this other stuff um that we don't need uh we leave type but we don't need this media print or on load i don't think if we do we'll come back and we'll add it but for now let's go ahead and save that and let's go ahead and run that theme watch command and we're going to do that again with the dash dash allow live flag so now it's watching for changes to our theme let's go ahead and save this theme.liquid file you'll see that it says processing and updated let's go ahead and save this global.css file again processing and updated and now hopefully if we reload this we should see some of those changes come through and now you can see that our body is in fact red now if we come in here and we look at the header we can see why it might not be red and that's because it's using a class that is beating out the specificity uh so we'll want to instead of using header we'll want to use dot sight header instead but let's come in here and we're not going to actually change uh this css directly we're going to change this custom.scss and we're going to change header into dot sight header then we'll have to go ahead and run gulp sass that'll go ahead and compile the updated global.css file you can see here that it's changed header to dot site header and because we have our theme watch it's automatically watching for changes and it's going and it's gonna update the actual live site automatically now you can see that we've got the red in our header and if we wanted to we could come in here and we can say hey we actually want to update you know this site header mobile nav whatever to be read as well so we'll grab that class and then let's open up vs code come back into our custom.scss and we'll add here as well that additional change or that additional class that we want to change let's save it we'll run gulp sass that'll update our global.css file and theme kit is automatically watching for these changes so all we have to do at this point is reload our site and we should see everything in red so that's not working why is that some css troubleshooting for now did i miss something here let's test to see if we add this style to the inspector style sheet by creating plus new style rule that it will actually work so it should work let's see what happens here we've got this global.css file site header mobile nav should be working for whatever reason it's not looking at this global.css i'm going to cancel this and theme watch one more time run gulp sass once more and let's see if that fixes it for us and there we go for whatever reason it stopped watching uh but now you can see that everything is red so let's move on to the next step which is again i try to automate as much of this stuff as possible when we're developing which means that i don't actually want to come in here and run gulp sass and i don't want to come in here and run um theme watch every single time that i want to come and make a change so we're going to actually create a an additional task here in our gulp file and we want this task to watch to see if we make any changes to any of our sas files if we make a change to our sas file we want it to automatically run gulp sass and at the same time i'd like for it to automatically run theme watch dash dash allow dash live and what that's going to do is it's going to take all of this and instead of running two different commands manually it's going to allow us to run one command watch for changes and automatically push things up as we're developing so that we can go and start making changes much more quickly without having to actually come in and you know run all of this stuff manually so let's go ahead and let's run let's create a new task so gulp.task and this is going to be called watch inside of that we'll pipe a function and if you need this code again i'll make this repository public you can go ahead and you can download it uh from github i'll put the link in the comments once we're done and inside of the description for this video if you're watching it after the fact so you can just download it but of course feel free to pause the video and go ahead and type this stuff out if you need to so inside we're going to do gulp.watch and we're going to tell it what files we wanted to look at for changes and of course we want it to look at files inside of this scss folder so we'll go ahead and type in scss slash star star and this is telling it to look inside of any folders or subfolders inside of that parent folder so any folders inside of this it'll go ahead and it'll watch in my case we don't need to do this because we don't have any folders but if you go and actually bring things in and start doing subfolders remember to do star star instead of just star but since we have just two files right now and we pretty much only needed to look at these we'll go ahead and leave it at slash star dot scss then we'll go ahead and tell it to run sas inside once it sees a change so it's looking for a change inside of this folder if you see a change go ahead and run sas next we want to go ahead and run a themekit command so we'll do themekit which we declared up here remember and we'll want to run a command to go ahead and watch themekit as well so next we'll have to declare the environment and the way that we can do that is by looking inside of our config file and if we go into oh is it config let's see here our config.yaml and here you can see what environment you have set up it should be development uh if you've been following us so far um but come into this config.yaml and you'll be able to actually see for sure so here we've got this environment and we'll go ahead and set it to set it to development all right so now let's go ahead and test this out we'll run let me go to powershell let me stop that and let's run go yeah gulp watch so we've got this error that we need to go ahead and fix and this is for this theme kit command called watch says cannot make changes to a live right we know that so we'll want to do uh dash dash allowed allow dash live save it and try that one more time gulp watch so this is not working which totally sucks so let's look at the documentation for this shopify theme kit let's see what we can fix here oh looks like it takes this parameter called flag object which is a flat which includes flags for the theme kit command so here we can see how this would go uh we can pass in a string for the command which is watch and then with separated by a comma we can pass in a flag object so let's go ahead and try it that way identifier is expected let's see what it means it's not expecting a string let's try it like that oh you know what it was dot instead of comma okay so let's try that one more time gulp what all right unknown flag dash dash zero hmm what does it mean by that let's try just allow live this is the part of development where persistence really pays off um let's see if we can find documentation that covers this stuff specifically and we have this open let's go into the actual documentation here hmm so this is supposed to be an object all flags specified in the theme kit documentation are available but in camel case rather than in flag forum [Music] okay so let's try that again and we're just gonna do this in camel case so allow live so camo case if you're not sure what that is is the first word is lowercase and then the second word as a capital to start so let's try that again and let's see if that works go up watch nope still an issue let's try to pass it not as a string because we're supposed to pass it as an object now i'm i'm actually looking at this and i think that we might have an issue here with how this is written let's see no that should be okay watch now it's saying allow live is not defined let's see ah so we have to set it to true and we might have to put this inside of some brackets as well let's take a look here and now live through watch missing at least it's a different error right guys missing this after argument why though what if we passed it down here kind of the way the documentation does it here see how it has environment development that means that we should be able to pass a flag right on top of that save it watch okay still see what we're doing wrong oh we accidentally deleted a comma here one more time scope watch it works all right we did it so here we're passing in a command a themekit command called watch and we're passing in some uh specific settings we have allow live set to true and then the environment set up so in theory now if we come into our custom.scss and we change this variable or we create a new variable let's say that maybe the client didn't want their website all in red i wonder why they wanted it in green so now we can go ahead and do color green and let's go ahead and set that to green and we'll go ahead and change this variable from color red over to color green and let's save it so now it's automatically looking to see for the change it's compiling our global.css file and it's seeing that that changed and pushing it up to our environment so if we go and we refresh our website is now green instead of red so we've successfully set up git to track our changes we've successfully set up gulp to manage our tasks we've successfully set up scss to create um our custom css file and now we can go and start actually customizing our theme in a non-destructive way meaning we don't have to go into the shopify editor and we don't have to just start changing things without being able to make any changes or without being able to track our changes excuse me so there's one more thing that i want to do and that is to minify our css file because if we come in here and we look at the head look at the head let's look at this theme file open a new tab you can see that it's not minified which is so strange because it makes the file much larger than it has to be if we're going to be loading up a second css file ideally we would have that at least be minified so let's see here let's look for our global dot css here we go that's all of our code let's go ahead and let's create a new gulp task very quickly that will go ahead and manage that minification process for us let's go back into our gulp file and let's install a new a new gulp dependency to actually minify this stuff for us so let's pull up between css and let's go ahead and install this i'm going to go ahead and stop this gulp watch task and we're going to go ahead and run npm install gulp clean css that's going to go ahead and install it add it to our package.json you can see that right here now let's go ahead and include that as a variable inside of our gulp file so clean and will require that package which was gulp clean css very cool save that now let's go ahead and let's create a task that'll minify this for us or actually what we want to do is take the sas test that's already running and then we're going to take this actual um command and right after we compile sas we'll want to go ahead and type that to a new command and we're just going to want to run clean and then you can optionally throw in some flags here we're gonna throw in a compatibility flag and we're just gonna make sure that it is compatible with uh internet explorer 11. um don't know who the heck is still using internet explorer 11 but we want to make sure that the code that we create is um you know backwards compatible so let's go ahead and let's look at our global css and let's run that gulp watch command one more time that's going to go ahead and look for changes let's go ahead and just make a super quick change here to our custom oh and let's say that client didn't like green so we're gonna try blue we're gonna go ahead and change this from green to blue save it that should go ahead and compile the new code and now you can see that it's all on one line this is how it was before and this is how it is now so we've taken out all the white space and we've reduced the file size substantially so it went ahead and made that update it minified it for us and it automatically updated it to our website so if we refresh it now we can see that our website is blue instead of green so that is pretty much all we had to do to be able to get this kind of local development workflow started i'm gonna go ahead and revert this color uh because it's terrible right now uh so we'll go into our custom.scss and we'll just kind of comment this out for now and we should see our website return to normal i'm going to go ahead and remove this change as well and we're going to commit all of our work so far all right so the change here we did to index.liquid and remove this stuff we're going to save it it'll again look for changes and push it up if we refresh now we're back to where we started okay so we've gone and we've set up git so let's go ahead and use it i'm gonna stop watching it i'm gonna do git status here you can see all of the different files that we've changed since our last commit right so let's go ahead and create a commit message so let's do git add and then we'll add a message all in one line and we'll say um added gulp added sass and used bulb to watch for changes in that's fine fatal could not open i might have made a mistake there on the commands get add message wow is that really not something that comes with git i guess i must have gotten used to it from having my own custom config files uh for now let's not worry about that that's just an extra layer of complication let's git add run git status again all these files have been added and let's git commit and let's again copy that commit added sas and use gulp to watch for changes let's go ahead and push that up let's go ahead and look at our repository let's go ahead and reload that and here you can see all of our commits we created our readme file we added all the initial theme files for debut theme and now we've added sas and used gulp to watch for changes so i'm going to take a quick bathroom break i'll be right back and when we come back we're going to actually come in here and we're going to create our own custom section so we looked at some of the sections that are already here that your theme already comes with let's go ahead and get a refresher really quickly go to themes go to customize and here we've got all these different sections so let's go ahead and let's create our own section so if we wanted to click add section it would come out here i'm not really sure how to do this i'll be completely honest but that's what we're here to do right we're here to learn and we're here to figure out uh some of these uh intricacies of shopify theme development so if you've got any questions so far definitely let me know see i'm not sure what kind of pattern we should go with let's see what is missing here gallery feature collection it's a great part about themes right it's it's got so many things already there for you you know what before we create our own um section we're actually going to try to extend an existing section and i think that that would be a good starting point before we go and create something totally custom so let's see let's look at our blog posts really quickly so we don't have blog posts but it's showing up like we do that's interesting your post title your post let's create a blog post for now that's blog posts let's grab some lorem ipsum and i like using the bob ross lorem ipsum because it's so wholesome now we've got all this placeholder text paste that in let's add a featured image we're going to uh use unsplash which you know i need to stop using if we're being 100 honest because they were just acquired by getty images um and i am just not a fan of their business practice uh interesting story when i was first starting out as a web designer and developer i had just kind of grabbed a random image from the internet not really understanding image licensing and put it on a client website and the client a few months later received an email saying hey you're not you're not allowed to use this image you don't have an active license so you either need to um pay us for damages and it was an exorbitant some like three thousand dollars uh or we're going to sue you guys uh so that came as a huge shock after that i learned that getty images has software that crawls websites to check for unlicensed images that they own and then they automatically have those kinds of letters go out and shake people down for money which i just thought was ridiculous so ever since then you know i try never to use getty images for anything and i always try to have image licenses for everything unsplash it's still uh license free photos so it's not a big deal but you know generally i try to stay away from anything that they own so this is telling me that this image exceeds the sizing requirements so we're just going to open this up in photoshop you can do this in any program that you feel comfortable with they also have online ways to resize this if you don't have photoshop resize image online is a good thing to search and then you can go and use either adobe's online image resizer or one of these other ones that are totally free to use but i've got photoshop so i'm just going to come into photoshop i'm going to do control alt i and that's going to open up the image size um settings and we're just going to reduce this to a reasonable size let's say 2400 2400 by 1600 let's save that and that's 2.4 megabytes which is less than 20. exactly what we need now we can go ahead and exit that and we'll go ahead and we'll add it here very cool so obviously you'd want to come in here and actually edit your website seo add an excerpt so that it's not just grabbing the first 100 characters or so i'm going to set the visibility to visible which is the same as publishing it we're going to save it so the reason we're doing this is i want to know whether or not it will display an image i'm going to save this that has our blog post we're going to refresh our website scroll all the way to the bottom and it does have an image so let's see what we can we can show the author we can show a view all button we can even change how many posts to show so again i'm gonna go and take that bathroom break i'll be right back and then we'll see how we can edit one of these uh sections to kind of customize it on our theme all right guys thanks for your patience there let's jump right back into this so we left off having looked at our blog posts we were essentially going to work on customizing a pattern so let's see what we can do here let's look for let's say this um this code for this specific blog post pattern um and this is one of the real benefits of using this um local development environment as opposed to using the built-in editor because if you use the built-in editor i'll show you exactly what some of the limitation is in my opinion go to customize go to [Music] game actions edit code so if we go and we search for blog posts nothing comes out because it's only searching for the theme name so if we wanted to go and actually edit that um section we'd have to go to sections and we'd have to go and find it somewhere here um and potentially it would be this one but i'm not exactly sure i'd have to manually come down here and look to see what the name is in english blog pages blog posts so it's probably not that one but it could be i'm just not sure but ideally if we're using this kind of environment we could just do command or ctrl shift f or command shift f if you're on mac and search for blog posts and this will automatically come in here and say hey we are looking for the featured blog pattern or section excuse me so the way that we can test this very easily is again we'll run gulp watch that's going to run all those tasks that we wrote that's looking for changes automatically using themekit and if we come in here and we delete all of this i can go ahead and create an h1 that just says this is the right section i'll close that h1 save it it'll go ahead and push that up and now if we reload our theme here just reload that front end all the way down yep this is the right section so again that's one of those limitations of using this built-in editor i'm not a big fan of it that's why i really wanted to come and sit down and and figure out this local development workflow so that i can just focus on development um in a much more rapid and iterative way so one of the things that i really love to do is to add liquid support to vs code um just because i hate that there's no syntax highlighting it's actually driving me insane so let's see if that's something that we can install syntax highlighting and formatting for liquid they also have shopify liquid snippets which is great they even have a linter which is very cool it'll check for any errors so let's start with just syntax highlighting let's install that to our vs code come back in here and now we actually have syntax highlighting hallelujah so now this is actually much more readable for me i can actually see what's going on and let's take a look at this what what is this ooh snippets i actually would love to use this um again i'm very lazy when it comes to development if i can get away with not having to write all of this stuff out every single time i will take it every single time so let's go ahead and get that installed all right and i'll be honest it's a little overwhelming looking at all this code so let's make a super simple change and let's see what happens i'm gonna refresh this it'll give us back our blog post so let's say this client only has one blog post right but we've got all this empty space which just really sucks so how could we make it so that instead of having three columns by default we just have one very large column instead let's go and try to figure this out so if we come into this feature dash blog dot liquid file and we scroll all the way down we can see that it has some settings that are being passed in using the schema tag via json which if you're not familiar with json it's just a way to store data in these hashes and one of the things that is being passed here is this range called post underscore limit and you can see here that the minimum is one is three and we want it to be one we also want the step to go to one we can leave the default at three let's go ahead and save that and let's go into our editor and actually refresh here so now you'll see that we can actually go down to one instead of three let's go ahead and save that and what i'm trying to look at is what changes in the actual html so that we can write some css for it so let's scroll and here you can see that it's it has this class called medium up one third and if we come and we look we can see that it has this css for with 33.33 if we untick that we can see that it gets changed and it goes to full width which is what we want right so let's go ahead and let's make this small change inside of our actual theme code by creating a new class so what we're gonna want to do is instead of medium dash up dash dash one third we're gonna want this to have a class of medium dash up and if you're not sure what i did there i opened up the inspector i clicked element classes and then i unticked this class that it had then i wrote the first part of it and it said hey these are all of the classes that you already have in place so that you don't have to write your own css for you can just pick one of these which is super super handy so i'm going to come in here and i'm going to say we actually want one hole so again we can un unclick that we can put one third but we want it to be one whole and then if we come in here and we change it to two what we want to happen at that point and i'll refresh the page so we can start this process over again we're going to inspect we're going to go into the parent container do this one third uncheck it and now medium up and let's do one half right one half so let's do that let's get it to the point where instead of having just three blog posts as the default you can have one two or three as a customization so what we're gonna do here is we're going to go back into our blog posts and hopefully they give us a duplicate option more actions wow there's no duplicate option on here what a bummer okay well let's see if if we edit this blog post if there's a duplicate option nope there isn't so we will just have to go ahead and do it ourselves so i'm going to change this to test blog post one save it go back add a new blog post that's blog post two we'll get some more bob ross lipsome or lorem ipsum copy that paste it in let's grab another photo from unsplash this one the sponsored image let's grab this one mailchimp has some great images all right now we're probably gonna have to go through the process of resizing them if we look at the size here they look like they'll be okay just drop it in okay yeah so they're too large so let's go through and resize them and go and open up photoshop to do that again you can do it online to search for resize images online but we've got the creative suite so why not use it all right let's go ahead and resize that same size as the other one 2400 1600 save close open the other one resize ctrl alt i or command alt i on mac 2400 by 1600 save and generally i recommend you guys try to keep the same size when you guys are creating blog post images just so that it's consistent throughout i'm not sure if shopify will automatically resize it for you but as a general you know rule of thumb same size blog post images or featured images are ideal and the 16x9 ratio is also ideal because that's what most social media platforms use right so let's go ahead and close that drop in our image again that works save it now we've got r2 go back and we'll we'll hold off on doing three because i want to see exactly what it looks like if we don't do this customization so let's go ahead and reload this and it's only loading one which is cool but let's try here so it's actually trying to load all three of them for some reason oh you know what happened sorry about that guys this is set to hidden i was supposed to set this to visible oh don't discard it save all right let's try refreshing that one more time there we go so we've got our two blog posts and now let's get it to the point where we can actually come in here and change it from three columns down to two or one and actually have the css change for us so change it from two to one it actually will load just the one or the two um but it doesn't change the css so let's go in and let's make these changes in our theme code oh let's go up well let me see what's in here yeah we don't need any of that schema stuff let's see all right so here we can see where the code exists and by default there is no logic here it will just say hey you have to use one third there's no way around it and what we want to do is we want to come in here and see if it's equal to one and then we want to show one whole and then if it's equal to two and then we want to show one half so very new to liquid in general i have used liquid in the past specifically for jekyll websites but in terms of creating this kind of logic it's a little bit new to me so what i like to do is i like to just come in here and create a comment um and you can use an html comment or apparently you can use a liquid comment and if you're not sure how to do that it would comment and it'll show you how to add anything so here if we put it in between this comment and end comment tags it'll go ahead and turn it into a comment so let's do that and just get used to writing liquid luckily we've got our syntax highlighter and we should have this other thing that we set up which allows us to just write and comment and it'll go and handle the rest for us which is great so what do we want this to do we want to check if if columns equal to one then change class to medium up one whole and then if columns is equal to two then change class to medium up one half else class space medium up one third okay so that's pretty much what we want to go ahead and check so let's see how we would do this if else conditional in liquid control flow that sounds right they've got else if else which is great so if the column is equal to 1 do this else if column is equal to two do this else do that that's perfect this is exactly what we want to do so let's go ahead and just write down the skeleton for this do if and we can just do if else white space so if condition else condition oh i don't think we need the white space there we go all right so now let's look for the condition that we need to be true and what we probably need to do is look for this section settings and then instead of is it post limit let's go take a look over here posts just inspect this real quick i'm not sure yeah it doesn't actually say so let's go into uh our code and if we come down here we should be able to see what it was that we changed here yeah post limit so here we have the id right it's a range that's what we changed right if we come back here we can see that this is a range from 1 to 12 and the id is called post underscore limit we're going to copy that we're just going to come in here and we're going to say if section settings post limit let's go back look at our syntax or our actual documentation is equal equal to so equal is setting it equal to something equal equal to is going to return true or false excuse me so it's going to check to see if this is true if it's true it's going to do that if it's false it's going to move on if this the second conditional is true it's going to do this if it's false it's going to move on and then it's just going to do that so pretty straightforward if else is very common in programming languages so very similar so if settings post limit is equal to one then we're gonna go ahead and i'm just gonna return an h1 for now um we'll write our code correctly in just a second i just want to make sure that it works uh post limit is one very cool else and we don't want else right we want else if else if and in this case there's no e at the end so just making a note of that we're going to create another one right on top of this and it's going to be elstiff just make sure that got the right spacing here else if section dot settings dot host limit is equal to two now we can say that this post limit is two else post limit is three plus go ahead and save that one over terminal we still have this watch command running which is super handy that means we don't have to push anything we can just come in here look at our store refresh this and now it says hey the post limit is two the post limit is two very cool so now let's actually get this turned into some useful code and what we're going to do is we're actually going to replace this like class here yeah we're going to grab this li class and indent this properly we're not animals and now we're going to say hey if it's one then what i want you to do is do one hole right looking at our comment up here we can see that that should be done next if the limit is two then we want it to be one half and if the limit is three or more then we can go ahead and use the original code so again here's the comment that we made this comment just explains our thinking here if the columns equal to one then let's change the class if the column is equal to two then we can change the class else if the column is equal to three then we can change the class this is not the best way to do it we're going to refactor it in just a second but this should be enough to test to see if it works so let's go ahead and save it i'm gonna go ahead and update there we go now let's go ahead and reload this and see what's up now we can see that it's set to two we've got our two columns in place super cool let's go ahead refresh our customizer here and let's change it to one very cool now it's set to one looks like i put in an extra opening bracket somewhere in there so let's just go and find it [Music] where's that did i did i put an opening bracket somewhere oh here it is oh right at the top there we go save it go ahead and reload that yeah go ahead and reload it okay so now we can go and set it to one set of two we can set it to three very cool we don't have a third obviously uh so that's fine we can set it to two which looks really nice for our needs and this is a customization that our theme couldn't do before that now it's able to do there's a little there's another thing that i'd like to do which is see if we can increase that size of that image with it set to one so let's go ahead and save it and see what we've got here and what our options are so this is where writing some custom code is going to come in handy so we're going to just write some custom code out here to test and then we'll go ahead and we'll add that in in just a second you can see that it's actually adding its own style here for its max width let's see what's going on in the code that's adding that search for style got our image style here but i'm not seeing any with i see height right but i don't see any width here the height is set to 345. let's see what we can do with some custom css let's see let's grab this class and let's see if we say um if we see this class let's just set the width to 100 and let's set that to important what happens and then let's unset max width and we've got the same issue here on the image so let's grab one of these classes in this case i want to grab this article grade image class let's go ahead and say that this is also set to width 100 percent and max width is sunset and now we've got this weird-looking image uh now we can go ahead and set the height to auto or both the container and the image let's see why that's not working grab that scroll down because it's we've got a max height let's try max height here right right take a look at that again article that's not even showing up oh it is it's down here but it's not not working even though it's got important a little strange let's figure out why that is that it's a 500 pixels so it does work i'll set that to unsaid then and let's just unset the max height i think that auto if i remember correctly auto is not actually something you can set to set for this there we go so without with without with now there is going to be an issue here and the issue is that we are applying this to any class that has uh or any pattern that has this class and we want to specify a little bit better here so let's go and actually say that this code should really only affect grid items that have a class of one whole we're gonna do that by just adding it right in front there we go and this code it's all the same right yeah this code is exactly the same so what we'll do is copy this leave that or just do a comma and apply it there that works so let's go ahead and get this written in sas we've got this as a good starting point but now let's go into our custom.css we'll delete all this other stuff that we had i'll paste in what we've got so the cool thing about sas is that we can actually save some space here and the way that we'll do that is by nesting some of this stuff so i'm going to rewrite it using the grid item medium one whole and then inside of that i want to go ahead and target these the wrapper and i want to target the image and the code that i want to execute is to unset the max width set that to important and the max height set that to important so i don't think we need with 100 i could be wrong but let's go ahead and save that let's look at our global css and if you need to read this in a way that's not condensed like this there's an extension that you can use called beautify and i can do ctrl shift p or command shift p on mac and i can beautify the file to read it a little bit more cleanly i use this sometimes just to make sure that everything looks okay and yep this is exactly the code that we wrote but we wrote it in scss there we go so it looks a little bit nicer and easier to maintain so now if we refresh this i'm going to do this in a new tab so we don't lose it now we can see we've got our full width image very cool but we still need some code for when it is two columns because if we go and we set it to two columns actually if it's two columns it works it just works so the code that we needed to customize was really just for one column but now we can have one blog post two blog posts or three blog posts instead of just the one very cool so i'm pretty happy with that let's go ahead and commit this work i'm just going to create a new terminal i'm gonna do get status this is all the code that we changed i'm going to do git add let's actually delete some of some of these comments that we had because we you i use comments to essentially tell me how to write some of the code so i can get it out of my head and onto some actual um like a a solid way of approaching it but we don't need this anymore so we'll go ahead and delete it now we can still optimize this if we want to and the way that we could do this is instead of loading in this li three different times we can actually just have the li where it was and inside of this we can actually just put uh some sort of variable right that will handle this actual class so let's do that because i want to learn a little bit more about liquid variables and we still have a little bit more time before i got to jump off the screen and jump onto a client call so i think it'll be really interesting to learn how to do this the right way so let's do liquid variables let's look at how to do it one second guys my coffee got cold because my my cup died all right so there's two things that are essentially two different out tags are they tags i'm not sure what they're called yeah there's two types of tags it looks like there's one that has logic which is this curly bra a bracket and then this percentage sign and there's one that outputs things and that's just the double curly bracket so we're going to assign a variable based on the logic and then we're going to just output that variable so let's come in here and what we're going to do is instead of having this we're going to go ahead and do a curly assign and we're going to call this variable post and let me make sure because there are naming conventions when it comes to variables so they use underscores okay i just want to follow the conventions keep my code as clean as possible so we're going to call this post column class and we're going to assign a value of this we're going to call it oh next let's do that again for this one and we're going to call it half we're going to do it one more time for this other one and we're going to call it third so now instead of having all of this all of these lies coming out we're just going to assign a different variable to it and then inside of here we're going to output that variable right here at the very end one dash variable post column class so let's see if that works i've never done this before but in theory according to the documentation that should work just make sure that this is still watching for changes yes it is so now if we refresh this and we inspect it we can see that it is actually passing this in and if we're not sure if we actually changed anything we can break it we can do one two three just to make sure it's actually outputting this stuff go and refresh this guy and it should break all of our styles that we wrote yep one one which is not what we want we want one whole so let's revert that okay and now we've essentially customized this guy to be able to take one two or more columns very cool so let's go into powershell and get status let's get add all of our work you get commits customized featured blog section to be able to use one or more columns now we can go ahead and get push or master and we've got a new commit that should be coming through here very cool all right i've got only about 20 minutes left but i think it would still be really helpful to kind of dive in and try to make a brand new block so let's go ahead and or a brand new section excuse me so let's go ahead and do that um now if you come into your back end editor you go to your themes and you can obviously come and customize whoops sorry you can come and customize your theme go to theme actions edit code so many steps but if you wanted to come into sections and add a new section and you click add a new section you can go ahead and name it and it'll give you naming conventions automatically um so we're going to do this just to see how it works create a new section and what do we call this um let's just call this um test because this is just a test now this will automatically create a schema markup or a markup for it now you can see the naming convention is test.liquid and then you've got all this other stuff in it so i'm going to do the same thing i'm going to go ahead and just copy and paste this delete the file and we're going to do it here inside of sections a new file i do test dot liquid and we're gonna see how this is structured it's got its html then it's got its schema and we don't need to pass in any style sheet or javascript stuff so section name we'll call it a test section and for settings we'll leave it blank for now and let's just go ahead and add an h1 tag here go ahead and save it again that pushed up to our theme let's go into our backend refresh there now if we click add section we should be able to see a test section somewhere and we're not seeing it which means that we must have missed something here let's go and see if there are some settings that we're supposed to pass us into let's go and put this in text it looks like we have to add it to a section here you can see settings i'm not exactly sure so we're gonna look up some documentation if you guys ever get stuck developing themes definitely definitely spend some time just looking looking at the documentation it's really going to help you guys out so we've done this looks like we do have to pass in some settings here they're passing in two different types text box text or text and rich text and what we want to do is we want to create a dynamic section so there are static sections which is i guess what we created which you would have to actually go ahead and add to your template by calling the section we want to create a dynamic section meaning it's added to this section or this theme editor which is a little bit different i guess but let's see to make a dynamic section we need to add presets to the section file presets will determine how the section appears in the theme editor and it must have a name and a category okay well ours doesn't have a category it has a name but it has no category let me go ahead and just switch myself over really quick you guys can read the documentation once these presets are added the sections will automatically be available to the index page they're not included in the base file when you click add new sections on the theme matter but adding them manually so presets is what we need you know excuse me in order to get it to show up so let's go ahead and just copy and paste this stuff that's liquid we've got settings just make sure is this inside of settings settings is presets we'll call this test section create a new category called test category let's save that it'll push it up let's refresh let's take a look add section we've got our test category and our test section if we click test section now we can see our h1 and again i've got an extra character added somewhere silly mistakes i know but it happens to the best of us right here at the bottom so now we've got our test section you can select it but it has no content or settings let's go ahead and make a couple of different changes here that'll allow us to override how it appears so there's two things i guess that i would want to do here for this h1 and obviously they already have text sections so this is you know you should use the the section that already exists in your theme before trying to create something new but since we're short on time let's go ahead and see what we can get done um we'll want to pass in two things the first i'd like to be able to control is the color of the text and the second thing i'd like to be able to control is the alignment so left alignment center alignment or right align so let's see how we would do that um again let's come into here and here we have our settings and we can go ahead and pass in these different things here we've got these types so let's look up liquid setting types let's see what we can find here they do have a type of color there we go these are the different types basic input setting types that we can use text text areas radio select checkbox range and number what about color oh so there are specialized input setting types very cool so there's color font picker collection products blog page link list url video url rich text html article and image figure so ours is pretty straightforward we want color so let's go ahead and copy this little hash and we'll add this in doing a lot of copying because i just don't have the experience to write this off the cuff over time the more you do this i'm sure you'll get better and better knowing what to put okay let's give this an id so this is going to be color we'll call this test color and for default we're just gonna go go weird next we're going to do this one more time but we're going to do it with alignment let's do this one more time we'll call this test line drop down alignment and default will be left save that push it up look at her back i'll save it section has no content or set why i pipe some settings in for you here i break something invalid schema setting with id test color default must be a css color this has to be a css color sli id is not a valid attribute these are not valid attributes is drop down not valid oh it's supposed to be select not drop down little things like that'll really mess you up try to save okay now at least there's only one invalid schema setting with id test line options is wired oh i see options because they're supposed to be more than one duh okay let's go to select and let's look at these documentation we have to pass in options for it to for them to pick got it type id label and then options for that does it select there we go i have an example we don't have to put group i guess which is good because i don't want to put i have no idea what i mean we'll just do value all right now we'll we're gonna do three there's three right there's left left center correct save that invalid json tag and schema doesn't really tell me a whole lot about wear though come on now invalid jsonic what do you mean see this example let's see if it has to do with this code that we just wrote or not you know what let's get rid of all let's see if we're able to just push this one up yeah the the issue is definitely in this code here i just wish it told me where i like all right i'm gonna go ahead and lint this put a json lint online i'm gonna run this through the json validator i'm gonna try to validate this all right error on line one what oh don't worry about that not json dude out of djson no you're good that's fine just want this json ballot all right line 26 for presets there's presets why because there's a curly brace right here oh because there's comma i love djs is it one comma really it would be there we go yeah so unfortunately the stack trace is terrible when it comes to some of these shopify errors so if you get stuck like that and it's telling you there's a json error you're not sure where you're going to want to lint your json you can go to jsonlink.com just drop in that json hash which is just this hash of data and it's going to tell you where the error is exactly you can probably do this through vs code but i know that this is a free and easy tool to use so that's what we went with all right so let's go ahead refresh this and hopefully we should see our settings now for our block now we can see our color and our alignment we've got our default set so let's go ahead and override these i want the text to be red and i want the alignment to be centered but nothing happens and that's because there's just no css code that we've written to go ahead and handle that so let's go ahead and change it a little bit we should be able to do that here in this style sheet section so let's go ahead and make that change now we're going to do a couple of other things just because i don't want to target every h1 on the page we're going to go ahead and we're going to create a div we're going to call this um a test section i'm going to put our h1 inside of that div and that will allow us to be a little bit more specific when we select that h1 so let's actually go and let's create that section for the style sheet down here and now we can go ahead and say or test section or give anything with a class of test section and the h1 inside of it we want to set the color equal to the setting here let's see how we would do i'm thinking it would be section dot settings settings are setting headings dot tests color that could be totally wrong but we're gonna try go ahead and take a look here refresh inspect a little bit here see if they talk about styling here i mean we're doing it it's just not working why is that let's try it a different way which is not what i want to do but i want to make sure that we can get this to work right now let me make sure i don't need to type in important just to double make sure but if we come in here and we say test section h1 color red or rebecca purple it does change so it's just not actually passing in this style sheet stuff let's make a quick change here section dot settings dot test i'm gonna delete this for now come back to this and comment it out i'll just delete it let's come into the actual h1 and we can do style equals color and just add that that doesn't seem like it's going to work according to the highlighting skit that's not good let's refresh and take a look oh it actually worked that's so hacky though not a fan of that at all all right well let's see if there's any alignment classes that we can add to this thing yeah align dash dash center we'll center let's do that really quick line dash dash but are there other ones one second there's middle right and middle left but we can just go ahead and do text line and we'll do the same hacky thing for now test let's align save it refresh and hopefully now it's red and centered here we go yeah not super clean obviously you'd want to get this done in the style sheet or you'd want to apply a class to it instead of having it just in line here based on on what that is but for now you know i think that's good enough we essentially came in and we went from not having a shopify account to setting up a shopify partners account uh we went and set up a theme kit so that we can actually develop locally on our computer and push up to a shopify environment uh then we set up git and we actually got it to the point where we can go and we can commit our work which i'm gonna do right now and then we actually installed sas on our project and then used gulp to go ahead and create tasks to watch for changes in that those sas files compile it into css and then actually push that up automatically to theme kit so that our local development environment is streamlined and super easy for us to use all that's left to do now is go ahead and commit our work and wrap up for the day so hit commit dash m we're gonna do added a test section with inline styles all right go and check that our commit went through now we can see all the work that we've done on our theme and we're in a good place to go ahead and pass this off to a developer if they want to help us work on it or we can just pick this up another day and get it to the point where we're comfortable pushing it up to our own web store or over to a client's web store so if you're still here thank you so much i really appreciate you guys hanging out with me today i know that it was a lot to take in uh but i think we got a lot done given you know where we started uh if you guys have any questions whatsoever let me know in the comments below i'd be happy to go ahead and get those answered for you uh if you guys like content like this please drop me a like it really helps out the channel a lot uh really consider subscribing i'm really trying to get to the point where we have at least 100 subscribers uh we're only i think 25 away which is really really exciting um and yeah this recording is going to be up for about 72 hours before it gets pushed over to our private patreon channel if you want to support this kind of content you want to continue to learn with me consider checking out my patreon at i think it's patreon.com ux hacks and all you'd have to do is commit you know a couple of dollars a month and you'll be able to get access to these full live streams and the ability to recommend uh content for a future live stream so if you're interested in learning design you're interested in learning development you're interested in learning ux and how to build websites that actually convert traffic then you know definitely give me a follow check me out on instagram and i'll see you next time cheers you

Channel: David Martin - UXHACKS

Views: 12,633

Keywords: UX, Web Design, Website, ecommerce business, gulp, how to make an ecommerce website, how to set up shopify store 2021, how to start an ecommerce business, how to start an online store, shopify, shopify 2021, shopify store, shopify store design, shopify theme development, shopify themes, shopify tips, shopify tutorial, shopify tutorial for beginners, shopify tutorials 2021, shopify website design

Id: 3aMvc2z5CcY

Length: 186min 30sec (11190 seconds)

Published: Fri Apr 16 2021