Connecting via the Partner dashboard 

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.

  1. Create a new Gadget app at gadget.new and select the Shopify app type.
  2. Enter a domain name and click Confirm.
  3. Click on the Connect to Shopify button to open the Shopify plugin page.
  4. 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.

  1. Click on the Apps page and then click the Create app button.
  2. 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 

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.

  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.

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 

  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.

Need a development store?

If you don't have a development store, you can create one in the Shopify Partner dashboard by:

  1. Clicking on Stores in the side nav bar.

  2. Clicking Add store and selecting Create development store.

  3. Select Create a store to test and build, and give your store a name.

  4. (Optional, but helpful) Select the Start with test data checkbox to populate your store with sample products.

    Learn more about development stores.

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 SettingsPluginsShopify 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!

Was this page helpful?