Build an Extension-only Shopify App in 10 Minutes!
Table of Contents
- Introduction
- Creating an Extension-only Shopify App
- Generating the First Extension
- Testing the Extension
- Configuring the Shopify Partner's App
- Setting up Gadget
- Connecting Shopify and Gadget
- Reinstalling the App
- Restarting the Extension
- Conclusion
Introduction
In this article, we will guide you on how to set up an extension-only Shopify app to work with Gadget. We will provide step-by-step instructions for creating the app, generating the first extension, testing it, and configuring the Shopify Partner's app. Additionally, we will cover the process of setting up Gadget, connecting Shopify and Gadget, reinstalling the app, and restarting the extension. So let's dive in and get started!
1. Creating an Extension-only Shopify App
To begin, we will show you how to create an extension-only Shopify CLI app. This involves using the "yarn create Shopify app" command and accepting the default name suggested by the CLI. We will also explore the options of starting with Remix or adding the first extension.
2. Generating the First Extension
Once the app is created, we will guide you through the process of generating your first extension using the "yarn generate extension" command. We will explain how to select a partners organization and create a new Shopify app. We will also cover the different extension types and how to write the extension in JavaScript React.
3. Testing the Extension
After generating the extension, we will demonstrate how to test it to ensure it is working correctly. We will show you how to select a store and install the app. We will also highlight the importance of checking the dev console to verify that the app is properly installed and functioning.
4. Configuring the Shopify Partner's App
Next, we will provide instructions on how to configure the Shopify Partner's app. We will explain the purpose of the shopify.app.toml file and how it is used to manage scopes. We will guide you through the process of enabling the OAuth flow for managing installs and show you how to push the configuration to your partner's app.
5. Setting up Gadget
Moving forward, we will focus on setting up Gadget. We will walk you through creating a new Gadget app using the Shopify app template. We will explain the steps involved in connecting your Shopify app to Gadget and selecting the desired Shopify API scopes and data models for your app.
6. Connecting Shopify and Gadget
Once Gadget is set up, we will guide you through the process of connecting your Shopify app to Gadget. We will show you how to copy the client ID and secret from the Partner's dashboard and paste them into Gadget. We will also cover the steps of adding the Shopify product model to your app and updating the app URL and redirection URL.
7. Reinstalling the App
In this section, we will explain the need to reinstall the app after changing scopes. We will demonstrate how to update the app through the Partner's dashboard, allowing you to see the embedded admin app in Shopify.
8. Restarting the Extension
Once the app is updated, we will show you how to restart the CLI app that houses your extension. We will guide you through the process of copying the extension URL and pasting it into the Gadget app to ensure the admin extension is running properly.
9. Conclusion
In conclusion, this article has provided a comprehensive guide on setting up an extension-only Shopify app to work with Gadget. By following the step-by-step instructions, you can successfully create and test your app, as well as configure the Partner's app and connect Shopify and Gadget. Now, you are ready to start building your application for Shopify. Happy coding!
Creating an Extension-only Shopify App to Work with Gadget
Today, we will walk you through the process of setting up an extension-only Shopify app to work with Gadget. This tutorial assumes that you have already created your Shopify Partners app through the CLI. If you have manually created your partners app and have already set up a connection to Gadget and only want to add extensions to an existing app, you can skip the initial steps and follow our pre-purchase checkout extension tutorial.
To start, we recommend opening the video description and following the link provided for the pre-purchase checkout extension tutorial. This tutorial will guide you on setting up an extension app to work with an existing gadget application.
Now, let's begin by creating an extension-only Shopify CLI app. Open your command line interface and enter the command "yarn create Shopify app". Accept the default name suggested by the CLI, in this case, "efficient-venture-app". Once the creation process is complete, open the app in a code editor like VS Code to examine the default template.
The template is quite minimal, with only a few configuration files to start with. We will need to make changes to the "shopify.app.toml" file later on but for now, let's focus on generating our first extension. In your command line interface, navigate to the app directory and enter the command "yarn generate extension". Follow the prompts to select a partners organization and create a new Shopify app.
At this point, you have the option to choose an extension type. We recommend selecting "admin block", which is a new extension type introduced in the summer 23 editions release. Give the extension the name "admin block" and specify that it will be written in JavaScript React.
Once the extension is generated, you will notice the changes in the "toml" file. This file is where you can manage your app's scopes, app or redirect URLs, API version, and more. The extension code can be found in the "admin block" folder of the source code.
Now it's time to test the extension and make sure it works properly. In your command line interface, enter the command "yarn dev" to start the development server. Select one of your stores and open the dev console. Click on the "app home" link to install the app and then navigate to the extension link. You should see your extension working on a product page, indicating that it has been successfully installed.
After testing the extension, you can stop the running extension and make some changes to the "shopify.app.toml" file. If you want Gadget to manage and install your scopes, you'll need to enable the OAuth flow for managing installs. To do this, refer to the Shopify app configuration documentation and add the "use_legacy_install_flow" flag in the "shopify.app.toml" file under the access scopes section.
Once you've made the necessary changes, use the command "yarn paste Shopify app config push" to push the configuration to your partner's app. Confirm the changes and you're all set.
Now that the Shopify partner's app is properly configured, you can proceed to set up Gadget. Create a new Gadget app and select the Shopify app template. Give your app a name, such as "my admin extension app". Connect your Shopify app to Gadget by copying the client ID and secret from the Partner's dashboard and pasting them into Gadget.
Next, choose the desired Shopify API scopes and data models for your app. In this case, we suggest selecting "read products" and the Shopify product model. Confirm your selections and copy the app URL and redirection URL back to the Partner's dashboard.
To finalize the setup, reinstall the app through the Partner's dashboard to reflect the changed scopes. Once the app is updated, you will see an embedded admin app in Shopify. Restart the CLI app that houses your extension using the "yarn dev" command. Copy the extension URL and paste it into the Gadget app to ensure that the admin extension is running as expected.
In conclusion, this tutorial has provided you with a step-by-step guide on setting up an extension-only Shopify app to work with Gadget. By following these instructions, you can create, test, and configure your app, as well as connect Shopify and Gadget seamlessly. Now you're ready to start building your application for Shopify. Happy coding!
