Shopify quickstart 

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, which is our recommended way to connect. If you want to connect through the store admin, read our guide.

Step 1: Create a new Gadget app 

To start, we need to create a new Gadget app.

1. Create a new Gadget app at gadget.new and select the Shopify app type.
2. Enter a domain name and click Get started.
3. Click on the Connect to Shopify button to open the Connect to Shopify page.

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.

1. Go to the Shopify Partner dashboard and create an account if you don't already have one.
2. Click on the Apps page and then click the Create app button.
3. 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 

1. Copy the Client ID and Client secret from the Shopify app and paste them into Gadget.
2. Click Continue in Gadget to move to the next step.

Step 4: Select scopes and models 

We need to select what Shopify API scopes and data models we want to include in our Gadget app.

1. In Gadget, select the Products read scope and the underlying Product data model.
2. Click Confirm to move to the next step.

Step 5: Set up app URLs 

1. In the Shopify Partner dashboard, click on Configuration in the side nav bar.
2. 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.

Step 6: Install the app in a Shopify store 

1. Go back to the Overview page for the Shopify app.
2. Click on the Select store button in the Test your app section, and select a store to install on.
3. 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.

Bonus Step 7: Sync Shopify data 

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.

1. In Gadget, go to Settings → Plugins → Shopify and click Installs.
2. Click the Sync button to start the data sync.
3. 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:

Questions? 

Reach out on Gadget's Discord server to talk with Gadget employees and the Gadget developer community!