and the this session for the next uh 25,minutes or so we'll be talking about the,state of Shopify theme development so,looking at different workflows which are,available for theme developers uh recent,features which have been released for,themes and our vision as well for the,future,so just just a quick introduction on,myself my name is Liam I'm a developer,Advocate at Shopify I've been with,Shopify for about seven years now so in,that time I've been creating a lot of,content for developers looking to learn,how to build on top of Shopify I've been,creating a lot of YouTube videos blog,posts and of course being able to be,here this is my first time visiting,Australia so it's extremely exciting for,me and yeah,it's yeah amazing connecting with our,developer community so yeah over the,next two days please do grab me for a,chat would love to to connect,so for this session this is going to be,the plan for our journey first we're,going to look at where we are right now,then we're going to look at where we are,going and finally we're going to look at,how we will get there and then we should,have some time for a q a towards the end,so to answer the question where are we,right now we need to take a slight step,back into the past back to Summer of,2021 and Shopify unite which was a,milestone event for team developers we,had the launch of online store 2.0 which,enabled sections on all pages we had,meta Fields natively launched for,themes which allowed us to have much,more flexibility and personalization on,different pages we saw the relationship,of apps and themes become much more,closely combined with Team app,extensions we had of course our vision,for custom storefronts for hydrogen and,last but not least we also had the,reopening of the theme store after the,Hiatus for a while,and in the months since then we've been,able to progressively enhance many of,these features so we've,improved with the limitations that we,had on sections and blocks by making,more sections more blocks available on,pages we have more Dynamic sections,available on more pages for enhancing,meta fields we also made the developer,experience of working with Team app,extensions much much better as well so,all this to say is themes are much more,powerful more adaptable and more,valuable to Merchants than ever before,so just to look more generally at the,ecosystem in general we see you know,quite strong and steady growth we're,seeing millions of merchants are looking,to improve their store looking to,customize their online experience and,their buying experience for their,customers we firmly believe there's a,great opportunity here for developers,looking to enter this space,if we look across to the App Store in,particular last year we saw that 400,million was paid out to our app,developers just increase of over 80,percent from the previous year and of,course we reduced our Revenue share so,Merchants who earn up to their first,million dollars don't need to pay,Shopify any Revenue share and
Let's move on to the first section of Development theme shopify
How to use Shopify CLI 3.0 for Theme Development and deploy themes to different stores.
How to use Shopify CLI 3.0 for Theme Development and deploy themes to different stores.
Globe again in today's video we're going,to speak about Shopify CLI 3.6 3.2,whatever you want to call it and before,we get started I just want you to know,that I have tried it I have give it a,shot and it's really awesome and you,will see we will get to all the features,in a second so bear with me and you will,also need to know that the old version,will no longer be supported until uh,like I think it's 31st May of next year,and usually some people still use 10K,because well some Futures teamkit has,some advantage over the old CLI version,especially for team development but now,with 3.x it's really you will see that I,think everyone will make great to 3.6,once once I show these Futures so yeah,I'm really really excited because you,will see all the features in this in a,second,but before we get started with the code,you will actually need to migrate to the,newest version,and to migrate they have if you click,Shopify CRI in the documentation they,have a really easy migration guide and,especially if you are on Mac since,Michael you have to do if you have,installed it with Homebrew all you have,to do is really click home brew upgrade,Shopify CLI if you have never installed,Shopify CLI in the first place all you,have to do is just Brew I think add,Shopify CLI and it will go to it will,install the latest version which is,um which is 3.22 for me so yeah,if you are on other uh machines like,Linux or revi or,excuse me or Windows you probably have,installed it with Gem and if you have to,if you had installed it with gem you,need to uninstall the old implementation,and install the new the new,implementation using uh using npm or,yarn or pnpm whatever you like since,it's now hosted on npm because it's a,typescript package it's a node package,and it's no longer a ruby package since,the newest version is actually,built using a typescript the old version,is using Ruby the newest version if you,if we check the GitHub you will see it's,Rewritten in typescript it's not fully,Rewritten in typescript it's actually a,wrapper especially for the teams part,it's a wrapper over the typescript,implementation over the old Rabbi,implementation sorry so yeah,uh now all you have to do is just click,here on global ads at Shopify and it,will add Shopify you will need to,install the core package which is,shopify.cr day and then install the,plugin yeah it's a plugin uh you will,see how the Shopify team commands all,are a plugin it's actually a plugin that,is added to the core CLI to support,Shopify team Commons so now if I,actually once you do that you will have,the latest version,and once you do that,um you can also still use the old,version of the Shopify CLI uh but you,will have to call it to change the pads,especially if you are if you have,installed it with Homebrew you will have,to change the naming using the pads like,like we do if you are if you're ever,used python for example we have python 2,and python for python 3. that's that's,reminds me of that,um the old implementat
After seeing the first section, I believe you have a general understanding of Development theme shopify
Continue the next second section about Development theme shopify
Is Shopify Theme Developer a Viable Career Path in 2023?
Is Shopify Theme Developer a Viable Career Path in 2023?
hey guys in this video we're going to be,talking about should you become a,Shopify developer in 2023 is it a viable,career path for you right and who should,actually become a Shopify developer so,we're going to cover a lot of things in,here in this video all right so again,what is Shopify right so Shopify is a,Content management system right,um it's a platform where you can sell,products right you can have discounts,you can have uh secure uh user data,right you can basically have a secure,payment Gateway you also have access to,a whole bunch of different applications,so don't matter what type of business,you might have you might have something,like a I don't know a digital product or,maybe you're selling uh products online,maybe Drop Shipping right so again it,doesn't matter what type of business you,have you can use Shopify to sell your,products through uh their platform okay,now again,a lot of people use this every time that,you see like an advertisement on YouTube,Instagram Tick Tock you're gonna see uh,basically products are being promoted,through advertisement I could tell you,right now probably 95 99 of those stores,are built with Shopify okay so again,it's a platform that everybody uses now,again for you as a developer why should,you care about Shopify the fact that,there's so many people using uh Shopify,it basically allows you to say hey you,know what there's going to be a high,demand for this skill now becoming a,Shopify developer has two different,career paths that you could go on you,could say I'm gonna become a Shopify,theme developer or I can become a,Shopify app developer a Shopify app,developer is more on the back end right,basically being a full stack developer,to create applications within the,ecosystem of Shopify and a Shopify theme,developer is pretty much a front-end,developer that knows how to to create,websites create themes and connect them,through shopify's you know liquid,or using their apis right so pretty much,it's just if you ever use WordPress or,something like that it's like the,WordPress of e-commerce okay so again a,lot of people use Shopify so there's a,huge demand for it,now one thing that you're gonna see,right now,um as far as like the sales right you,could take a look at how this Black,Friday has been crazy uh for Shopify uh,I believe they had what like three,billion or something like that I can't,remember the exact number I'll tell you,right now I believe it's like 3.36,billion dollars in sales in Black Friday,just on Black Friday alone okay we're,not talking about the whole year right,so again this is huge a lot of people,have been switching to Shopify from all,other uh different type of platforms you,know you might have heard of maybe,Magento maybe big Commerce,um there's a whole bunch of other ones,that's out there even Wix Etc but again,when it comes to e-commerce Shopify is,the number one platform now,um I'm gonna talk to you guys about,becoming a Shopify theme developer and,like who should care about t
After seeing the second section, I believe you have a general understanding of Development theme shopify
Continue the next third section about Development theme shopify
How to Become a Shopify Theme Developer
How to Become a Shopify Theme Developer
what's up youtube chris here again from,christthefreelancer.com,and in this video let's talk about how,to actually become,a shopify theme developer,first of all thanks for your patience,over the last few months it's been,a bit of a busy period with lots of,client work and of course the release of,my latest skillshare class,linkedin freelancing which we'll talk,about later in the video,but for now i want to get straight into,the topic and talk about how to become,a shopify theme developer so obviously,on this channel so far we've covered,quite a bit on shopify theme development,it's been my focus for the last year and,a half,after i started specializing in this,area and you guys have,maybe seen my video on the day in the,life you're curious on how,to actually get to the point where you,can start freelancing or even work in a,job as a shopify,theme developer well there's two parts,and of course you're going to need to,the skills to perform the work but,you're also going to need to know how to,find work and actually get started,getting your first projects,so those are the two parts we're going,to be talking about in today's video,starting with skills do you have the,skills of a front-end web developer,because essentially a shopify theme,developer is just a front-end web,developer,who works on the shopify platform so if,you don't even know what the difference,between front end and back end is,definitely check out my course,understanding web development a,beginner's guide to the web,on skillshare if you're starting at that,point you really need to start with the,basics of web development,but i'm going to assume that you at,least know the difference,between front end and back end for this,video and so,front end as you should know is html css,javascript pretty much everything that,is run in your browser,all right so you've got the back end,which sends the,html css and javascript to the front end,and the front end,is what gets put together in your,browser and essentially that is all,you have access to in shopify and it's,delivered,through the theme all right so yes,you're going to need to know,html and css and javascript depending on,the complexity of the task within theme,development,you don't have to be you know a master,of all the frameworks because,it's best to keep it simple when you're,working with shopify themes when it,comes to javascript,but you need to have some skills in,front of web development so,this is going to be much easier for you,if you already,work as a front-end web developer or,have learnt those skills,the second thing you need to learn to,kind of,bring those front-end web development,skills over to skillshare,is to learn about shopify liquid shopify,liquid,is the templating language of shopify,themes it's essentially,like a programming language but like,really dumbed down and all it does is,extract data from your store and present,it,in the theme so there's no there's,nothing within shopify liquid for you to,update a database or an
After seeing the third section, I believe you have a general understanding of Development theme shopify
Continue the next fourth section about Development theme shopify
Shopify Theme Development in 2022 with Shopify Dawn and Shopify Online Store 2.0 Tutorial
Shopify Theme Development in 2022 with Shopify Dawn and Shopify Online Store 2.0 Tutorial
so,so,huh,hello,what is up guys welcome to another live,stream how's it going,let me know in the chat that you guys,are here and alive,hopefully you guys can hear me if not,somebody please let me know before i,embarrass myself for another half hour,uh but,today i'm super excited because we're,actually going to be looking at,the new shopify online store 2.0,experience,so,if you guys aren't already aware,at the the end of july early august,shopify announced a new theme and a new,online store 2.0 experience,that,essentially makes a lot of really,necessary updates,to,what i would consider a kind of,antiquated way to build themes now,if you guys are watching this you may,have already seen uh another live stream,that we did where we actually went in,and we set up a,modern,development workflow uh using shopify,and using theme kit uh but apparently,they've just completely dropped,the support for themekit in their new,theme and the online store 2.0,experience,and,made it a little bit simpler actually uh,to go and,be able to use git,um for,uh version control and to be able to,push your theme up so we're gonna be,looking at all of that good stuff but,before we get into that uh if you,haven't already,do me a favor go ahead and like this,video subscribe if you haven't already,and click that little notification bell,because we're going to be making a lot,more content like this,for the rest of the year and well into,the future so if you're interested in,web design interested in web development,definitely subscribe but let's go ahead,and get started,so,this is actually in,end of june early july so i misspoke,but,they introduced the online store 2.0 uh,and there's this article that i'll go,ahead and i'll link in the chat,uh where they talk about what it means,for developers looks like we got some,people in the chat hey ray hey oscar,thanks so much for hanging out welcome,to the chat guys,if you have any questions at any point,feel free to drop them in there i'll be,reading them as we go,so,just taking a look at this and hopefully,you guys can see it let's make it nice,and big,online store 2.0 opens up massive,opportunities for developers building,themes and apps for shopify merchants,we've rebuilt the online store,experience from the ground up,and are introducing a new set of,developer tools to help you create,amazing experience for merchants and,shoppers let's talk about exactly what,that is before we go and we check it out,for ourselves,so the first is an upgraded theme,architecture essentially,the sections that we've become so used,to using on the homepage are now,available on every page so you're no,longer pigeonholed to not being able to,use those sections,on an about page or on a product page,without a developer before you used to,have to have a developer be able to add,that section over to that page so that,essentially only people who knew how to,code would be able to do this kind of,customization now sections on every page,it's just gonna come right out o
After seeing the fourth section, I believe you have a general understanding of Development theme shopify
Continue the next fifth section about Development theme shopify
Shopify Liquid Crash Course - Learn Shopify Theme Development Tutorial
Shopify Liquid Crash Course - Learn Shopify Theme Development Tutorial
foreign,do,hello,what is up everybody welcome back to,another live stream thanks for everybody,who showed up early i really appreciate,you guys hanging around through all the,intro music,now that we've got everything set up,let's talk a little bit about what we're,going to be covering today,and let me know in the chat if you guys,can hear me okay or if you guys have any,trouble whatsoever with the stream,um,but i'm very excited because today we're,going to be covering um how to use,liquid,so if you guys are not familiar with,what liquid is it is a templating,language uh that was created uh as an,open source templating language meaning,you can use it on any project but if you,guys are familiar with um shopify you'll,know that,liquid is the templating language used,for all shopify themes and websites,so,it's super super important for you guys,to understand how to use liquid if,you're going to be building your own,shopify themes or even if you just have,your own shopify store and you want to,make a few modifications here and there,so we have a lot of new shopify projects,coming up in the new year so i thought,what better time than now to sit down,and actually,learn how to use um the templating,language that runs the entire uh theme,development process for shopify,so what i'm going to do is i'm going to,go really quickly and roll the intro and,then we'll jump into my screen all right,let's go,all right so here i am uh this is a,shopify github repository that has a,bunch of information on liquid what i'm,going to do is i'm going to drop it over,in the chat,so that you guys can follow along but,we're going to be going through some of,the basics and talking through kind of,how everything works,and we're hopefully going to be writing,a little bit of code,to kind of,get up to speed on how liquid works so,let's go really quickly and just kind of,talk about the basics,and then we'll go and we'll get set up,to actually write some code,so,the three things that you need to know,about liquid is that it uses a,combination of objects tags,and filters inside of their template,files in order to display dynamic,content so essentially what's happening,and let's go into an actual,uh theme here so that we can take a look,and here i'm just on a blank uh dawn,theme that i installed really really,quickly right before this screen so,nothing really important here happening,if you don't have a shopify store to,follow along with i recommend that you,go and check out partners.shopify.com,you can join their partners program and,you can set up as many development,stores as you want 100 for free and you,don't have to pay until you're ready to,actually go and launch your store so,this is a really great way to get,practice on how to actually write,liquid code and more importantly,practicing,building your own themes or extending,the existing themes,without having to go and invest in you,know a host or a server or anything like,that which is really cool so here we've,got the dawn the
After seeing the fifth section, I believe you have a general understanding of Development theme shopify
Continue the next sixth section about Development theme shopify
SHOPIFY LIQUID: Theme Programming for Beginners [CRASH COURSE]
SHOPIFY LIQUID: Theme Programming for Beginners [CRASH COURSE]
alarm welcome to this crash course on,Shopify liquid the templating language,of Shopify themes first of all I want to,thank you for bearing with me over the,last three months it's been a busy three,months with the release of my latest,Skillshare class Shopify theme,programming which by the way the link is,in the description,but in today's video we're going to,cover an overview of Shopify liquid a,very practical run-through of what you,can do with Shopify liquid which you can,think of as the kind of back-end,programming language of Shopify themes,so this crash course is gonna be split,up into four four parts the first part,we're gonna cover the absolute basics,we're not even gonna touch the store,data just get you up to speed with some,of the syntax the second part we're,going to actually bring in some store,data and use liquid objects and in the,third section we are gonna incorporate,theme data so theme data allows us to,take user input from the admins of the,store they can customize their theme,using the customizer and then we can use,that data inside our themes very cool,feature of Shopify and the fourth and,final part I'll be talking about some of,the limitations of the templating,language what you can do and what you,can't do with Shopify liquid and also,covering an important topic within,Shopify liquid which is the topic of,scope we've got a lot to get through so,I'm gonna jump straight into the video,let's jump right into the computer and,get into it all right so we're now,inside my computer and we're looking at,the Shopify admin of my testing shop,Chris testing shop now if you haven't,done so already you can create your own,development store through your Shopify,partners account if you don't have a,partner account it's free to join you,just go to partners Shopify comm and,join now okay and the great thing about,a partner account is it allows you to,create what's called development stores,that are basically free store,that you can use as a development,environment to practice your programming,okay so that's the first thing you'll,need you'll need in an actual store and,the second thing you'll need if you want,to follow along is the theme I'm using,so you can use any theme to follow along,with in fact maybe it's the theme you're,working on right now but if we look at a,fully developed theme like debut for,instance there is a lot of code and,files here so I don't recommend if,you're trying to just learn Shopify,liquid that you work with a theme that's,already been built out because there's a,lot of HTML in here there's a lot of,different files and lines of code so my,recommendation is to start with a blank,theme and the theme that I use is the,one that you can generate through theme,kit using the theme new command what,I've done for this tutorial is I've,already generated that theme and I've,put it on my github page so if you just,want to download the theme it's at,github comm slash christopher dodd slash,Skillshare okay this is my resources f
After seeing the sixth section, I believe you have a general understanding of Development theme shopify
Continue the next seventh section about Development theme shopify
How to add Tailwind CSS to a Shopify theme and optimized for production using Purge CSS
How to add Tailwind CSS to a Shopify theme and optimized for production using Purge CSS
so the first thing i want to thank you,for all your support and comment in my,first youtube video,and it's making me more happy and more,excited,to create more youtube video related to,beefy development,so in this video i will be talking about,how you can add delivery css,to our shopify team and optimize it for,production,so that's it and let's get started so if,you don't know what taylor winter says,it's all about it's a utility first css,framework,so for example if you want to add a,classes,a flexbox to a dev class you can just,add,flex flex class name and it will,make the class have a display of flex,and you can add many other things so in,this tutorial i will be,i need to you need to have wi-fi team,kit,installed and node.js and npm,installed so i will leave the link,for the shopify team kit and node.js in,the description,so the first thing you need to do i will,open the terminal,and i will go to my development,environment and i will create a new,directory,i will call it shopify,team tailwind,css and i will go,to it cd,it's just a checkpo problem,after that i will go to the command line,command line reference,and i will grab this this command,so i will put it here so we have like,how we need to have like,the api password and the story url,and the shopify team kit id so i will go,to my development,store and in the app section,so i will go to manage private app,and click create new private app,so in the private app name i will call,it you can call it,whatever you want so i would call it,tailwind css,and i will add my emergency developer,email,and in the admin api permission,so i will go to the team team permission,and,make it read and write,so and it will create the app and,i will get my credentials,so we'll have like an api key and the,password so i will go and grab the,password,and i will paste it in the command line,and for the story ulr,i will be using this one,and for the team id i will go online,store and in my dashboard,i will grab the id of the,of the team,so i will click in action and,it will direct the code and i will grab,the the so i will grab the team id,from the url,and go back to the dashboard to the,command line,and paste it make sure,that you are in the team there actually,it's not like a,so it's done now so i will go and,initialize mp and node.js project so npm,init,dash,after that i need to install some,dependency also i will,npm install,dash d because it's a div defenses i,need,daily wind css post,css cli and auto,prefixer,so after the installation is done,so i will need to mpx,television css,in it and it will create a television,css config file,so this is what we have done in the,command line so we,get our shopify team,architecture so we have like asset and,config and we have config.tml file that,will hold,our shopify team kit configuration,so we can have like a development,environment staging,and production environment if if you,want,and we have like a package.json with all,the necessary dependency,and we have the tailwind
After seeing the seventh section, I believe you have a general understanding of Development theme shopify
Continue the next eighth section about Development theme shopify
Shopify CLI for Theme Development (How to use)
Shopify CLI for Theme Development (How to use)
hey everyone in this video we're going,to talk about shopify cli for themes,shopify cli stands for shopify command,line interface and is the latest,alternative to shopify theme kit,previously shopify cli was a tool that,helped users create and deploy shopify,apps but since the online store 2.0,announcements in june 2021 shopify have,extended the shopify cli to provide new,functions for theme development,including the ability to serve themes,locally,so in this video let's talk about how,the shopify cli works and how to include,it into your theme development workflow,before we get started talking about how,to use the shopify cli for theme,development i want to provide some,context here and talk about where this,tool fits in compared to the other,previous tools for developing shopify,themes,when i first started shopify theme,development back in 2019 there were two,tools available slate and theme kit,i believe it was theme kit that came,first but at shopify unite 2017 shopify,announced something called slate a new,build tool for shopify themes intended,to provide a more developer friendly,scaffold for building themes,slate did have some good points such as,the ability to split up scss into,multiple modular files and update css,changes locally but over time shopify,decided not to maintain the project and,eventually announced that they were,officially ending support for slate in,january 2020. therefore slate is not a,tool i recommend to anyone anymore in my,opinion the only reason to use slate is,if you have to i.e you have an existing,slate project that you're unable to or,unwilling to migrate that left us with,themekit a simple tool for uploading and,downloading theme files from your,shopify store making it possible to work,on themes locally,and now the latest option which is to,use the shopify cli for theme,development,chances are if you're watching this,video close to the release date you,might be using shopify themekit as,mentioned shopify themekit is a simple,tool for uploading and downloading theme,code from themes already hosted on your,shopify store we can do a one-time,download from themekit or a one-time,upload from themekit or we can run the,command theme watch and allow themekit,to detect and upload changes to the,theme as it exists on the shopify store,as soon as they happen for a full,tutorial on shopify themekit check out,the lesson in my skillshare class,shopify theme development how to build,and customize your own online store the,shopify cli by comparison is a bit,different with shopify cli you first,connect the tool to your online store by,running shopify login and from that,point you can begin to serve the theme,code you have on your computer locally,running shopify theme serve the cli will,take your theme code and generate a,development theme this development theme,will come with a theme id and a theme,editor but it won't exist in your,shopify store's theme library and it,will disappear after you run shopify,logout,running these s
After seeing the eighth section, I believe you have a general understanding of Development theme shopify
Continue the next ninth section about Development theme shopify
Make money selling Shopify Themes (best chance is now)
Make money selling Shopify Themes (best chance is now)
hey everyone jan here codingwithyan.com,so today we have the first episode of,our sell your own theme series and all,of you have been asking tons of great,questions so please keep doing so this,project can only be as good as the,community is and you guys are amazing so,appreciate everyone watching and now,it's time for some answers so let's dive,right in,all right liam then thanks so much for,taking the time today as you know we're,here to answer some of the most burning,questions that people have,are you feeling good about it as well,i'm feeling great jan thanks for having,me here um,obviously a huge fan of the channel and,uh yeah any opportunity i can have to to,share the good word of the shopify theme,store um is is my absolute pleasure um,yeah then maybe as an entry point to our,conversation one of the most burning,topics or one of the most requested,topics was like what is the best way to,create a theme which kind of ties into,two subcategories the concept then the,actual development like workflows tools,and everything,so why don't we talk about the concept,first and,what is the thing or what can we give,people on the way in order to come up,with an amazing concept should we talk,about that,yeah i think that's a great place to,start,so i think the the first thing to really,think about is to really dive into how,merchants and how buyers will interact,with a theme,and and also consider how it's different,to design for a marketplace versus,designing for an individual client,so with an individual client you're very,commonly going to be requesting or being,asked for specific settings whereas in,theme store,these settings are,a little bit more generic um they're not,requested specifically by any merchants,um so merchants may be encountering uh,these features and functionality for the,first time um so i'd really you know,before even writing a line of code um,you know think about the the buyer,journey think about the merchant journey,and how,you know all of these people will,interact with the theme with the online,store editor,and you know think about know you're not,really designing just a storefront,for a buyer to,pick a product and take it to the cart,and check out you're also,essentially designing a ui that,merchants will be using to,bring their store to life,and and ideally with the the minimal,amount of friction possible,okay yeah i think that's a very good,point because as you know many merchants,don't have a strong technical background,then the settings have to be very,straightforward i mean this all ties to,usability i think that's what we are,trying to trying to get across here,um yeah so would you have any tips or,maybe how could someone approach that,would you recommend maybe using tools,like or like design tools to come up,with the visual concept first or would,you just be diving head first and,writing lines of code how would you,approach that yeah so i think there's a,few different methods um but i would,definitely advise,um investing
Congratulation! You bave finally finished reading Development theme shopify and believe you bave enougb understending Development theme shopify
No difficulty
