Mastering Shopify Webhooks: A Complete Guide for Store Owners

Shopify webhooks are an important tool that helps build integrations with external applications and respond in real time to events happening in your Shopify store. Webhook subscriptions play a crucial role in managing and creating webhooks through the Shopify Admin interface and API. Shopify webhooks transmit event data related to specific events occurring in the store. While creating and managing webhooks through the Shopify admin dashboard is convenient, this interface doesn’t allow for automation of webhook-related tasks.

To solve this problem, Shopify opened up the webhook API, allowing users to interact with Shopify’s webhooks through the program, thereby expanding its range of features. In this guide, we’ll learn how to set up authentication using the Shopify API, then use the Shopify webhook API to create, manage, and track your webhooks more automatically and efficiently. Start exploring this way to optimize your integration with your Shopify store!

Mastering Shopify Webhooks: A Complete Guide for Store Owners

What Are Shopify Webhooks?

What Are Shopify Webhooks?

Definition and Purpose of Shopify Webhooks: How Shopify Webhooks work?

Shopify Webhooks is a feature that allows your website to notify other systems when an event occurs in your Shopify store. Webhook subscriptions play a crucial role in keeping apps in sync with Shopify data and receiving near-real-time data about specific events. There is a shopify webhooks example: when you create a new order, customer information can be automatically sent to CRM systems to update the data. In particular, webhooks also have the ability to store this data for later use.

Potential Use Cases of Shopify Webhook Resources

1. Adjust product prices: Automatically update product prices based on events such as promotions or input price changes.

2. Create orders: Automatically update new order information into management or accounting systems.

3. Accounting software integration: Sync order and payment data with your accounting software.

4. Notify customers: Send notifications via text or instant message to customers about order status or product information.

5. Data Collection: Automatically import data into your storage system or data warehouse.

6. Delete data: Automatically delete customer data when they uninstall apps from your store.

7. Notify shippers: Send notifications about new orders to shippers to prepare and deliver goods on time.

How to Create Shopify Webhooks

How to Create Shopify Webhooks

Step-by-Step Guide to Creating Shopify Webhooks Through the Shopify Admin

1. Accessing Notificationsin the Shopify Admin

Now go to your Shopify admin. Then, from the left menu, select "Settings" and click "Notifications.”

2. Navigating to the Webhooks Section

In this step, scroll down the page to find the "Webhooks" section.

3. Creating a New Webhook

Once you've found the "Webhooks" section, you'll see a button called "Create webhook." Click that button now and a new dialog box will show up.

4. Selecting Event and Format

In the first drop-down menu, you need to select the event from the shopify webhooks list below:

• Create a shopping cart: Send a webhook every time a new shopping cart is created.
• Update cart: Send a webhook every time there is a change in the cart.
• Create payment: Send a webhook when a new payment is created.
• Clear payment: Send a webhook when a payment is cleared.
• Payment updates: Send webhooks when payment information is updated.
• Create a collection: Send a webhook when a new collection is created.
• Delete collection: Send a webhook when a collection is deleted.
• Collection updates: Send webhooks when collection information is updated.
• And many other events like creating, deleting, updating orders, customers, products, stores, themes, and other activities in your Shopify store.

5. Entering URL and Adding the Webhook

In the URL section, you can enter the URL address to store the data. However, it's important to remember that webhooks cannot return the following URLs:

• URLs that end with the word "internal" (e.g. thisshop.com/i Internal).
• Local servers.
• Shopify's domain name (e.g. shopify.com and myshopify.com).
•  Fake domains like www.example.com.

6. Optional: Testing the Webhook

To make sure the information you want to send goes to the correct URL, you can test your webhook by clicking the "Send test message" link. This will help you verify that the URL you entered is working properly.

Alternative Methods for Creating Shopify Webhooks Using the Shopify API

Alternative Methods for Creating Shopify Webhooks Using the Shopify API

Setting up a Shopify Store API

To create webhooks on Shopify using the API, you need to access the webhook API endpoint at https://{shop}.myshopify.com/admin/{version}/webhooks.json (remember to replace the values in {} equal to your worth).

To do this, you need to send a POST request to this endpoint with the required data. You can use any HTTP client you want (e.g. Postman, Curl, etc). In this tutorial, we will use ReqBin because it is easy to use and convenient.

In the case of the webhook you're creating in this tutorial, you need to subscribe to order-related events, such as the "Create Order" event. This event is triggered when a new order is created in your store.

The data sent with the webhook request must have the following structure:

