Quickstart: Connect to Shopify 

Connecting to Shopify is the first big step to building a Shopify app with Gadget.

In addition to standing up a full stack app and the underlying infrastructure, Gadget's Shopify connection also handles Shopify's OAuth, session token management, webhook registration, data syncing and nightly reconciliations for you, and automatically creates data models and APIs for your Shopify resources.

By the end of this quickstart, you'll have a fullstack app set up, connected to Shopify, and installed on a Shopify development store.

Step 1: Create a new Gadget app 

First, you need to create a new Gadget app.

1. Create a new Gadget app at gadget.new and select the Shopify app type.
2. Give your app a name and Confirm.

Step 2: Authenticate with Shopify 

1. If you don't have a Shopify account create one on the Shopify Dev Dashboard.
2. Click Use different connection methods on your app's home page. Alternatively, navigate to Settings > Plugins > Shopify.
3. If you haven't set up a connection before, you will need to authenticate using the Shopify CLI. This allows Gadget to create and manage apps on your behalf.

Step 3: Create a Shopify application 

1. Select a Shopify organization to add your app to. This step will not appear if you are only a member of one organization.
2. Name and create your new Shopify application.

Step 4: Select scopes and models 

In order to authenticate with Shopify, it is required to select at least one scope.

You can also select the Shopify data models needed to power your app. Gadget will register and receive webhooks for models that have webhooks.

For this quickstart, select the Products Read scope and Product model.

1. Select the scopes you'll need for this application.
2. Click Confirm to move to the next step.

Step 5: Install the app on a Shopify store 

The Shopify connection is all set up. Now you can install your app on a Shopify development store.

1. If you don't have a development store, you can create one by clicking Create a new store. Once the store is created, navigate back to your Gadget app and click Refresh to see the new store.
2. Select a store and click Install app. This will redirect you to your Shopify store admin.
3. Click Install to grant your app access to the selected scopes for this store.

Congrats! Your app is now installed on a development store, and you can start building your Shopify app.

Step 6 (Optional): Sync Shopify data 

After installing on a store, you can run a data sync to pull that store's existing data into your Gadget app's database. Only data for the models you selected when setting up the connection will be synced.

1. On the connection page, click Installs. If you have navigated away from the connection page after installing on a store, navigate to Settings > Plugins > Shopify.
2. Find the store that you've just installed the app on and click the Sync button.

Gadget will automatically manage Shopify's rate limits and sync data in the background. Depending on how much data you have, this process may take some time.

You can see your synced data by navigating to the data page for your selected models, for example, api/models/shopifyProduct/data.

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!