okay so welcome back to alpha web design,in this video i want to talk about theme,app extensions and why it's very useful,for you to use them and why shopify,actually requires you to use,theme app extensions if you want to get,your app installed and if your app uses,script tags so without further ado let's,jump right in alright so the first thing,that i want to show you is this email,that i got from,shopify,that i received once i submitted my app,to their app store and once you submit,an app you your app will get reviewed,and then,you will get this email from them with,all of those steps that you have to,improve within your app so it's a very,long list that i got here and i will,show the app to you just in a second but,i want to point your attention to,this point right here,um where they say my app is currently,using script tag api and that i will,have to update my app to theme app,extensions um to ensure compatibility,with the online store 2.0 themes and,so this means that if your app uses,script tags,then,if your app only uses script tags then,your app will not get submitted right it,will not get accepted so you will have,to use those theme app extensions,and uh so this means that it's a pretty,big deal and you have to use it but it's,really not quite um easy to install,theme app extensions i definitely had a,hard time using them and but i just want,to give you an overview of what they are,um,how they how they work a little bit and,yeah so that's the,purpose that's the purpose of this video,all right so,let me just go over here that is the app,that i try to submit which is very very,easy it's just you know it's just an app,that would animate uh the byte now,button and uh you know you're gonna have,those different,animations here,so really,very very basic,all right you can have that heartbeat,whatever you can have it you could have,it in an interval or you could uh,animate it when it's hovering all right,so let me just put it to,shake horizontal let me save my changes,and if i go over here,to my product detail page you can see,that it's just you know it's just,animating and the way this works is if i,go to the developer tools if i go to,network and reload the page then you,will see all of my scripts,um,filter out,the scripts and,it should be here somewhere yeah so that,is my uh,javascript file,that,just,what it does is just it's looking for,this uh app button and then applying,that animation in an interval so really,nothing nothing fancy at all,and uh yeah you can see it here,and that's it so,i'm using the,w theme right here,and um,the problem with those script tags i,will show them to you right now because,if i go to,the home page,and i'm also looking for my scripts,right here i can see,that the animate.js,is still loading,even though i'm on the home page but the,only thing that my animate js is,actually doing is it's looking for this,buy it now button,and that's that's it so it doesn't do,anything else it's just looking for the,buy now button
Let's move on to the first section of Framework theme shopify
Shopify Hydrogen and Oxygen
Shopify Hydrogen and Oxygen
hey everyone jan here codingwithyen.com,so hydrogen 1.0 and oxygen are both,brand new and have just been released to,the public,and if you guys are curious right now,today we'll go over what they are why,and when to use them in the first place,and also how to practically get started,and i really hope you find some value in,this so let's have a look alright so,then let's get started by answering the,what and besides being the most common,element in the entire universe hydrogen,is also a react-based framework for,building custom shopify powered,storefronts,and assuming that you roughly know what,react is and you roughly know how,shopify works the question would be what,is a custom storefront and just to catch,everyone up here really quick the way,that shopify websites are usually,structured is that on one hand we have,the back end so that's where we manage,products pages content,we have our orders payment settings and,so forth,and on the other hand we have the front,end which is usually built by using a,theme yeah so this is like the actual,website that visitors would see,so that's where we showcase our products,and we could say that a theme is kind of,like the interface between website,visitors and then all these ecommerce,features okay now in most cases when,people are getting started this,combination of backend and then a theme,works perfectly fine but there can be,certain circumstances where a theme is,just not enough,and we will get into the why here in a,second but for now just imagine that you,would want to sell groceries through a,smart fridge,like where would you even start using a,theme in that case right doesn't make,any sense so here you would need,something custom coded namely a custom,storefront,so that's pretty much the whole concept,you have a custom place where you want,to showcase your products but you still,want to use the shopify backend features,like managing inventory orders payments,because it's like so much easier to,leverage this existing infrastructure as,opposed to building everything from,scratch,and the way you connect these two and,how you exchange data is just through,the shopify api,alright now to be fair the smart fridge,was a pretty obvious example of why,someone would need a custom storefront,and you could make the same case for,in-app purchases or in-game purchases,where using a normal theme just wouldn't,make any sense right,however in the beginning we said that,hydrogen is a react-based framework and,react-based websites,look at least somewhat similar to normal,websites you could build with a theme,and at first glance you might not even,be able to tell the difference between a,theme-based website or a react-based,website so let's talk about some of the,reasons why you might want to consider,using hydrogen in the first place and,when i think about this three different,areas or three different things,immediately come to mind,so first let's touch on theme,limitations or to be more precise,performance,i guess that'
After seeing the first section, I believe you have a general understanding of Framework theme shopify
Continue the next second section about Framework theme shopify
Build a CUSTOM Shopify Storefront using Hydrogen ( a React-based framework) #shopifyPartner
Build a CUSTOM Shopify Storefront using Hydrogen ( a React-based framework) #shopifyPartner
hello everyone and welcome to this video,in which i'm going to show you how to,make your shopify website fully,customizable,that's right you no longer have to use,the template with a little bit of coding,know-how i'm going to show you how to,take a demo template and explain how you,can change the styling or components you,can switch out components and move them,around or add in your own components,that you can make and add to the,repository,this is all thanks to the hydrogen plus,oxygen or in other words the shopify,stack for headless e-commerce,by this i mean you can build headless,storefronts with a react-based framework,for shopify you're essentially supplied,with pre-made components that you can,use as well as utilities that map,directly to shopify's apis,so that part is all hydrogen at work and,once you're ready to deploy your site in,comes oxygen,shopify's global hosting solution that's,just a simple git push away,okay so this is going to be a super fun,video as this is a cool feature from,shopify that i personally am excited,about and can see why it's so super,useful to small business owners and,entrepreneurs out there it also allows,us as devs to cut out creating a whole,ecommerce backend as we can simply,create our own front end and plug it,into shopify's existing system,as prerequisite and understanding of,react and javascript is advised but if,you don't know this please feel free to,follow along anyway as i will be taking,things step by step in order to show you,how to customize a shopify storefront,okay so what are we waiting for let's do,it,okay so let's do it if you use the link,in my description you will be taken to,the hydrogen shopify developer page in,which you can find all the documentation,and the command in order to start your,demo store,okay we are going to be starting with a,demo store just because then we have a,template to work with for our short,front and it will just help us kind of,get an idea of how everything should,work and will show us all the components,that have been pre-made for us as well,so that is what i'm going to do but,first off i want you to go to shopify,and actually you know add some products,to your store because we are going to be,using that back end in order to get,those products and put it on our,customized front end,so let's do it just go ahead and go to,shopify and sign up for free now i've,already done this so i'm simply just,going to log in of course,and go to my dashboard,so here you will see i have made a store,before i'm just going to create a new,store so we can do this together step by,step,so go ahead and select create another,store or create a new store whichever,option you are on of course for me it's,another store,now i'm gonna call my store what should,we call it well my products are skin,products so i'm gonna go ahead and call,my store skin sensationals,so that is just something i have chosen,of course like please feel free to pick,your own and if you're just running this,through as a
After seeing the second section, I believe you have a general understanding of Framework theme shopify
Continue the next third section about Framework theme shopify
11 - Shopify Theme Assets, SCSS and JavaScript Managment
11 - Shopify Theme Assets, SCSS and JavaScript Managment
hello and welcome in this video you will,learn about how Shopify manage,javascript CSS and images also you will,learn about asset management so if I,open the asset directory here we talked,about this one in the previous video too,but in this video I will talk in details,how you can write CSS sass joy script,and images how you can upload them so,here is your directory called assets and,you can check out this there is an image,called gif also I am running the team,watch in the background so whatever,changes I bring it will directly upload,to my server to my shop so this is an,image you can put all your images that,are like static images you can write,them in you can put them in acid,directive also you have a gift card dot,J's it is easy it is just a directory,file and you can understand this one,whatever religious to the gift card and,if you open the other file which is,called gift - car this is the liquid,what is this one this is not a CSS file,nor it is satisfied what is this this is,a liquid file but inside this one you,can write sass file if you know if you,are familiar with sass or CSS processor,like this is preprocessor language if,you don't know just give it a google and,see how it is going to work basically it,is like CSS but it will extend the,functionality of CSS you can write loops,you can write variables inside this and,it will make your life a lot easy but,browser does not know this so make sure,like you cannot write sass file and,instead of CSS you should compile them,so how this compiler is software we will,learn in this video so whatever you,write in this file it is going to be,pushed to the server as a liquid file,but shop for will understand it that,this is our sass file and it will,compile it based on the extension you,give it for example if I create a file,in this directory called app dot s,css.show file will operate that one but,it will not compile it for you it must,have the extension of liquid and see,this inside this one I can,liquid code I can write CSS code like I,cannot SAS code I can write classes I,can write anything here and this is,going to be handled by Shopify as soon,as they upload it to the server you can,check out a did upload and now I will,come to my team here as soon as the,object is gone to the server it is going,to cash it for exam as I said you cannot,write like SAS for the browser once it,uploads through the server or through,the your website it will compile it to,CSS and it will cache it for you and the,browser that's why every time you are,writing something and you might expect,that everything works fine and you,refresh your page and everything is not,working it's because it should compile,it that will take a little while for,compilation and it will cache it for you,every time it will not compile it that's,why it cache value for example if I come,in this file and scrolling down list,being a small changes I will say body,background should be if I check see the,keyboard shortcut sometime work with,sometime
After seeing the third section, I believe you have a general understanding of Framework theme shopify
Continue the next fourth section about Framework theme shopify
Apollo Shopify Theme Framework 2.0
Apollo Shopify Theme Framework 2.0
hello there is upload theme here it's,our pleasure to introduce to you about,the Apple Shopify framework 2.0 let's,have a look,the theme is fully responsive no matter,what devices you use PC tablet or,smartphone is their loss beautiful add a,new screen size in order to fully,support Shopify ization functions now,you can move your cursors to drag and,drop any block components to change the,layouts in any way you want,we also provide many essential velvel,sessions in our theme on fact and ready,to be used without requiring any coding,skills your storefront is powered with,html5 css3 as a SS fund awesome Twitter,boost rs3 and even more to come,powerful mega menu options of a,futuristic look and polished the way you,deliver information the menu is viewport,adaptive as well mobile time mode,activate immediately when you are on,your tablet or smartphone navigate,quickly between several products with,quick view create your own product,collection with a wishlist system,and by linking to wishlist we want,you to manage and track all products at,once should act compare is another,feature that we developed us integrated,into the themes core give you an hour,view and make comparison of several,products at the same time you can also,share the list to Facebook Twitter,Google+ or Pinterest as well,arrange your product information in many,tabs with separate titles and contains,the theme supports up to find,customizable tabs enable you to write,any kinds of contain related to that,product smart shopping cart provides an,intuitive way to revise your product,purchase with a simple click you can,view your added products change quality,or check free shipping conditions all of,them stay in place and is up to you to,choose filling confused and lost when,searching to Ducks sidebar theater is,here to the rescue you can classify any,products based on our criteria it can be,as distinguished as the categories,product vendor - duck type or even by,size price color,by creating new design pattern and,structure you are now able to select,color variance right on the home page,and see it clearly the result is updated,instantly and changed along with the,color you are clicking highlight to deal,in a stylish way with upload she does,power down float mode attaches hitter,and top bar to the top so they always,stay unchanged therefore you can still,navigate to another page at any part of,a web page especially useful when,scrolling Facebook Twitter Pinterest,whatever it is you can like share and,tweet with your preferred social network,are promoting yourself with our social,widgets come with abundance of snippy's,the Apple or short posts for various,type of avenues for you to choose from,this can be button accordion slideshow,or even Facebook link youtube videos and,Instagram fees shortcode is viewed with,comprehended structure you can use them,easily with no coding skills required,your storefront can be translated into,as many languages as possible depend on,your choice by installing o
After seeing the fourth section, I believe you have a general understanding of Framework theme shopify
Continue the next fifth section about Framework 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 fifth section, I believe you have a general understanding of Framework theme shopify
Continue the next sixth section about Framework theme shopify
How To Use Javascript in Shopify Themes
How To Use Javascript in Shopify Themes
hey guys is your boy joe back at it,again codingphase.com in this video we,are going to be talking about,how to use javascript in your shopify,themes okay,now this is part of the course shopify,theme developer which is pretty much a,bundle of courses that teach you,everything that you need to know about,shopify okay i've already taught a,couple of the basic stuff inside of the,shopify theme development course now we,have the shopify online store 2.0 which,is basically a continuation of this,course,but with all of the new features and all,of the new ways of creating themes in,2021 2022 2023 2024 2025 okay so pretty,much everything that you're gonna be,seeing in the ecosystem shopify is,inside of this course okay so let's get,started by taking a look at this theme,that we are creating now this theme is,basically like a,child theme or a copy or like a starter,from the dawn theme that was released by,shopify which is open source which,allows us to use their their code and,use what they have already created um,but basically if we look over here this,is what shopify is using okay and this,is the cart.js,and this is what controls the cart,system okay now in here if we take a,look we can notice that they're using,class based uh components right and we,could say these are actually custom,elements now for those of you guys that,have never seen this before uh think,about this this is like react components,but natively okay with the browser okay,this is all part of vanilla javascript,like you don't need a framework to do,this again you can literally go in on,mozilla and check this out okay you,don't have to use webpack you don't have,to use any of that you can just write,your javascript and pretty much define,some custom elements okay,a few years ago i actually went in and,created a course on polymer and we,talked a lot about this uh because you,know in the future or supposedly in the,future uh we were supposed to all be,using,custom elements okay did that happen i,don't know some people use it some,people are too comfortable with react,and viewing angular okay so it's gonna,be hard for for people to take away,their their front-end frameworks even,though the you know the the browser can,already do a lot of the things that we,use frameworks for now why does shopify,decided to go with this route well,actually it's very simple the main,reason is because it just makes your,website way faster okay,now imagine this if you are using,something let's say like react right and,you are using,i don't know,some library out there like some,component library uh like let me show,you guys an example,like this one materialize i see a lot of,people that use materialize shout out to,chris shawn who love material ui okay,but if you're using this type of of,libraries right uh you're downloading,not only this component as a dependency,but then you also have react as a,dependency that you have react dom as a,dependency then you have whatever,dependencies that this material ui needs,
After seeing the sixth section, I believe you have a general understanding of Framework theme shopify
Continue the next seventh section about Framework theme shopify
The State of Shopify Theme Development
The State of Shopify Theme Development
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
After seeing the seventh section, I believe you have a general understanding of Framework theme shopify
Continue the next eighth section about Framework theme shopify
How To Build A Theme From Scratch
How To Build A 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 s
After seeing the eighth section, I believe you have a general understanding of Framework theme shopify
Continue the next ninth section about Framework theme shopify
How to add theme app extension in shopify. its really simple.
How to add theme app extension in shopify. its really simple.
hi friends,hope everyone doing good as you know,recently shopify released a lot of new,features,so today we are discussing one of the,new feature called theme app extensions,before starting i just want to share few,points with you guys,theme app extensions are fully working,with online store 2.0 themes,let us see what are the new updates in,online 2.0 themes have,the new theme architecture earlier you,could only add sections to the home page,now you have the option of adding,sections to each new page,theme app extension with app blocks,another highlight is app modularity,this simply means that as a developer,it's now possible for you to add or,remove ui components through the theme,editor,file picker liquid input settings,which you can add custom liquid code to,pages from the editor itself,the theme check is an integrity checking,tool to scan for errors in liquid files,so these are the new updates in online,2.0 themes have,online store 2.0 features are available,on only development stores created after,june 29,2021 so let's create a store first,for that you need to go to stores in the,shopify partners account,and create a new one,now you can see that don is the default,theme,just go to new directory and create a,new app,then create a extension for the app,here getting started flag gives you with,the sample codes,let's install the app in a store first,ok now got installed,let's open the app in editor,let's run our app first install the app,in your store,yes we got installed now move to the,extension code,here you can see we have already some,sort of files in it,let's test this get started code,for that you need to push your code,shopify extension push command will,execute this job,before that we need to register the,extension with our app,yes we successfully pushed our code,let's check it in theme now,before that you need to enable,development preview in app extension,menu which is located in app settings,now let's go to our theme customization,in add section you can add your custom,section to anywhere in the page,here you can see two types of blocks one,is app block which we are already gone,through,the other one is app embed,just click the this button to enable the,app embeds feature,you
Congratulation! You bave finally finished reading Framework theme shopify and believe you bave enougb understending Framework theme shopify
No difficulty
