Connecting to Shopify

There are 3 different ways to connect Gadget to your Shopify store.

  1. The Shopify Partners dashboard allows you to manually create a custom or public application that can then be linked to Gadget. If this is your first time trying Gadget, we recommend you follow the Partners dashboard documentation to set up your first connection. A Partners account also allows you to make development stores for testing.

  2. The Shopify store Admin allows you to develop an app right inside a Shopify store environment. You can develop on a live store, or use a Partners account to create a development store.

  3. The Shopify CLI is a powerful tool that automatically generates a template for an application that will be embedded in the Shopify Admin. Follow the CLI connection docs to learn how to connect an embedded app generate with the CLI to Gadget.

Connect to Shopify through the Partners dashboard

Requirements

To complete this connection, you will need a Shopify Partners account as well as a store or development store

Our first step is going to be setting up a custom Shopify application in the Partners dashboard.

Both the Shopify store Admin and the Shopify Partner Dashboard have an Apps section. Ensure that you are on the Shopify Partner Dashboard before continuing.

Click on Apps link in Shopify Partners Dashboard
  • Click the Create App button
Click on Create app button
  • Click the Create app manually button and enter a name for your Shopify app
Shopify's app creation landing page in the Partners Dashboard
  • Go to the Connections page in your Gadget app
The Gadget homescreen, with the Connections link highlighted
  • Copy the API key and API secret key from your newly created Shopify app and paste the values into the Gadget connections page
  • Screenshot of the Partners card selected on the Connections page

Now we get to select what Shopify scopes we give our application access to, while also picking what Shopify data models we want to import into our Gadget app.

  • Select the Read and Write scopes you need for your application
  • Page where users can select Shopify scopes to authorize in Gadget
  • Select what Shopify models you want to import into your Gadget app
  • Click Confirm to connect to the custom Shopify app
  • Page where users can select Shopify models to import into Gadget

We have successfully created our connection!

Now we want to connect our Gadget app to our custom app in the Partners dashboard.

  • In your Shopify app in the Partners dashboard, click on App setup in the side nav bar so you can edit the App URL and Allowed redirection URL(s) fields
  • Copy the App URL and Allowed redirection URL from the Gadget Connections page and paste them into your custom Shopify App
  • Screenshot of the App URL and Allowed redirection URL(s) that are available on the Connections page after selecting models and scopes
  • Click Connect on the Gadget Connections page to move to scope and model selection

Now we need to install our Shopify app on a store, and sync data.

  • Go back to the Shopify Partners dashboard
  • Click on Apps to go to the Apps page again
  • Click on your custom app
  • Click on Select store
  • Click on the Select store button
  • Click on the store we want to use to develop our app
  • You may be prompted about Store transfer being disabled. This is okay, click Install anyway
  • Click Install app to install your Gadget app on your Shopify store
Click Install app to authorize our Gadget app with our store

We will see a success message if our app was successfully installed.

App installation was a success

Set up is complete! We are now ready to build our Gadget application.

If we have created at least one product in our store we can test out the connection:

  • Go back to our Gadget Connections page and click on the Shop Installs button for the added app in the Shopify Apps section
  • A screenshot of the Connections page with the Shop Installs button highlighted
  • Click the Sync button for the installed store
  • The Installs page with the Sync button highlighted
  • We should see that the Sync action was a success
The Installs page displaying a successful sync notification

That's it! We have successfully set up a store and custom app in Shopify, connected our Gadget app to this store, and synced our store data with our Gadget app.