Use-case: A Shopify merchant needs an automated way to ‘tag’ products being added to their Shopify store inventory. They source hundreds of products weekly from various dropshippers, and upload the unstructured data to Shopify programmatically. Because the data is unstructured, Shopify is unable to power the merchant’s storefront search. While the merchant has the ability to add tags inside the Shopify Admin, the experience of doing this on hundreds of products on a weekly basis is time-consuming.
Instead, they opted to build a custom Shopify app on Gadget that would run every new product description through an automated tagging script.
In this example, we’ll show you how to build a custom product tagging system that listens to the <inline-code>product/create<inline-code> and <inline-code>product/update<inline-code> webhooks from Shopify, runs product descriptions through a tagging script and sets tags back in Shopify.
Our first step will be to set up a Gadget project, and connect our backend to a Shopify store via Gadget Connections.
To do this:
At this point, Gadget copies 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 opted to install this app on our development store, using the Test on Development Store link on our Shopify Partner dashboard. Gadget handled the OAuth dance, and once we had granted the requested API scopes, the connection was established.
Gadget keeps your app in sync by generating a CRUD API around each of your cloned models, and wiring up each of the API actions to their corresponding Shopify webhook. So, if the Shopify store fires a <inline-code>product/create<inline-code> webhook, Gadget will run your Create action on the Product model. By default, this action uses the incoming params from the webhook to creates a record in your database. Similarly, if Shopify fires the <inline-code>product/update<inline-code> webhook, Gadget will run your Update action which updates the record with the incoming params.
What’s special about these actions is that they are yours. You can change what happens when the action runs by adding Effects defined in code.
The next step is to build out our tagging script. Let's start with a list of vetted keywords that we can use to power the script. These keywords can be different types of products or brands:
Once we have keywords to check against, we can write our tagging script. Because we want this script to run every time a product record is created or updated, we'll add an Effect to the Create and Update actions on the Shopify Product state machine:
As you can see, there's little code to write. Gadget gives us a <inline-code>connections<inline-code> object as an argument to our effect function, which has an already authenticated API client for Shopify ready to go. We use this object to make API calls back to Shopify to update the tags and complete the process.
Now, we only did this on Create. To have the same behavior when a product is updated, we add the same <inline-code>applyTags.js<inline-code> file as another Run Effect on the Update action.
We're done, let's test it out!
That's all there is to this app, so let's test it out! Go back to the Connections page and click Sync on the connected store. Gadget will fetch each of the records in Shopify and run them through your actions. Not only will this populate your Gadget backend with the store's inventory, but it will also run the effects we added, updating the tags for each synced product.
The net result is we have tags being updated in Shopify each time there is a match against our Allowed Tags list. And we were able to get all of this done in 10 minutes and under 10 lines of code.