How to add Shopify Theme App Extensions (For Developers)

How to add Shopify theme app extensions for developers

Hello everyone, welcome back to another video. I hope you all are doing great and are having an amazing and absolutely incredible day

I bring you back with yet another video and in this video I'm going to be telling you how you can get started with theme app extensions on your Shopify in the most simplest way

So without further ado, let's get straight into this video. Now over here, theme app extension basically allows merchants to easily add dynamic elements to their theme app

without having to interact with liquid templates or code. You can start building theme app extensions with your Shopify CLI that you have

And building of them is mainly for developers. Like if you're not a developer, then I would not prefer that you would go with this

because it is a pretty difficult process to go through. But yeah, what you'll learn with this is that after you've finished the tutorial you have accomplished

you know, creating a theme app extension, reviewing the theme app extension, testing the theme app

extension, adding onboarding instructions onto your app, deploying, and releasing the theme app extension

Now, the requirements for this is you have a partner account, okay, and you've created a development

story that uses generated test data, and you've created an app that uses Shopify CLI 3.0 or higher

and you're going to make sure you have themes such as Don and stuff, you know, the Shopify 2.0 themes

Anything other than that will not work, and you've installed a project dependence. like Ruby and Bundler, and you understand the theme app extensions framework

Now, to start things off, you are going to go to the Shopify CLI

So I'm going to write Shopify CLI over here. And this is basically Shopify CLI for themes, which is for Shopify developers, basically

So what you're going to do, you can also get Shopify CLI in your apps as well

So you can go into your apps, go to your Shopify App Store. And once you go to your Shopify App Store, you can simply search up CLI

And once you search up CLI it gives you you know different theme accesses if you want to go with this But you can also simply go with CLI which is a command line interface that helps you build Shopify apps and themes

Okay. So basically to get CLI, you can go with CLI for apps

You could go with CLI for themes. And you can obviously get it through the GitHub integration and all

Or you can install Shopify CLI from here. So to install Shopify CLI, you could use it with

Node.js, you can use it using Git, Bundler, or Ruby, you know, whichever installer you want to go with

So the most, that would make sense, would be either Node.js or just using Git because Git is also a

pretty trusted one. So you're going to go ahead and download this. If you have Windows, just go download

for Windows. Make sure it's 64-bit. If you have a 64-bit system, and once you do that, it's going to take you

into the installation process. And as you can see, it's not too big of a file

Simply 58 megabytes. So we're just going to wait for that to download

And as that downloads, obviously, you're going to run a few following commands that I'm going to show you. Okay

So to, you know, use Shopify CLI to generate a new extension for you that you can

obviously add into your Shopify. You're going to navigate to the directory of the app that you want to add your extension to

And you can run the following commands to start creating the extension like NPM

and run Shopify app generate extension. And you can select theme app extension as the extension types

You can provide names for your extension, and you should have, you know, different extension directories as well with metafield definitions

like area of products, namespace of demo, key of average rating, and type integer

So you're going to create different meta fields definitions for yourself for, you know, your coding and all

And again, the reason I said that this is for developers is because it uses a lot of code

and the code is really necessary for this. So I'm going to go with that and click on Run

And here you obviously going to install the proper you could say interface for the GNU that you have So I going to go ahead and click on install And here you can see it says it removes the previous Git versions that it has

And you're going to set up the Git installer for your Shopify, CLI

So just go ahead and add that. And once you've added all of that, let me show you the line of code that you're going to want to follow

So basically, this code over here is what you're going to get

So basically, you're going to create a new extension for yourself where you're going to use Shopify CLI to create new extensions

And once you use Shopify CLI to create new extensions, here it's going to give you, you know, navigating to the directory of the app that you want to add to your extension

Run the following command. As I told you, NPM run Shopify ad generate extension right under the NPM section

And once you've added the NPM section for yourself, it also says provide a name for your extension and all that

And once you've done all of that, it gives you the different areas of products, these namespace demos and all

You can also preview your theme app extensions where you can preview your extension by running the dev command

which starts a local development and server that supports hot reloading. The preview is available for you, and it's really easy to get your head around it

and you can navigate to your app directory where you can run one of these commands like NPM run dev

which basically runs the developer. and then moving on. You can also specify which theme you want to host your theme app extension in using the theme ID or name

And if you don't specify a theme, then the command will upload Don as the example theme to your dev store

So you just follow all these instructions. You can just go to Shopify.dev and go to theme app extensions to see all of this

So then you're going to test your changes where you're going to verify that your app looks and behaves correctly

by testing your changes on a theme in your development store. and in your development store, go to an online store 2.0 theme and navigate to the theme editor

where you can follow the procedures for adding app blocks, activating app embedded blocks

verifying that the app behaves as expected and you can verify the following like app embedded blocks for floating components of you know position properly without obscuring page content

You can use the theme editor to activate and deactivate your app which embedded your blocks and configure their settings

You can use the theme editor to add, remove, and reposition app blocks and configure their settings

and different app documentation to help your documents. So you can also provide instructions

for what merchants need to see and do after, installing your app deploy and release the extensions get the tips for your different builds navigate

to your app directory run these following commands release different apps for yourself and you should

basically be good to go when it comes to the coding bit of all of this so just follow these steps that

they've given on the whole proper Shopify official developer section blog and if you follow all those

steps trust me you're going to be good to go with all of this so that's the general idea of how

you're going to work with your basic, you know, Shopify theme editor and now you're going to add

theme extensions for yourself using the theme app extension. And again, if you're not a developer

this might be difficult for you because you're going to need to have to download a few things

Like, as I showed you, Ruby, you're going to need to add bundle, Git, and all these different

code editors to, you know, use this for yourself. So once you do that, you should be good to go from

there. So I hope this tutorial was extremely helpful to you and if you need any more videos like

this, please do tell me I am always available and I will give you the easiest step to step

guides for any type of videos that you demand. And if you have any queries regarding this video

you can let me know down in the comments and yeah, I guess I'll see you next time. Before signing

off, please like and subscribe to the channel and leave down a

nice comment if you watch the video and please don't forget to share this video with any of your

friends in need or your family and I hope you all have a great day so until next time I'll see you

later and goodbye