{

  "webhook": {

    "topic": "orders/create",

    "address": "{webhook_url}",

    "format": "json"

  }

}

In the previous code, the webhook is formatted as json, so don't forget to replace {webhook_url} with the webhook URL that was created in the Hookdeck CLI session.

Now, open your browser and visit https://reqbin.com. Paste the API URL into the address field and select the request method as POST. For authentication, add the X-Shopify-Access-Token field to the Header section as follows (replace MY_ACCESS_TOKEN with your Shopify app password):

Now, the information in the header will be mapped onto the details in the Ingredients section. Then go to the Content section and paste in your request object. You can see the example in the screenshot below to see how to set up a request:

Now, click the Send button to generate your new webhook. Once done, you should receive a successful response, as shown below:

This indicates that you have been successful in creating webhooks for events like orders or creating themes on your Shopify store.

Additionally, through the API, you can also perform other webhook actions such as update, search, and delete. For more details on how to do these operations, refer to the Shopify webhook API documentation.

Test your webhooks

Now that you've set up the local webhooks capture and receive API, and have registered webhooks through the API, it's time to test your settings.

To receive a webhook for a registered event, trigger the event by creating a new order. You can easily do this in the Shopify admin interface. Here's an example where I ordered a Ben Simmons 76er jersey:

After creating an order, Shopify fires a webhook for the order/creation event.

You will receive this message in the Hookdeck CLI session as shown below:

Check your logs and webhook information

To examine your webhook logs and information, you can use the Hookdeck CLI to provide a URL to the event page, where you can analyze the webhook data. This URL is displayed in the CLI output when you have created the webhook. Copy this URL and open it in your browser to see the webhook details in the event page, including the webhook title in the Header section.

You can also view the content of the webhook's payload.

Finally, confirm that the local API is logging the webhook payload. On your browser, visit the local API's /fetch-webhooks-logs endpoint and you should see a screen similar to the one below (skip the first object):

You can already record the webhook ID, the total number of items in your order, and the time the webhook was sent.

Verify your Shopify webhooks

Verifying webhooks from Shopify is an important step in ensuring the integrity of data received from this source. When Shopify sends a webhook, it also includes an X-Shopify-Hmac-Sha256 header, which contains an encrypted version of the webhook payload. This is done using a public key and the HMAC encryption algorithm.

To verify the webhook on your system, you need to recompute the encrypted version of the webhook payload using the same public key and HMAC algorithm. You then compare the result with the value sent in the X-Shopify-Hmac-Sha256 header. If they match, this implies that the payload is valid and came from Shopify. However, if there is no match, there may be data tampering or modification, and you need to handle this situation appropriately.

In your code, this verification is typically done through a middleware function like validPayload, which you can find in the server.js file.

const sigHeaderName = 'x-shopify-hmac-sha256';

const sigHashAlg = 'sha256';

const secret = "xx-xx-x";

.....

/* function validatePayload(req, res, next) {

    if(req.method == "POST"){

        if (!req.rawBody) {

            return next('Request body empty')

        }

        const body = req.rawBody;

        const hmacHeader = req.get(sigHeaderName);

        //Create a hash based on the parsed body

        const hash = crypto

            .createHmac(sigHashAlg, secret)

            .update(body, "utf8", "hex")

            .digest("base64");

        // Compare the created hash with the value of the X-Shopify-Hmac-Sha256 Header

        if (hash !== hmacHeader) {

            return next(`Request body digest (${hash}) did not match ${sigHeaderName} (${hmacHeader})`)

        }

    }

    return next()

}

app.use(validatePayload); */

Authenticating with the Shopify API

Here are three ways you can authenticate when using the Shopify API through credentials from your private app:

1) Combine username and password

If your app supports basic authentication, you can pass authentication information directly in the request URL. This is done by adding the username and password to the beginning of the URL. For example:

    https://{username}:{password}@{shop}.myshopify.com/admin/api/{version}/webhooks.json

    In there:

    - {username}:  is your API key.

    -  {password}:  is your private app's password.

    -  {shop}: is the subdomain of your Shopify store, for example,  myshop.

    -  {version}:  is the API version you are using, e.g.  2021-10 .

Any requests sent to the Shopify API using this URL will be automatically authenticated.

2) Use authorization token

    If your client does not support basic authentication, you can use authorization tokens. The token is generated by combining your store app's API key and password and encoding the resulting string in base64. This token is then sent in the "Authorization" header of the request. For example:

