Time to build: ~10 minutes
Requirements
Before starting this tutorial you need the following:
→ a Shopify Partners account
→ a development store
Gadget makes it easy to send Shopify data to an ERP or other existing systems. Integrating with Shopify is a lot of work, so many builders use Gadget as an in-between step. If you need to sync data with Shopify, react to webhooks, or handle authorization, Gadget can be used as middleware that moves data to and from an existing service.
In this tutorial, you will use Gadget to build a middleware application that forwards new orders to an existing service.
You can fork this Gadget project and try it out yourself.
You will still need to set up the Shopify Connection after forking. Continue reading if you want to learn how to connect Gadget to a Shopify store!
Our first step will be to set up a Gadget project and connect our backend to a Shopify store via the Shopify connection. Create a new Gadget application.
To connect our Gadget backend to a Shopify store we have two options. The recommended option if you are new to Gadget and Shopify is to create a custom app via the Shopify Partners dashboard. You can also create a custom application on your Shopify store Admin page. Both of these types of custom apps have a slightly different workflow for connecting, which are detailed below:
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.
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.
We have successfully created our connection!
Gadget will copy the selected Shopify models, their types, validations and associations into your Gadget backend. These models are ready to process webhooks as soon as you install the app on a Shopify store.
We're going to use axios to forward order data to an existing server.
You will see an installation page open. Once the dependency is installed, you are ready to add your code.
Now that we have set up our connection to a Shopify store and the axios module installed, we can add some custom code to forward any new orders to our existing service.
The following snippet will forward new order information to an existing backend service that was also built using Gadget. You will get a simple response with the id of the order that was forwarded.
This snippet will run every time an order is created. The logger statements will show up in Gadget's built-in Logs tool so you can verify the ids of orders that were successfully forwarded and get response details for failed requests.
You can make a test order on your development store to test your app. You should see a message like the one below in your Gadget app Logs tool.
That is all that is required to use Gadget as middleware! In this example, Gadget gives you hands-off data sync and webhook handling with the Shopify connection, while allowing you to continue to use your existing service.
There are many good use cases for Gadget as a middleware service. For example, you could add a code effect that makes an API call on a shop install to set up an account in another system.
There are also other ways to interact with your Gadget app outside of webhook-triggered code effects:
Don't want to automatically forward data to an existing service?
Gadget also automatically generates a CRUD API for each model that can be queried to pull information into an application - see the API Reference for more detail.
Need to do some custom processing before querying your data?
You can build a custom HTTP route or a global action to run custom code.