theme and app development have always been two different things on Shopify if you trace back to shopify's founding year the platform has always offered a selection of third-party developed themes but it wasn't until 2010 when Shopify launched the theme store that the platform invited third-party designers to submit their own Shopify theme designs for consideration 10 months previous to the announcement of the new theme store Shopify launched the API platform and App Store announcing that online Merchants can now develop and sell their own application themes are of course this section of your Shopify site where you'll find different versions of your online storefront but with liquid HTML CSS and JavaScript customizable through the online store editor and easily swapped into production by simply clicking the publish button apps on the other hand are located here and each have their own custom interface extending the Shopify admin and allowing us to create infinite possibilities on Shopify fi while there's nowhere for us to go in and edit the code directly here we know that these apps take advantage of shopify's admin API in order to programmatically affect the back end of our Shopify store and oftentimes the front end too but if apps and themes can both affect the front end how do we know for sure which features exist on which platform well in today's video I'm going to take a long overdue look at Shopify theme app extensions and together we'll learn how Shopify apps interact with themes since online store 2.0 so I mentioned that Shopify apps can programmatically affect the back end of our Shopify store but oftentimes the front end as well so how does this happen well before theme app extensions this was how it worked as it says here without theme app extensions apps use the asset API which gives them full read write access to theme files they then proceed to add and modify any number of files to get their app integrated into the theme of course the assets folder is not where we store HTML and liquid code so to actually get an element to appear within the theme code apps used to ask Merchants to copy and paste HTML code into the store as an additional step after installing the app as you can see here this is obviously problematic because while the app is clearly visible in the apps section of the store the HTML code that we insert in the theme is not and therefore even if a developer is to install it into a theme that developer would need to then make sure that the code snippet is lost in between themes and anyone new to the project would need to somehow know what Snippets are required and then be able to identify and locate them in the theme introducing theme app extensions now obviously I'm a little bit late to the party here covering this topic almost two years after it was initially released but as a theme developer it didn't really concern me until I was forced to solve an issue regarding an app on a client's website working with Shopify since 2019 I was used to doing the whole insert the HTML code snippet into the theme thing and I wasn't too concerned with this new feature when it came out but then when this issue came up I realized that the front end app functionality can be easily removed without needing to remove the app completely just via the theme editor I'm talking about app blocks and app embed blocks now with theme app extensions which covers both of these that code that would have been injected onto the theme is now stored within the app itself and we can bring it in as two Linux brains here as an app block or an app and bed block but rather than continue to flood you with all this theoretical talk let's actually create one of these apps ourselves and see how it works alright usually I start the videos in my development store which I do have here with test data Chris testing shop with test data so yes I have some demo products in here and yes you're going to need a development store in order to follow this tutorial or do what I'm about to show you but we're also going to need a partner's account and if you've created the development store you obviously have a partner's account and inside our partners account you can see we've got the menu item to take us to our list of stores but we've also got apps here and this is where our app is not really hosted but it's where our app will be managed within Shopify okay in our partners account and from here we can install it on diff different stores all right we also need and this is the third thing we're going to need in order to follow along today and complete this demonstration is Shopify CLI so as you can see I've scrolled down to the requirements here you're going to need node 16 or higher you're going to need npm yarn or pnpm this should be pretty standard having a Git Version of 2.28 or higher and you need to use Chrome or Firefox I believe this doesn't work on Safari I always use Chrome I recommend Chrome but you have Firefox there as an option as well I guess just don't try this on Safari I've never tried this on Safari but by the looks of things it probably doesn't work alright so obviously you're going to need your terminal I got mine right here and let me just check my versions of everything so I'm going to go node V to check my version and as you can see I'm running different versions on my computer here using node version manager I'm only running 12 at the moment which is not good enough so I'm going to run NVM use let's make this a bit bigger for you guys to see NVM use 16. and now if I type node V you'll see we're on 16.2 and then if I type in npm-v you'll see that I do have npm installed which is what I'm going to be using today and finally to check our Shopify CLI version I'm going to type in Shopify version and if you don't have Shopify CLI installed this will come back with an error but here you can see it comes back with the version number so this is the most recent or pretty close to the most recent version number at the time of recording so if you're in doubt about whether you have the latest version of CLI just upgrade to be safe all right so I'm going to hit clear to clear out those commands and let's get started creating our app so here in the documentation you can see sort of some of the steps I'm going to copy this right here to create an app Okay so I'm going to go into here run npm and knit at Shopify app at latest and it's going to say that it needs to install other packages as dependencies yep that's totally cool so I'll hit yes on that I'll fast forward through the installation of that all right so now it's going to ask me what my app project name is going to be I'm just going to call this theme app extensions test which template would you like to use obviously if you have a preferred programming language you can choose PHP or Ruby as Alternatives but node is the standard Choice that's going to create a node environment which we can write our app in JavaScript which is what I'm most comfortable with and what I recommend for you guys so just need to give it a little bit of extra time to load I'll fast forward through this again all right now you can see our app has been successfully created and we can actually CD into theme app extensions test here or we can run npm run generate extension to generate an extension and then if we want to run our app in development mode we can run this so there you go very helpful instructions there as this video is all about creating a theme app extension I'm going to run that second command so npm run generate extension I'll hit enter on that and I think I've missed a step here I need to first run CD theme app extension test sorry about that so I need to first CD into that directory looks like I didn't copy that correctly let me do that again copy that all right so now I'm inside that directory I should now be able to run npm run generate extension so that's going to start now it's going to ask me a few questions number one it's going to ask if I want to create this as a new app on Shopify remember when I went into my partner's account before and you saw this area for apps that's what it's asking here it's asking do we want to create a new app listing in our partner's account as this is a completely new app the answer is yes we are going to hit yes on that and now we're going to give it its name that will show up in our partner account so I'm going to call this theme app extension test hit enter obviously if you were to be creating a production level app you would name it whatever you wanted to name it and here you can see a list of options you've got checkout UI which is pretty new in Cutting Edge at the moment so I might do a video on that later but if we go up you can see that we can also create a theme app extension so I'm going to select number 13 and I'll hit enter on that and then this extension name is just going to be I believe the folder name of the theme app extension so I'm going to call this theme or should I call it app Theme extension it really doesn't matter it's just going to create the folder in our app with that name so hit enter on that and there we go we have created our extension in extensions app Theme extension okay now we can run it by running npm run Dev but before we do that I want to actually first have a look at the code so of course as always I'm going to use Visual Studio code for this and I'm going to use command o to open up a file or folder and I'm going to go into my desktop folder here and inside the code folder I can find theme app extensions test yeah that is the app folder so I'll open that one up and let's have a look at the code here yes I trust the authors let me close down that and then I'll zoom in a bit here so you guys can see more clearly and here you can see there is a extensions folder here and we've only got one extension which is our app Theme extension we've got our package.json file here which has all of our scripts so npm run Dev npm run build npm run generate which you saw before generated our extension deploy all that good stuff right so there's a few parts of it which I won't go into depth here but obviously we've got node modules and we've got this web folder so this is what the app is essentially so this is the main part of your app this is like the interface of it within your Shopify admin so once we install this you'll start to see some of this code coming through but in this video what we're mainly concerned with is how this app Theme extension is structured and how it actually affects your theme so as you can see inside here there's a few familiar names or terms here so we've got an assets folder here and we've got an image so kind of like a theme right pretty similar in here we've got blocks and if I go in here I can find liquid code pretty interesting huh if I go into locales I've got a locales Jason file just like I would have in a theme and in Snippets just like I would have in a theme I've got a snippet so this is basically just like a theme so if I expand this out it's actually taken some of the files that we would previously have to embed in our theme and we've put them in this extensions folder right now there are a few differences if we go into star rating I'll explain this in a bit but this schema here has some new stuff or has some different stuff to a standard section schema in Shopify I'll get into that in just a little bit and then of course you've got your configuration here that's stored in your tummel okay so we'll dive back into the code in just a second but I want to do what it asked me to do before which was to run that command in our terminal I'm going to hit control back tick to open up a terminal and let's run the terminal from within our project within Visual Studio code so here I'm going to run npm run Dev all right what have we got here okay if you get weird errors like this this is usually related to node so if I type in node V and you see I'm on 12 in this sort of instance of the terminal so I'm going to use NVM to change my node version to 16. it might sound a bit weird that we'd have different node versions on the same computer and switch between them but sometimes you actually do as a developer need to go back to an earlier node version which is annoying sometimes but it is necessary so that's why so if I run npm run Dev now it should work so I'll expand this out so you can see everything that's happening all right and if we haven't already we need to log into our Shopify Partners account through the CLI so I'm just going to hit any key like it's asking me to do here then I'm going to select the account that's associated with my partner account and as it says here I've successfully logged into the CLI I can now close this tab and return to my terminal this is consistent with the theme commands so the same way we would do Shopify CLI for themes authenticating into our partners account we do the same thing here for an app okay and now it's asking again if I want to create this as a new app on Shopify I don't know exactly why it's asking me that because it already asked me that in the past but we can go into here refresh and see if our app is actually in here no it isn't which makes sense we haven't actually run the app yet so go back into Visual Studio code and I'll hit yes create it as a new app giving it the name of theme app extension not sure if that was the same one we used before I'll hit enter on that and now I can choose which store that I would like to view this project I'm going to choose Chris testing shop 3 with test data hit enter on that and now you can see let's have a look all right a lot of stuff happening here but as you can see we've got our preview URL here which we can access just by hitting the key P here that'll open it up in a new tab and that'll give us our install link so we can add our theme app extension to our store by just hitting this green button right here all right so after a few seconds you'll see that we now have theme app extension in our list of apps over here and as you can see we've got this user interface right here within our app now where does this all come from I said I was going to go back to the code at a certain point and this is the point where I'm going to do so I'm going to copy that text right now and let's close down this terminal just to down here and then I'm going to search my project for where I can find nice work on building a Shopify app and you can see here it's in the web front end Pages folder I'll click into that let's go back into our directory here and you can see here that we have that page in the form of jsx which is basically how we write react apps for instance if I wanted to change this I could change this to hello worlds if I hit save on that it's going to Auto refresh and if I head back to our browser here you can see that text auto update now because this tutorial is about theme app extensions and not really about full-on app development I want to draw your attention to the part in the code not here in the web folder which handles what we see in that app section of our store but here in our app Theme extension folder all these different parts right so we've got our extension here we installed it before and we've got some demo code out of the box we can of course go in here and modify it as much as we want but let's run with the a demo code for now and because we've got this theme app extension code here we've got it in our project now all we have to do in order to be able to use it in our customizer and put it into an app Block we just need to go back to our partners account right over here let's refresh and find hopefully that newly created app in our list of apps here yep theme app extension if I click on that you can see just before I clicked on it there was one install on it which is the store that we just installed it onto Chris testing shop three actually we've got over here I'll just close that down don't need this anymore let's go over to our partners account click on the theme app extension app here and then I'm going to go into extensions as you can see here we've got our extension I'm going to click on that one and we're on a working draft at the moment I'm just going to hit create version and we'll call this a minor version and now you can see we've got our 0.1.0 version created so I'll just hit publish on that and now as it says here it is live okay all right so now that that's done we can head back to our store and if we're using Dawn the schemas in Dawn by default have app blocks enabled but if we don't have that I'll show you how to do that as well so let's head into our customizer right here and let's first create a standard app Block I think because I'm in an incognito browser that's why it doesn't like it all right one sec I'll just swap over to a non-incongnito browser all right so now that I'm off Incognito I should be able to access my store now there we go inside the customize I'm going to go over to the product page the default product template is fine and here you can see the standard Dawn product page template with the main product section which has all the little blocks here that we can rearrange and a related products section below I can delete this section to make it easier I'm just going to leave it in there and here under add section what I can do is I can add an apps section and this app section can hold our app blocks so I'll click on ADD section and if we've done everything correct up until this point underneath our theme sections if we scroll down to apps we can click on this to add in that block underneath this apps section right so it can be within this container section of apps or what we can do as well because as you can see here this is a star rating so it's kind of like a product reviews type system it's the default theme app extension that comes when we generate the extension what I'm going to do is I'm going to remove that section and instead up in our main product section I'm going to click add block and I can actually add that block that star rating Block in here so I can move it into a place that makes a bit more sense so scrolling up here you can see we've got our ratings which is always going to be zero no stars until we actually add the data for that so I'm going to hit save on that and let's have a look at the code and compare it to what we've got in our customizer okay so as we saw before this is all quite similar to Shopify liquid this is all this is all kind of mirroring Shopify themes but here you can see this folder that we don't see in Shopify themes and that's for our app blocks so as you can see this app Block here in our schema is called star rating and that's what came through on the front end when we added it either in its own apps section or here under product information so the code for this right here lives right here under blocks now even though this might look a little bit like a section with its schema and Shopify liquid up here there are a few differences most notably this right here which determines the target of the app Block so we can have a theme app Block like we do currently or we can have a theme app embed which I'll show you in just a second for a theme app Block it's going to be stored inside a section so the target is going to be set to section here okay so that matches what we have here on our front end it's inside a section that's what the Target Field means because this is a block and not a section you'll notice that we reference all the settings on this schema through the block object up here so just like working with sections and Shopify themes we can access the data by going into dot settings and then accessing the values of the different properties via its ID field and as you can see here the first setting is a actual product object and we're grabbing some meta field data off that product object which actually doesn't exist yet so we're going to create that in this video as well but here you can see the second setting is color right here which it's interesting we've got the English Australian spelling here and the American spelling here I don't know maybe it's detected my language and used the other spelling so a bit confusing maybe to the American viewers watching this but here you can see we've got our color setting right here and we're putting that directly into the style attribute of this span to change the color of the stars and just like Shopify themes we're rendering a snippet held in this folder right here which just generates the Stars right it also makes reference to this translation which is stored right here in your translations file and then this thumbs up button or thumbs up image I'm not sure where that's used but we're going to use that to demonstrate a point later in this video all right so let's head back to this this is the actual block code right here and the other thing I want you to notice right here is this is all pretty standard you'll see this in any Shopify section but what you won't see is AutoFill true okay so if I head back to the settings for our block here so if I click into it and look in the block settings you'll see that we can set the color here right and if I hit black on that and hit save it should change the color but I can also select a product object which is going to show the rating for now interestingly enough I'm not sure why this isn't working but the auto fill property that I just showed you what that does is it auto fills the product that we're currently looking at but in this case it hasn't done so so maybe I'll click over here to do Dynamic source and then I'll click product to use Dynamic linking instead but yeah using that auto fill attribute here it should have autofilled the product there by itself not sure why it didn't do that in that instance but with Dynamic linking we can simply just click on these to connect Dynamic source so hit save on that and it'll use the product object from the current page now all right heading back into the code I see here that you've got the thumbs up that's if the average rating is more than four okay so that's where the thumbs up asset that comes and as you can see here we can use the same asset filters that we use in Shopify themes right here to access Assets in this assets folder so hopefully you're starting to get the picture now that we're moving these files that would typically live in the theme and we're putting them in the actual app code itself and that's a bit cleaner because we can simply remove this app block from our storefront just using the customizer and that code and all of its assets locales and Snippets will be removed as well it's a cleaner solution but it's kind of weird that we've got liquid inside of an app rather than on a theme now I mentioned up here we've got this meta field here which hasn't actually been created yet if we were to build out this app we could program the app to create this meta field but for us we're just demonstrating app extension so what I'm going to do is just create that meta field within our store so I'm going to go back to here we talked about meta fields in the video before the last one so check out that one if you need to know more about meta Fields I'm going to go into custom data go into products here and you can see the creators meta field that we created in the last video and now let's create a definition that matches exactly with the namespace and key of what's in our code so metaphors dot demo dot average rating okay so let me grab that head back over here instead of the custom namespace we'll use demo to match exactly and I'll just call this product reading we'll give it a type of integer single value the star rating system starts at one ends at five so let's put that in as as our validations all right so put that in there now if we go to our product page what was the product we were looking at beforehand I'll open up the customizer in a separate tab here head to products default products and it was showing the multi-location snowboard so let me look this one up the multi-locations snowboard right here if we scroll down we should be able to see that meta field Now product rating and in here I can give it a reading between one two five I'm going to put in four all right and then if we open up this page no it's actually opened it in the admin I'll hit preview one extra step to get it on the front end you can see here that we've now got four stars coming through and that's where our thumbs up comes up saying recommended product if we look inside the code you can see that coming through here if average rating is equal to or greater than four then show that thumbs up with the text coming through this translation so hopefully you guys understand translations essentially we can use this path here to look up so if I go over here and I'm gonna have to click on it first and then click here to split right let's have a look at them have them both here and then split that one right close that here you can see if we go into ratings home which is the next step and recommendation text that's where it comes through okay so for those of you who needed a quick refresher on the translations all right so that's pretty much a normal app Block that goes into a section but we also have theme app embed box what are they let's demonstrate that now all right for this next and final part of the video I'm going to start you guys off here at the theme app extensions framework page of the official Shopify documentation and as you can see here the file structure that we just discussed all the information is here about how to structure your theme app extension it talks about app blocks as you can see here it gives you examples shows you where this goes in your theme pretty good documentation right here but I want to draw your attention to this particular part which is the app embed blocks what separates this type of block from the standard app Block is that they either don't have a UI component or that they do but they're designed to float or overlay over existing elements as you can see here we create these sort of app blocks by setting the Target in the schema to head or body maybe it's just a bit of JavaScript or some CSS we can add it to the head or we can add it to the body we can turn off these app embeds through our customizer via theme settings inside app and Beds which I will show you a little later alright so if we scroll down here you can see this sample code right here right here you can see this will float something in the bottom right corner so I'm going to grab this app embed block code and then I'm going to go back into my customizer here and inside blocks let's just call this floating image dot liquid and I'll paste in that code now as you can see here it's making reference to a kitten dot JPEG file that's in our assets folder that doesn't currently exist so let me just change this to thumbs up instead just to keep this simple and use existing assets that already exist in a app extension already all right we can give this settings just like we did for the other block but here you'll notice in the Target we're setting this to body so this is just going to inject it somewhere in the body so this is for floating elements or JavaScript or stuff that doesn't go into a particular spot inside the existing HTML structure unless of course it is floating which is what we're demonstrating right now all right so if I save on that let's see if we can now view that in our app so I'll refresh the customizer we might actually need to publish a new version of the app but let's just check this first if we go into app embeds yeah so you can see here the space where we usually look at our app embeds just under theme settings actually not in theme settings but just under it but in order to see it we're going to have to go back to our partners account here and create a new version it's a new minor version we've added a new app Block and we can publish that new version like such Okay then if I go over here and I refresh hopefully we'll be able to see this now in our customizer and lo and behold you'll see we've got our app embed here doesn't have any customizable settings because we haven't set any and if I toggle this on and hit save now if we scroll up and down the page let's open this up actually that's going to open up the whole theme I want to view this particular snowboard so I'm going to click that to view this particular product page that's going to take us to the admin page unfortunately but then we can just click preview and then it'll show us here all right so I'm going to hide this bar and as you can see we've got this thumbs up floating on the bottom right okay if I right click and inspect that sorry that's coming off screen but I just right clicked on it and then clicked inspect you can see here that we've got code for a Shopify app Block floating inside our body in between our body tags if we dive deeper into here you can see the exact code that we wrote here in our liquid making reference to that thumbs up and utilizing these Styles we could also add settings here and if at any point we don't want this showing up on our front end alongside our app we can actually let's go back over here instead of updating it here we're going to go over to app embeds and we can just toggle that off I'll hit save on that and now you can see that that's gone so why is this important why am i showing you this well this is important even if you're not an app developer if you're more of a theme developer like me this is important because you need to know how these apps are interacting with your theme this whole app embed thing for instance flew under the radar with me until I saw this in my theme and had to switch some off and on and I was like how does this actually work and that's what motivated me to dive deeper into this and it's important especially for those of us who haven't been used to this in the past we've been used to going into our theme code and manually installing that app code it's important for us to note now that that code has now been moved and the benefit of that code being moved into our app code right here in these different block files is that we don't have to look for them within our theme we don't have to try and remove these app files when we want to uninstall the app we can actually just go in here and click remove block or turn off the app embed depending on what type of theme extension it is and perhaps more importantly we can toggle it on and off with ease add customization settings as you can see here this app embed doesn't have any customization settings but you can see here the star rating does we can actually go into our admin and change stuff like this which gives us obviously powerful functionality that previous to app blocks wasn't available to us but something that we have been used to with Shopify sections for a long time there's only two downsides I see to having this theme app extension code inside the app itself and that is number one we can't actually edit it as theme developers so if we're using a third-party app the code is going to be hosted on the app developer's own servers which brings me to point number two as a downside is this code because it's not hosted on shop fi needs to be hosted somewhere now if you're not familiar with app development you need to be able to host the app code somewhere you might be mistaken for thinking that we're hosting this on Shopify but we're actually creating a development server right here and tunneling it to our app in the partners account let me show you that right now hopefully this isn't too complex for you guys but if we go into app setup in our app you'll see here that these are just tunneling addresses and what I mean by that is we're still running the server on our local computer which isn't sustainable for production and what I mean by that is if I just went here and I hit Q to quit the whole running of this app and then we went back over to here and we went back to our store right here you can see we've got ratings there let's say we haven't removed it from our store yet let's refresh or perhaps refresh over here the good news at least is that the theme app extension code stays on your store but if we were to go over to the app page itself so if I go into Apps theme app extension you can see that this now is broken so that's good at least the theme app extensions themselves still get saved on the store but if we're not running our local development server then we're not going to be able to get this so if you actually are running an app where you want a user interface here then you're going to have to host that app code somewhere but obviously as theme developers we don't have to worry about that as theme developers the downside is that we don't actually have access to this code so whatever customization options the app developer gives us here is what we're limited to so hopefully the app developer has made it very customizable for us otherwise we're Limited in terms of theme developers without access to this app code in what we can do to affect these widgets alright guys that's it for today's video if you want to learn more about Shopify development check out the resources in the description box below and I'll see you on the next video