Authorization: Basic NDQ3OGViN2FjMTM4YTEzNjg1MmJhYmQ4NjE5NTZjMTk6M2U1YTZlZGVjNzFlYWIwMzk0MjJjNjQ0NGQwMjY1OWQ=

3) Use the "X-Shopify-Access-Token" header

The final method is to use the "X-Shopify-Access-Token" header along with your private app password. This password is sent in the header of your request. For example:

    X-Shopify-Access-Token: {my_app_password}

With these three methods, you can authenticate your app to send and receive webhooks from Shopify securely and efficiently.

Setting Up and Receiving Shopify Webhooks Using the Shopify API

Before we start creating webhooks using the Shopify API and setting up webhook logging, we need to perform the following steps:

Setting up a webhook subscription involves defining an endpoint to receive webhooks and specifying topics for event messages.

1. Copy the demo API code and run it locally on your machine.
2. Use Hookdeck CLI to create a webhook URL pointing to your local API endpoint.
3. Create webhooks using the Shopify API.
4. Test your webhook by firing a subscription event.
5. Check the webhook log and verify that your webhook worked.
6. Verify webhook payload.

Creating, activating, and modifying webhook subscriptions using the Shopify API is crucial for keeping your app in sync with Shopify data. To create a webhook subscription, you need to define an endpoint to receive HTTPS requests and ensure SSL configurations are correctly set up. Handling webhook payloads properly is essential for processing near-real-time data about specific events. You can check, create, and modify webhook subscriptions through the Shopify Admin interface or API.

With these steps, you’ll be ready to effectively create and test your webhooks. Let’s start!

To clone the demo API, perform the following steps:

1Open terminal and run the following command to clone the application repository for the API:

git clone –single-branch –branch shopify-webhooks

Navigate to the project root directory with the command:

cd nodejs-webhook-server-example

1. Install the necessary dependencies using the following command:

npm install

1. Once the installation is complete, you can start the Node.js server with the command:

npm start

1. This will start the API client and print a message to the screen indicating that the API is now running and listening for connections on port 1337.

This application has two endpoints:

• /log-shopify-webhook : This endpoint receives webhooks from Shopify and stores them in an in-memory database. It captures a simple object containing a subset of information from the webhook payload.
• /fetch-webhooks-logs : This endpoint can be called to retrieve a set of logged webhook data.

To create a webhook URL using Hookdeck CLI, perform the following steps:

1. Open terminal and run the following command (note: replace the port value 1337 with the port number your API is running on if you are not using the sample project):

hookdeck listen 1337

       2. This command will start an interactive session where the CLI will ask you for information about the endpoint for which you want to create a webhook URL. Below are the questions and the answers you should provide for each. Be sure to press the Enter key after each answer.

Once the necessary information is available, the CLI will begin the process of generating the webhook URL. Once the process is complete, you will see the URL printed to the screen and the CLI will notify you that it is ready to receive requests.

Note: If you are using the CLI in guest mode, you will have to use the guest login URL link from the console to access the dashboard. Copy and paste this into your browser to start a guest login session.

How to Use Shopify Webhooks

How to configure Shopify webhooks?

There are two methods to configure webhooks on Shopify. The first method is through the API, and the second method is through the Shopify admin interface.

If you want to use the API, you need to create an HTTP POST request and send it to the Webhook resource in the Shopify REST Admin API.

If you want to configure through the Shopify admin interface, you can follow these three steps:

Step 1: In your admin, select Settings and go to Notifications.

Step 2: Find and select Webhooks, then click Create webhook.

Step 3: Choose the format you want to listen to, it can be JSON or XML.

Once you've created your webhooks, you need to verify their integrity. To learn how to do this, keep reading about how to test webhooks on Shopify.

How to test webhooks on Shopify?

You can use public services like Beeceptor or run a local server. If you choose to run the server locally, make sure it is made public using a service like ngrok or Pagekite. Below are URLs that are not supported as webhook endpoints:

• Any URL ending with the word "internal" (e.g. thisshop.com/internal)
• Local server
• Shopify domains (e.g. shopify.com and myshopify.com)
• Fake domains like www.example.com

To test webhooks in your Shopify admin, you can do the following:

Step 1: Find the Webhooks section in the Notifications section.

Step 2: Click the Send test notification button next to the webhook you want to test.

A sample webhook will then be sent to the configured webhook URL.

How to create webhook endpoints on Shopify?

To create a webhook endpoint on Shopify, you need to make sure that the endpoint is an HTTPS webhook address with a valid SSL certificate. This ensures that the endpoint can receive and process event notifications from Shopify correctly. Additionally, you'll also need to implement verification to ensure that webhook requests come only from Shopify and haven't been tampered with.

