Shopify app extensions are a unique way to create an app that is hosted on Shopify itself! Follow along to create your first app extension in just a few minutes. Just make sure you have the Shopify CLI installed and a Shopify partner account created.
Code: https://github.com/ndrishinski/extension-app
Prefer Video?
Enjoy, otherwise read on!
Create the App via CLI
First, open your terminal to a directory of your choosing and run shopify app init. This will prompt you with a couple of questions.
Give your project a name, and select ‘Start by adding your first extension’.
Now you can ‘cd <name of app> ‘ in the terminal and open your newly created app.
Deploy App to Shopify
Now that we have the skeleton of our app, the next thing we want to do is to deploy this app to the Shopify partner dashboard. To do this, we’ll run ‘shopify app deploy’ within the newly created folder.
When prompted choose an organization, select ‘Yes, create it as a new app’ and give it a name. You will also choose ‘Yes, release this new version’.
Now if we navigate to the Shopify partner dashboard -> Apps, we should see our newly created app!
Install on a Shopify store
Now that our app is on the Shopify partner dashboard, we want to actually install it on a store. To do this, click into your app on the partner dashboard and then select ‘Choose distribution’.
Next you’ll be prompted to choose Public or Custom distribution. If you are adding your app to the Shopify app store than choose Public. If you are just testing or creating a custom app, choose Custom.
Next type in the store domain that you are adding this app too. eg. my-shopify-store.myshopify.com
Then click ‘Generate link’. This will create a download link that will give the merchant access to install your app for a few days. Open the link and click ‘Install’.
Now after clicking install, you should be able to navigate to Settings -> Apps and sales channels where you will see your custom app.
Generate the app extension
Now that we have successfully deployed and installed our app ‘container’ , we can generate the actual app extension UI piece. Back in the terminal within your app, run ‘shopify app generate extension’.
Select the organization, and this time select ‘No, connect it to an existing app’ and select the app we have already created. When asked for the type of extensions, we are choosing ‘Theme app extension’ and then give it a name.
Now if you look at your codebase, there is a new directory under the ‘extensions’ folder. This is where your extension UI’s are stored.
Re-deploy our App with the extension created
Now we can simply redeploy our app, now that it contains the extension UI folder. Run ‘shopify app deploy’ again from within the directory. First choose ‘Yes, always’ to include the shopify.app.toml config file, then choose ‘Yes, release this new version’.
Now if we navigate to our store, and open the customizer and navigate to the product page, we should be able to add our new app extension.
Conclusion
This should give you a starting point to creating your Shopify hosted app extensions! Please let me know what you think and stay tuned for more Shopify related content.