how to build a shopify theme from scratch

hey everyone jan here codingwithyan.com,building themes in 2022 and beyond a,brand hot topic especially since the,theme store reopened for new submissions,and we've already been covering quite a,bit throughout the last few interviews,with liam we've been talking about how,to come up with a concept how to compete,with existing themes,earning potentials the theme store,requirements how to pass the review,process and so on and so forth so if you,haven't seen these episodes yet i highly,recommend you check them out because,there's like so much good information in,there,but i also know you guys,you don't want to be sitting here all,day long and just brainstorm you want to,go out there and build things right so,that's exactly what we're going to be,talking about today we will ask liam,about the specific tools we need and how,to practically get started that will,make the whole series a lot more,complete,so then let's have a look alright liam,it's great to have you back one more,time um so how are you doing today,i'm great jan thanks for having me here,today always a honor and a pleasure to,be chatting with you and your audience,uh we've actually been working,internally on a lot of,interesting tools and resources so i'm,sure,team developers will be very excited to,see what we are releasing in the next,few months but uh otherwise,uh doing good i've been using actually a,lot of the tools that we'll be talking,in this video today so i have some,first-hand experience and insights to,share,and uh yeah just excited and happy to be,talking about building themes with you,today,awesome that sounds great um yeah so,then let's just cut the chase liam what,tools do i need to get started with,building themes from scratch,sure so the main tools that you will,want when you're setting up a,development environment that is suitable,for building themes as opposed to,customizing themes,would include,firstly a,development store that is associated,with your partner account,these are free to create and they act as,really great sandboxes that you can use,for,sending information to a store or,also downloading theme information or,store data from,and uh again totally free to create so,do uh feel free to create those uh,secondly uh you will need to be working,with a text editor on your local,computer so a program like vs code or,sublime,will let you edit the theme files so you,can edit the,liquid files javascript files css files,json files you'll be able to edit all of,those on your local computer with a text,editor of your choice,thirdly,you will likely want to work with the,shopify cli which allows you to transfer,information to and from your linked,development store,as well as generate a,what we call a development theme which,runs locally on your computer,and we'll be talking a little bit more,about that in this video,and uh fourthly and finally you will,likely want to work with the shopify,github integration which essentially,allows you to create,a version control,management system when you are,making changes to a theme when you are,maybe reviewing changes before they're,merged into the main theme,so essentially it just creates a,connection between a shopify store and a,github repo and you can,learn all about these different tools on,our developer docs as well so if you go,to shopify.dev forward slash themes,forward slash tools you'll learn all,about these tools and also more,resources which are available too,okay great um yeah that's pretty,straightforward so you said development,store,um cli a local code editor and then also,the github integration,um but maybe for someone who's like,completely new to this to a complete,beginner um would you also like to touch,a bit on,the advantages of a local development,environment,instead of using the shopify code editor,maybe,sure so um there's definitely a few,different advantages,based on the different,resources or tools that you're using,especially when you start using a,text editor you have a lot more control,over the environment that you're working,in,you can make visual changes so things,like um changing like the color scheme,of the editor to make it a little bit,easier on your eyes always welcome when,you're spending a lot of time looking at,code,but then you can also,start implementing different extensions,which are available to,the text editors so a lot of developers,may use extensions like ms which allows,you to populate,and generate code snippets very very,easily,also being able to wrap,components and specific,element tags as well so these are things,that speed up the development process uh,for developers um and also specifically,with vs code as a text editor um you'll,if you use this you'll have access to,the liquid extension which includes,syntax highlighting which makes it um,easier to work with theme files because,uh just the the liquid,objects and variables you know stand out,much more with you know a very intuitive,color scheme,also,you're able to use theme check,which is included in in the cli but you,can also access it through vas code so,this means when you're building out your,theme,as you're writing the code you can,highlight specific,issues or potential problems,that,you might be encountering and so it just,allows you to follow best practices,while you're actually in the editor,before you do any testing so it just,highlights those early on which is,really cool,um another advantage,uh away from like the text editor and,more around like the local development,environment is that it uh it speeds up,your development in a few different ways,one of those is,that um you have very fast reloading so,when you have a local theme,running on your browser um you're able,to make changes to the,code of that theme and you'll see those,changes populate across to the browser,automatically,so you don't need to,um,wait or you don't need to reload the,page like you actually see those,changes,um you know live reload,it might sound like a very,uh,small,advantage but you know if you're making,many many changes um that small change,that small,is really makes a lot of a big impact uh,over time,and also something that might be,very relevant to your audience john is,if you are,in in areas or if you're traveling,around an internet connection is is not,very very reliable all of the time once,you have your development and local,environment set up,you're actually a lot more independent,and less reliant on a stable internet,connection so you can be working on a,theme and it's running locally in your,in your browser,and it's not reliant on uh the internet,at all uh unlike with with theme kit,which that you know could be the case so,you're able to take your work with you,maybe you're on a train or on a plane,and if the internet drops it it doesn't,really cause any disruption to your work,which is really really uh helpful,especially if you're on the move working,remotely or you know living the the,digital nomad lifestyle,um and also i think finally,um,the,your local development environment can,can scale with you as you grow so you,may want to,explore more advanced techniques,later on um so we do see a lot of theme,partners using tools like gulp or,cypress that will automate,like compilation of files or will,automate testing,and you can implement those you know,when you want if you want and uh those,are just two examples of of ways of you,know more advanced or more enhanced,workflows and there's you know a lot of,different tools out there that,developers have access to and with this,model uh you're able to to bring those,in when you want so you can you can,scale up that workflow as,well yeah totally agree i think those,were all great points um,so okay so just to wrap this up we've,been covering better workflow syntax,highlighting you've touched on hot,reloading different extensions you can,use with your local code editor,then you also imagine processes and,routines that you can integrate into the,workflow with the cli,um,and i think you already briefly touched,on that but that could be a cool,follow-up question,themekit versus cli and specifically for,building themes from scratch uh would,you recommend one over the other or why,would you say the cli might be a better,choice than themed kit uh that could be,interesting,sure so for for building a theme from,scratch,the short answer would be we would,definitely recommend the shopify cli,over theme kit and mostly that's because,it's a much more feature-rich tool so,there's a lot more that's,contained within the shopify cli than,there is with team kit so with the,shopify cli,you are,you know you have the ability to audit,your code as i mentioned with theme,check and you're able to have a,completely local version of your shopify,theme running on your browser,um there's also,other sort of core,features like being able to populate,your store with,different types of store data like,products or,orders different things like that,but also the the cli is,very actively maintained it's very,actively updated if you're in the the,partner slack for example we even have a,channel for shopify cli whenever we have,a new version released and we will make,an announcement there and you can you,can even you know track,the different versions to see how,specific features might be enhanced um,and and also if you,see something missing from the cli that,you think could be very useful there is,an open github repo where you can,create an issue and make a feature,request so um it is a tool that's that's,ever evolving,and um you know for that alone i think,it's it's very worth having as part of,your developer toolkit um with teamcase,it's very good for the use case that it,was created for which is,you know watching a theme directory and,whenever there's changes pushing those,changes up to a live shopify store,and it it,it uh performs that function very very,well and if that's all you need,then you know do continue using theme,kit like that's that's the totally valid,uh use case and,perhaps you just want to to to work with,that um but for building a theme from,scratch where you may,um need a much more robust workflow uh,we would recommend the the cli,all right sounds good um i think we're,definitely on the same page with that a,local development environment is the way,to go,but here's a catch for someone who's,just starting out it might also be,difficult to set up,because for example if we are talking,cli you have to have ruby installed and,then you might be lacking certain,dependencies or you might encounter,error messages that you haven't seen,before,so the question would be,where can someone find help help with,setting orders up,yeah do you have any thoughts on that,sure so to start off we do have a full,walk through of how to,install and set up the shopify cli on,our shopify developers youtube channel,and that goes through the whole process,of configuring,the,tool so we will we will link that in the,description of this video so that you,have a guide on like the initial setup,um and also there's a lot of,documentation on,our developer docs on shopify.dev that,covers,how to set up the tool as well um but,also if you're running into issues or,blockers you can,connect with our partner support team,through the partner dashboard under the,the support tab and they'll be able to,to guide you through setting up our,developer tools,and also since the github repo is a it's,an open repo,for the shopify cli,you're able to open issues there so if,there's,a blocker or,you've encountered a bug with the cli,you can definitely flag that with our,team there,there's also other opportunities too for,getting assistance with,the shopify cli when you're setting it,up um if you're part of our partner,slack we have,a shopify cli channel that you're able,to ask questions there,our developer community is super,collaborative they're always very happy,to to help out a fellow developer,um and then someday you might be able to,to pay it forward and help another demo,developer out um we also have a discord,community too which is very active but,there's a building themes channel in,there,and so there's a lot of different uh,avenues for for help,but yes definitely admittedly there are,some dependencies um it does sometimes,require some some trouble shooting i had,to set up a new laptop a few weeks ago,and i definitely ran into the the issue,of you know managing new ruby,versions and,ruby version management as well so um,you know even i'm on i'm on partner,slack as well i'm definitely available,if you uh have any issues i've i've been,through them all so uh do feel free to,connect,one on one as well,that's dangerous liam,but i guess everyone appreciates that,because uh yeah that's actually a lot of,support and that's awesome,um sure okay so,we will add everything that you,mentioned in the description as well i'm,sure people will find that very helpful,so yeah then fast forward okay now i,have the cli installed everything is up,and running um but how do we even go,about like creating a new theme like do,we have to,create every file from scratch do we,have some sort of a starting point,what's your take on that,sure so there are a couple of uh,different options there,um,when you're using the shopify cli,you can actually generate a fresh,version of our flagship theme done,which you could use as the starting,point you could also as you mentioned,you'll start from complete scratch and,you could,build each individual theme uh itself uh,just by creating new or creating new,files for each of the individual um,directories so creating all of the,sections manually and that's also an,option,um and if you do go that route our,developer docs have a lot of,information on each individual template,and which objects are,required for for each of those so you,know if you're going back granular level,our docs are going to be a huge help to,you there um if you are building on top,of dawn,um you,and you are intending on submitting your,theme to the shopify theme store and you,will need to be uh very mindful and very,aware of our requirement around,uniqueness so,if you're building on top of dawn we do,require you to,ensure that you have a very unique,visual identity and that the,the actual code of your theme like does,contain significant differences,um,to,dawn itself so that,when you do launch on the theme store,that it's it's,very much a different theme to dawn so,definitely use it as a starting point,but your ending point should be quite,far away from dawn and not just in terms,of the code base but in terms of the,visual identity as well,um but we are also working on,improving all of the processes around,that sort of getting started stage so,do watch this space for for some,announcements coming out around that you,know that very getting started,stage where people are looking for,a meaningful starting point,okay that's exciting news um looking,forward to that and yeah just to to,recap you can use don as a starting,point we've also mentioned that a lot or,touched on that a lot in our last,episodes or you can create files one by,one maybe then you could put a put an,existing theme side by side so you don't,miss anything or the theme star,requirements,um okay so this is how you get started,and how about tips and tricks for using,the cli do you get any recommendations,there,for sure so when you're using the cli,there are a bunch of different,commands which are related to themes,and then some that are more global,commands that are just related to how,you might be connecting to a,partner account or to a development,store,one that's super useful for when you're,troubleshooting if you're having any,issues particularly around,authentication or logging in is uh and,what i i run all the time is shopify who,am i and this quickly uh just gives you,um information on what store and what,partner organization,you're logged in as,and then when you want to log in you can,run shopify login,dash dash and the the url of the,development store that you want to log,into or it also works with um regular,stores as well so it's not just for,development stores if you you know maybe,if you have clients you might want to,use the cli for that as well,um also,you know the the commands that you would,typically use when working with themes,would be,shopify theme pull which allows you to,download a,all of the files of a theme,that's on your connected store if you,have a number of different themes it,will,prompt you to to select which theme you,want to pull from and then that's,downloaded onto your machine and you can,start editing those files,uh once the theme is installed on your,computer,you can run shopify team serve,and what this does is it creates that,development theme that i mentioned and,that runs,locally in your browser,so that you're able to,make changes see those changes you're,also able to access the theme customizer,for that development theme as well,and when you run that command you'll,you'll actually see the urls that you,need to open,to access um the,local version the version with the team,customizer theme editor and also there's,even a preview link that you can use for,for sharing um that people can can,access um you know if you've a,other teammate for example you can share,that preview link with them,then shopify theme push,can be used um if you're familiar with,with gears it's probably uh something,that you know you've you've seen before,um where you're able to uh push your,changes up to either a live store or you,can,push your changes to a github repo um,that's also an option especially if,you're using the github integration,i mentioned shopify theme check so,there's a few different ways to use,shopify theme check you can run it in,terminal as well by running the command,shopify team check,and it will scan your theme files,um so that's a nice way of running it,just manually and you'll get a report of,all of the different files that,might have some highlighted,potential issues with and a short,description of,of the issue,and then uh finally a really useful,command to use with the cli is shopify,populate and this will allow you to,populate your store with some demo data,so i i think you can you you can create,demo products uh customers and orders,um so you can have on your development,environment you you'll have some,um particularly probably for team,development and the products will be the,most important but also,if you're when you're creating,um customer account pages you'll want to,test that out with customer accounts as,well,okay cool i think this was a great list,of commands um maybe we can also add,some of these in the description or a,link to articles related to these,and now i would like to shift the focus,a bit because we've been talking about,the cli the local development,environment how to get started,but a bit earlier you also mentioned git,so why would you say is that helpful in,particular,sure so get is essentially used to,stay organized and keep track of code,changes,um and this is definitely helpful for,um building a theme from scratch because,you're going to be making you know quite,a lot of changes when you're building,components and particularly if you're,working in a group,or a team of developers together,you're going to want to,be able to keep track of what files were,changed by who,and if you're both working on the same,file,being able to,manage those conflicts when you are,as i say merging,the changes into into one final file,um so essentially it uses a system of,branches,to keep changes separated,and then,different teammates are able to review,the changes,merge them or roll them back if needed,and yeah when you're using gifs,locally,you will be,pushing your changes up to a hosting,service um the most popular i think is,probably github other ones do exist like,bitbucket and but we do recommend using,github because we have that that native,shopify github integration,okay so github basically helps you with,staying organized keeping track of code,changes also has amazing features for,collaborating in teams um and i'm also,glad you mentioned bitbucket because,back in the agency we actually used that,because at the time it had some great,project management integrations um but,yeah since now shopify has this native,github integration,i'm also starting to gravitate more,towards that,um but yeah how do you feel uh can,github really improve the process for,building a theme is that something you,would definitely recommend or is this,more optional what's your take on that,sure,also i used uh bitbucket in the past as,well in my in my previous job so um,there's definitely you know advantages,that different platforms have but uh,with github specifically uh for,for shopify um we we do have this this,native uh feature which is exposed in,the admin it's actually one of the few,places i think on the shopify admin,where a,developer,tool is surfaced,in such a prominent position which is,really nice,and i think,it really does depend on on your,workflow i think if you're,if you are working on your own maybe,github is,potentially less important but i think,when you are,working with a group it's um it becomes,almost impossible not to have,um,even just for the,ability to avoid those um you know,conflicts where,code could be overwritten,and just being able to collaborate in a,very robust way and and the way that the,shopify github interior integration,works is that you can select a specific,branch on a github repo,and,your,admin will sync with that branch,assuming of course that the branch has,all of the directories required for a,shopify theme,if it doesn't the the setup won't work,correctly so once,you have all of the required files,you're able to,synchronize the,store admin,with that branch,and,what will happen and then is if there's,any changes made to that branch those,changes are automatically transferred,across,to shopify,so you can use that as your main branch,and,your you can,work on separate branches,together and then merge into that main,connected branch,additionally,any changes made on the shopify admin,site can be transferred across to the,github repo too so,in which might be more applicable when,um a theme is finished and maybe you're,working with a client instead,and you want to to pull down those,changes,um,there's a few other,advantages which might be relevant for,people building a theme from scratch too,like,being able to have access to shopify is,lighthouse,ci github action,and what this is is it essentially runs,um some uh performance audits,on your theme files every time you,um,push to a specific branch,and the the tests will use google,lighthouse measurements to,test the performance of,your theme so you can,very easily,track what impact the changes that,you're making have on performance,um and that's just one uh git of action,that's that's available,similarly with the cli,you can you know expand on your,development workflow with the github,integration by using different creative,actions using different,continuous integration processes,and again you know scale,your,workflow with the requirements that you,might have okay yeah it makes a lot of,sense so github is definitely an,integral part of the development process,even if it just was for documenting your,changes plus all the features that you,get on top basically all right so i,think this was awesome and it also makes,our whole series a lot more complete,because now we've touched on how to come,up with a concept or your initial ideas,to,um how to get started how to use the cli,we've heard some commands today,and i think now we should just keep an,eye on the comment section to see what,people want to hear more about,um and we've also been talking about a,main call to action,so maybe you want to say a few words,about that it has to do with the,partnership team um yeah so so what do,we want to p what what do we want people,to do,sure so there's a really great uh,resource page on shopify.dev,forward slash themes hyphen developers,which also highlights a lot of the,different tools that we talked about in,this video and previous videos,and also uh demonstrates some of the the,best practices that you can start,integrating into your theme builds um,but also gives you an opportunity to,also connect with our theme partnerships,team if you want to schedule a,one-to-one conversation there is a,sign-up form where you're able to,send some information to us and we'll be,able to,connect with you and to also talk to you,about you know your next steps for being,part of the shopify team store community,fantastic and yeah i also love how you,guys um try to support the developer,community um like there's so many ways,to get in touch with you even at shopify,i think that's unseen in the space to be,honest um so yeah that's great and then,i would say liam thanks so much for,taking the time today again and yeah,always welcome back on the show,thanks jan it's always an absolute honor,to,be on your channel so thanks again for,helping,you

Congratulation! You bave finally finished reading how to build a shopify theme from scratch and believe you bave enougb understending how to build a shopify theme from scratch

Come on and read the rest of the article!