2. Best Practices for Secure and Reliable Webhooks

Best Practices for Secure and Reliable Webhooks

Emphasizes the importance of secure URL endpoints and data encryption.

When your app is temporarily unavailable and webhooks are lost, it's critical to secure URL endpoints and encrypt data when restoring them. To fix and protect your information when your app comes back, you should follow these steps:

1. Check URL endpoint security: Ensure that the endpoint uses the HTTPS protocol and has a valid SSL certificate, to protect data exchange from security threats.

2. Encrypt data on restore: Before integrating data into your webhook handles, make sure they are fully encrypted to prevent unauthorized disclosure or access.

3. Re-register webhooks: After testing and verifying the endpoints, re-register the necessary webhooks and ensure that they comply with the established safety standards.

By applying these steps, you will ensure that when your application comes back online, information and data are protected securely and effectively.

Unique: Provides tips for handling errors and ensuring webhook delivery.

Shopify applies an effective deduplication mechanism, which helps prevent duplication and overload due to many activities. This mechanism ensures that only one webhook containing the most up-to-date information is issued every 10 seconds.

To illustrate: If you create a new product and continuously update it within 10 seconds, only two webhooks will be generated. The first webhook records the product creation event, while the second webhook provides the final update after that period. To effectively manage and ensure accurate delivery of webhook events, you should build error handling and quality control strategies into webhook processing. This includes taking measures to acknowledge and recover from errors quickly, as well as storing temporary states to deal with duplicate or ignored webhook events. This approach not only helps optimize processing efficiency but also ensures that data is delivered accurately and reliably, thereby improving the serviceability of the Shopify webhook system.

Scaling and Troubleshooting

Discusses potential challenges with high-volume webhooks (scaling, error handling).

Imagine that your application needs 3 seconds to process a webhook; Within 5 seconds, you can return a response. However, if you receive 3 webhooks at the same time, the time required will be 9 seconds and the second webhook will not complete before the timeout expires.

For example, you have a Shopify store that sells flowers and processes 10 orders per day on average. You've set up a webhook to trigger an outbound delivery service when a customer places an order. Your delivery service easily handles the average daily order volume, but when Valentine's Day rolls around, the number of orders increases to 300 per day.

When you start receiving 300 webhooks daily on your delivery service, your application's server resources are quickly consumed and lead to webhooks being dropped due to service errors. When webhooks started being dropped, many customers who placed orders and paid did not receive their orders.

So how to minimize these inevitable situations? One of the standard solutions is to increase processing speed by expanding the hardware capabilities of the server. You can also use horizontal scaling techniques to distribute webhook jobs.

However, the best way to respond quickly with Shopify is to handle webhooks asynchronously. With this approach, Shopify doesn't need to wait until your app has finished processing the webhook before receiving a response.

One of the ways to implement asynchronous processing for Shopify webhooks is to use a message broker between Shopify and your app. This intermediary receives webhooks from Shopify and immediately sends a response back to Shopify. The broker then routes the webhooks to your application at a rate that your application can handle.

This way, your Shopify webhooks will never time out and your app won't run out of server resources.

• Offers resources for troubleshooting common webhook issues.

If your app uses Shopify webhooks, it's important to monitor and handle failed webhook delivery notifications. Shopify will remove the webhook if there are 19 consecutive failed resend attempts. You can use the webhook delivery metrics report to troubleshoot delivery errors and improve performance. Make sure you monitor and handle failed webhook delivery notifications to avoid impacting your app users.

Check delivery status with the webhook

• Failed webhook delivery notifications

If the webhook experiences 13 consecutive failed deliveries, Shopify will notify you via email. Notifications are sent daily until the issue is resolved or the webhook is removed. Notifications for apps in the Partner Dashboard will go to the app's API email, while custom apps will receive notifications via the developer's email.

Conclusion

In this guide, we explored how to use Shopify webhooks to optimize your store's management and integration with other apps. From creating webhooks to testing and verifying data integrity, we've provided an overview and safe and effective implementation methods.

Encourage leveraging webhooks to make your store more automated and flexible. By applying asynchronous processing and using solutions for failed webhook delivery errors, you can ensure that your integration is always running efficiently, even during peak times . By leveraging the power of webhooks, you can optimize your Shopify store's operations and deliver exceptional customer experiences. Don't hesitate, tap into the full potential of webhooks and upgrade your store today!