In this article, we will learn about how to set up webhooks in the Shopify remix app.
Shopify Webhooks
Webhooks in Shopify are a way for Shopify to send real-time notifications to an external URL whenever certain events occur within the Shopify store. These events can include actions like creating an order, updating a product, or a customer registering an account. Shopify webhooks allow external systems or applications to receive updates automatically without the need for constant polling.
Webhooks Events in Shopify
- Orders: orders/create, orders/paid, orders/fulfilled, orders/cancelled
- Products: products/create, products/update, products/delete
- Customers: customers/create, customers/update, customers/delete
- Shop: shop/update
- Inventory: inventory_levels/connect, inventory_levels/update
- Fulfillment: fulfillments/create, fulfillments/update
- App Uninstall: app/uninstalled
Above all are common webhooks events we use on Shopify.
Steps to Implement Webhooks in Shopify Remix App
If you are using the old app version you can see the webhook.jsx file in your route folder. If you have currently created the new app using the following command
shopify app init
Your currently created app contains another webhook file. Like
1) webhooks.app.uninstalled.jsx
2) webhooks.customers.data_request.jsx
3) webhooks.customers.redact.jsx
4) webhooks.shop.redact.jsx
Step 1: In your shopify.app.toml file write the following code for webhooks. For example, we are creating the app uninstall webhook.
[[webhooks.subscriptions]]
topics = [ “app/uninstalled” ]
uri = “/webhooks/app/uninstalled”
After putting this code in your shopify.app.toml file you need to check the shopify.server.js file.
Add the following code in your shopify.server.js file for webhooks configuration. You need to add webhook related code in shopifyApp object. Other file configurations are the same. Only add the webhook related part.
const shopify = shopifyApp({
//webhook related part start
webhooks: {
APP_UNINSTALLED: {
deliveryMethod: DeliveryMethod.Http,
callbackUrl: ‘/webhooks/app/uninstalled’,
},
},
hooks: {
afterAuth: async ({session}) => {
shopify.registerWebhooks({session});
},
},
//webhook related part end
});
export default shopify;
export const registerWebhooks = shopify.registerWebhooks;
In your route directory webhooks.app.uninstalled.jsx file add the following code to get the currently created webhook event for uninstalling the app.
webhooks.app.uninstalled.jsx file
import { authenticate } from “../shopify.server”;
import db from “../db.server”;
export const action = async ({ request }) => {
const { shop, session, topic , payload } = await authenticate.webhook(request);
console.log(`Received ${topic} webhook for ${shop}`);
/ Webhook requests can trigger multiple times and after an app has already been uninstalled.
// If this webhook already ran, the session may have been deleted previously.
if (session) {
await db.session.deleteMany({ where: { shop } });
}
return new Response();
};
Step 2: Deploy your app to update the webhook configuration from your shopify.app.toml file.
Run the following command in the terminal to update the shopify.app.toml file.
npm run deploy
Reset your app using the npm run dev — –reset command.
After resetting your app you can uninstall your app from your Shopify store and see the logs in the terminal.
App uninstall webhook removes the deleted session data from the session table.
Conclusion
Setting up webhooks in your Shopify Remix app allows you to handle store events efficiently and create a dynamic app experience.
If you have any questions or need further assistance with Shopify app development, feel free to comment below or contact us!
Happy Coding!