To get started building Shopify apps, we must first set up the Shopify connection.
This quickstart will walk through the steps to connect Gadget to a Shopify store using the Shopify Partner dashboard. If you want to connect through the store admin, read this guide.
Step 1: Create a new Gadget app
To start, we need to create a new Gadget app.
Create a new Gadget app at gadget.new and select the Shopify app type.
Enter a domain name and click Confirm.
Click on the Connect to Shopify button to open the Shopify plugin page.
Click Use different connection methods.
Step 2: Create a new Shopify Partner app
Now we need to connect our Gadget app to a custom Shopify app in the Shopify Partner dashboard. If you don't already have an account, follow this link to create one: Shopify Partner dashboard.
Click on the Apps page and then click the Create app button.
Click Create app manually and enter a name for the app, then click Create. The Partner app will be created and we are redirected to the Overview page that has the app's Client ID and Client secret.
Step 3: Add Shopify credentials to Gadget
Copy the Client ID and Client secret from the Shopify app and paste them into Gadget.
Click Continue in Gadget to move to the next step.
Step 4: Select scopes and models
In order to authenticate with Shopify, it is required to select at least one scope. If you would like Gadget to register and receive webhooks for particular resources, also select models.
In Gadget, select the Products read scope and the underlying Product data model.
Click Confirm to move to the next step.
Step 5: Set up app URLs
In the Shopify Partner dashboard, click on Configuration in the side nav bar.
Copy the App URL and Allowed redirection URL from Gadget and paste them into the corresponding fields in the Shopify app, then click Save and release.
You can find your GDPR webhook URL in Settings -> Plugins -> Shopify and by clicking on your Shopify application handle in
Connected apps.
Step 6: Install the app in a Shopify store
Go back to the Overview page for the Shopify app.
Click on the Select store button in the Test your app section, and select a store to install on.
When prompted by Shopify to grant the app access to the scopes, click Install.
Congrats! Our app is now installed on our store, and we can start building a Shopify app in Gadget.
Need a development store?
If you don't have a development store, you can create one in the Shopify Partner dashboard by:
Clicking on Stores in the side nav bar.
Clicking Add store and selecting Create development store.
Select Create a store to test and build, and give your store a name.
(Optional, but helpful) Select the Start with test data checkbox to populate your store with sample products.
When we installed the app on a store, we registered for Shopify webhooks and set up a historical data sync that can be run to pull in existing Shopify product data.
In Gadget, go to Settings → Plugins → Shopify and click Installs.
Click the Sync button to start the data sync.
Close the modal and go to api/models/shopifyProduct/data to view the synced product data in the database.
Next steps
Try out some of our other tutorials to learn more about building with Gadget: