---
title: "How to Setup Webhooks in Shopify Remix App?"
url: "https://magecomp.com/blog/setup-webhooks-shopify-remix-app/"
date: "2024-11-21T09:55:04+00:00"
modified: "2025-05-29T07:19:47+00:00"
author:
  name: "Bharat Desai"
  url: "https://magecomp.com"
categories:
  - "Remix"
  - "Shopify"
word_count: 686
reading_time: "4 min read"
summary: "In this article, we will learn about how to set up webhooks in the Shopify remix app."
description: "Learn how to set up webhooks in your Shopify Remix app with this step-by-step guide. "
keywords: "Remix, Shopify"
language: "en"
schema_type: "Article"
related_posts:
  - title: "Shopify SEO Checklist: Ultimate Guide to Rank Your Store #1"
    url: "https://magecomp.com/blog/shopify-seo-checklist-ultimate-guide-to-rank-your-store-1/"
  - title: "Top 10 Shopify Agency in India"
    url: "https://magecomp.com/blog/shopify-agency-india/"
  - title: "Top 12+ Best Shopify Section Store Apps"
    url: "https://magecomp.com/blog/best-shopify-section-store-apps/"
---

# How to Setup Webhooks in Shopify Remix App?

_Published: November 21, 2024_  
_Author: Bharat Desai_  

![How to Setup Webhooks in Shopify Remix App (1)](https://magecomp.com/blog/wp-content/uploads/2024/11/How-to-Setup-Webhooks-in-Shopify-Remix-App-1-1024x512.webp)

In this article, we will learn about how to set up webhooks in the Shopify remix app.

[![Shopify Mobile App Builder](https://magecomp.com/blog/wp-content/uploads/2024/12/Shopify-Mobile-App-Builder-1.webp)](https://apps.shopify.com/mobile-app-builder-by-magecomp)

## 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();
};
```

[![Hire Shopify Developers](https://magecomp.com/blog/wp-content/uploads/2024/12/Hire-Shopify-Developers-png.webp)](https://magecomp.com/services/expert-shopify-developers/)**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!

[![Shopify SEO](https://magecomp.com/blog/wp-content/uploads/2024/12/Shopify-SEO-png.webp)](https://magecomp.com/services/shopify-seo/)**Happy Coding!**


---

_View the original post at: [https://magecomp.com/blog/setup-webhooks-shopify-remix-app/](https://magecomp.com/blog/setup-webhooks-shopify-remix-app/)_  
_Served as markdown by [Third Audience](https://github.com/third-audience) v3.5.3_  
_Generated: 2026-10-16 07:26:29 UTC_