g'day everyone this is about shopify and,it's github integrations let's get,straight into it so first of all you are,going to need a github account so i'd,advise you to sign up to github and you,will need a shopify like theme store,something that you actually own so yes,you do also need to be signed up to,shopify or have some sort of access,so the problem beforehand is that we,would have a client going to shopify,changing things around but your,information is stored and all the,development and everything is done and,stored,on a repo which is probably on github,or bitmarket or,shared somewhere else like that so what,happens here is beforehand they're at,the same spot but as soon as,a client comes by and changes something,in the settings,this code's here and the code for your,repo is here so now they're not in sync,that's bad because when a developer,comes by and wants to make a change,they're going to do a change on code,that is not actually on the live theme,so they're making a change here and that,changes here and then pushes on top of,the stuff and gets rid of whatever the,client has made,that's really bad and there were like,ways to fix this in the past but now the,great thing about shopify with github is,that when,the,client makes a change on here,and the repos here when they make a,change,it gets pushed to the github repo where,you keep all your code the great thing,about this instead of now worrying about,two places where stuff can be changed we,just have one,which is awesome because the client,changes something that doesn't matter,the developer changes something it,doesn't matter see how it just goes,along the one path there's no need to be,like did someone change something here,do we need to like get this one to this,point too or did the developer change it,here or revert it back to here and the,client needs to go back to the live,theme needs see how now we're already,lost it's so confusing to actually,explain that this needs to be in sync,with this one but this can't be here and,this can't be a head and this one can't,be back now you just go it doesn't,matter the client can change something,the developer can change something we,still go along the same path we don't,need to sync anything because it,automatically syncs up,that's the benefit of using the github,integrations,you also don't need to,manually go through,running some commands to push the,changes to shopify if you're not using,github or any sort of repository any,sort of get for any reason but you,should be using git so just to preface,that uh this class is kind of assuming,that you have a little bit of knowledge,on git and why it's used and a bit of,knowledge on shopify so let's get,straight into it i i've signed into my,shopify and we can come here and we can,see okay we have the brand new dawn,theme that's really cool and we don't,have anything else connected so what,we're gonna do first is we're going to,go across,and we're going to just make a new uh,folder where we're going
Let's move on to the first section of Repos theme shopify
How to view and edit the shopify store theme code - liquid files
How to view and edit the shopify store theme code - liquid files
this video explains how you can edit the,theme code of your shopify store so for,that,uh open the store like log in with admin,credentials and then you will see this,themes button just click on the themes,button on the left hand side in the,sales channel section and then click on,actions right in front of live theme,so this is the live theme and then click,on actions then click on edit code,so basically when you click on edit code,it will show all the files of your,store and then you can edit that files,if you are expert in that otherwise i,will not recommend,for you to edit this so themes.liquid,this is the main,file or the page of your store,this is the home page we can call it and,they use the liquid,templating engine so you can see here,there is an html so liquid file is,basically in,html uh embedded,with uh this stacks,so you can see here double curly bracket,so basically what,we are telling here is okay this is the,liquid variable,so whatever is the value of that,variable will be displayed,so this curly bracket should be replaced,with this,the value of this variable then there is,another,syntax here you can see curly bracket,then percentage sign so this is used for,the,logic like if you want to put if,condition else condition then if you,want to do some,loops then you can use that particular,syntax,so basically in this example what it is,doing is,checking if settings start favicon is,not equal to blank,then this line will be executed,added into the final html output,so basically your store is actually,contains a layout for example,theme.liquid is one layout,and in that layout uh there can be,multiple templates like,404 dot liquid like if some,customer is accessing the resource that,is not available,then 404 will be displayed that page,will be displayed then,this is the template for the block it's,the template for the article then,uh there is there are different,templates like if you want to set the,passwords,then for the product there is a,different templates,and there are lots of other tablets like,that,and the sections again they are liquid,files,so different sections of your website,you can see here like if you want to,edit the header just go here in the,header dot liquid and then,you can see,how it is printing that header and you,can update that,if you want over there,and there is snippet that is reusable,code then there is a assets like your js,files javascript files,css files etc and,there is a locales,and configuration settings underscore,data.json,so all these options are available if,you are tech savvy if you know the,technology like html css javascript and,especially the liquid template,templating engine of shopify,which is like not a standard,templating engine but they have,customized that liquid engine they have,created that liquid engine,on their own so if you are aware about,these concepts and you are expert in,that then only,i will recommend that you edit that,otherwise your site,may break so basically that's how you,can,view
After seeing the first section, I believe you have a general understanding of Repos theme shopify
Continue the next second section about Repos 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 second section, I believe you have a general understanding of Repos theme shopify
Continue the next third section about Repos theme shopify
After seeing the third section, I believe you have a general understanding of Repos theme shopify
Continue the next fourth section about Repos theme shopify
46 - How to Make Shopify Theme Load 89% Faster
46 - How to Make Shopify Theme Load 89% Faster
hello and welcome in this video we are,going to work on the performance of our,team so performance is something very,important according to Amazon I don't,know it was a year 2016 or something,like for every a one second lit response,of the page they lose millions of,dollars every year so it is very,important like if the page time is,loading one second and I know most of,the customer that they just leave the,page and they do not want to purchase,because the page time are the pitch time,load was lit so it is very important so,I will show you some tips and tricks in,these two videos in this video I will,show you about how you can test the,performance and how you can improve it,I'm going to use the GT metrics comm we,will put the URL of the if you have,never used this one this is just testing,tool and they are also giving you some,tips on how you can improve your website,and the performance of it so I will come,to the collection page collision which,is important also product page and home,page every page is important but I will,test the collection pidgin see how it is,going to perform and we are trying to,hit the a score for this one so if I try,to test this one it is going to analyze,my website also while it is analyzing as,you can see my password is not enabled,at so it can access my page easily so,you can make sure you can disable your,password I will change my password as,soon as I finished recording this video,so Al and I will enable the password so,let's see the record so this is how our,page perform currently we have only,three products that's why it load fast,and it was easy so we have B score with,80 person looks fine know here are two,things which are on red if you bring,everything to green that's good,all you have to go also we have wise,yslow which is very important they are,going to tell you that do not use this,stuff most of the kids this is stuff you,cannot do anything about it but most of,them you can do something about it so,let's do something about the minified,javascript in the beginning of the video,I said they will I do this one it is,going to be easy to minify our file -,currently our files are not minified so,I will come here,and and finish off this one as well as,finish off this one now the team what,should run actually the team was should,run but in my in p.m. one this one which,is compiling our assets I'm going to,compile them down to compress them so if,I check out my package the JSON here we,have a few comments,we have div which is looking for,development watch which is watching for,any changes and here is the production,which is doing the production coming,here so let's run this one it is npm run,prote so it should comprise my file and,everything should looks fine no it will,take a few seconds it will grab,everything from source directory and it,will remove all the comments and it will,minify every cos cube and CSS that you,have and then it will keep the same up,the GS and abuses as well as you can see,it minified them no
After seeing the fourth section, I believe you have a general understanding of Repos theme shopify
Continue the next fifth section about Repos 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 fifth section, I believe you have a general understanding of Repos theme shopify
Continue the next sixth section about Repos theme shopify
How to use Github with Shopify (Online Store 2.0)
How to use Github with Shopify (Online Store 2.0)
hey everyone welcome back to this series,on shopify online store 2.0 in this,video we're going to talk about the new,github integration with shopify this is,a very powerful and exciting tool that,has come out in the suite of changes,that shopify have labeled as online,store 2.0 i'm going to jump straight,into the tutorial today and show you how,we can automatically synchronize shopify,themes with branches on repositories,using github,so in today's tutorial what i'm going to,do to illustrate using github in shopify,is to take an existing project create a,git repository connect it to github and,then use that remote repository to,connect to our theme library here on the,shopify store that we're working on in,my case it's chris testing shop as,always all right so,for those of you who haven't really been,across version control in shopify before,this,virtually there's only one native way to,do version control in shopify and if we,click on edit code and look inside here,we can see what it is,let's open up any particular file and as,you can see next to the file name if we,click on older versions this drop down,menu appears and we can revert to an,earlier version,this is a very primitive form of version,control it doesn't work as good as git,git has so many more features in terms,of looking at line by line differences,between commits and branches creating,branches for that matter merging in,branches and pushing and pulling codes,so,git is a much better version control,system than this which was all that,shopify offered you up until now,so clicking out of that i want to draw,your attention to an article i wrote,last year about using git with shopify i,encourage you to still read it even,though it's a little outdated now,because we do have this shopify github,integration now but essentially this is,how i used to do my git before the,integration came out,and because there was no integration,what i would do is i would of course,have to move the code locally,so i talk about the development workflow,here,i would have to move that code locally,as i recommend for all developers to do,and of course i was using themekit at,the time,as shopify cli has only just been,extended to work with themes which we'll,cover in a later video so what i had to,do,was i had to synchronize my theme code,with my branches manually so as you can,see here in this little diagram,you of course have your current live,theme i synced that up with a master,branch and then have a staging branch,and then if there's multiple developers,working on the theme you can have a,branch for each of them and then they,would merge into staging you would look,at staging and then you would merge into,master and go live but the problem with,this is you had to do this all manually,and the changes only went one way,so,using this one-to-one relationship,between themes and branches we were able,to determine which changes had been,carried out on which theme and the only,issue is that this relationship this,structu
After seeing the sixth section, I believe you have a general understanding of Repos theme shopify
Continue the next seventh section about Repos theme shopify
Code Your Shopify Site With Visual Studio Code
Code Your Shopify Site With Visual Studio Code
hi guys today i thought i'd make a video,about how you can use visual studio code,to code your shopify site so one of the,reasons you'd want to do this is while,the default text editor for shopify is,all right it has the tendency to,improperly autoformat things and,you know you don't get access to all the,extensions and whatnot that you,traditionally would with a dedicated,text editor and also i think it has one,of the ugliest dark modes of all time so,we're actually going to use github,to help us out with this and so this way,we're going to be able to edit our site,in visual studio code and push the,changes through github and the changes,will automatically be reflected on our,site so the first thing i want you guys,to do once you're in github is go ahead,up here and create a new repository,you're gonna name this whatever you want,but for my test site i'm just gonna name,it um,test site uh and then just underscore,and then the the theme name so dawn,i'm just gonna leave the description,blank i'll make it private i'm gonna,keep all these unchecked for now and i'm,just gonna go ahead and create the,repository so once i've done that i'm,gonna copy this link once i've navigated,to the place that i want this to be,located on my computer i'm just gonna,type git clone and,paste the link that i copied from before,it's going to ask me for my passphrase,it tells me that i've cloned an empty,repository that that's fine because,we're going to go ahead and download the,theme files from my,shopify site and then we're going to,upload them to this repository here i am,in the admin of my site and i'm just,going to go ahead and hit this actions,button here,for whichever theme i want to actually,integrate with github and visual studio,code,and then i'm going to go ahead and,download the theme file now it's going,to email me the theme file so you'll,actually receive an email that has a,link to the download,i've downloaded it and i've dragged it,out onto my desktop uh i'm gonna go,ahead and extract this,into its own,folder,and once that's finished i'm gonna go,ahead and open this copy all of the,files in here and drag them into,whatever folder you set up to be your,github repository so once i've done that,i can go back to my command prompt here,cd into that,folder,and i'm going to get status here,and then i'm going to get add uh all of,these files,um,and get status again,all right so we've added all these files,now i need to commit them i'm gonna git,commit am,um,which is just it's just committing all,these files with the message initial,commit yeah so now we have this,committed now i'm to get push origin to,main,and it's going to prompt me for my,passphrase i'm going to do that so now,when we go back to github you'll see,these files have been pushed to,uh github from our local repository here,we are in github and you can see all,these files have been pushed,uh to our remote repository so now we,need to connect to this repository in,shopify so to do that i'm going to
After seeing the seventh section, I believe you have a general understanding of Repos theme shopify
Continue the next eighth section about Repos theme shopify
After seeing the eighth section, I believe you have a general understanding of Repos theme shopify
Continue the next ninth section about Repos theme shopify
The Best Shopify Theme In 2022 (Industry experts have voted)
The Best Shopify Theme In 2022 (Industry experts have voted)
which one is the best shopify theme in,2022,together with our good friends at,storetasker we wanted to find out,exactly that so over the last week we,interviewed various experts developers,agency owners from our network and from,storetasker's awesome freelancing,platform link in the description,and to our surprise we actually found,out way more than we expected so if you,listen to this you will not only,discover which one was the most upvoted,theme but you will also learn what makes,a theme great from a merchant's,perspective like what to pay attention,to when picking a good theme and you,will also learn what makes other,developers want to use your theme which,is a very interesting angle if you want,to build themes yourself and then,potentially sell them on the theme store,so here's what we discovered,all right patrick i'm super excited that,you're here today and yeah i actually,can't believe that we didn't do this,earlier um so would you like to,introduce yourself really quick,thank you jan for the invite um yeah my,name is patrick i'm the founder of the,agency eshop guide we are the fastest,growing agency in germany uh 2 million,in revenue 35 people,it's crazy people and we love shopify,and i'm happy to talk about the themes,that's awesome um okay maybe before we,get there would you also like to share,one or two sentences about the clients,that you typically work with this is,like smaller businesses larger,businesses yeah just,uh yes so we usually work with,existing businesses that,migrate to shopify,on woocommerce shopper or whatever,or with businesses who come,traditionally from a b2b space um and,who are dipping their toes into the d2c,world and just need their first job,rarely we work with real real startups,because that's usually,for them it doesn't make sense to work,with a with an established agency,because of the pricing,okay that's great and yeah as you know,today we wanted to talk about themes um,so you also do quite a few store setups,per month um so the question would be do,you guys have a favorite theme,yes um,so there are trends uh it's it's,actually quite quite funny uh from turbo,to prestige but now our favorite theme,is impulse um from archetype,um,the the story behind archetype is that,uh people who used to work for shopify,actually and um they really built the,themes,that you want them to build they they're,just awesome and they have good support,they've um they're,rather um fast in terms of performance,the themes they have a lot of um,features and they're usually,like right on top of the technological,curve what's possible with the themes,however at the moment because you you're,probably aware of that uh shopify 2.0,came out and with that um,shopify released a new standard theme,don,which really breaks records in terms of,performance and speed,and we don't see those numbers yet with,the um,paid themes,also not with imports,okay so yeah let me just wrap this up so,okay so you basically have,two favorite themes let's say impul
Congratulation! You bave finally finished reading Repos theme shopify and believe you bave enougb understending Repos theme shopify
No difficulty
