> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.delm.app/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Delm + Teeinblue

Teeinblue uses its own custom product options and JavaScript library. Because it bypasses standard Shopify product forms, our default method for detecting variant changes does not work automatically.

This setup requires copying a small script into a **Custom Liquid** block within your Theme Editor. While this involves a snippet of code, you do not need to edit your theme internal files.

---

## When do I need this?

You only need this integration if your store has **different delivery dates for different variants**.

If all variants of a product share the same delivery rules, the initial date loaded by Delm will always be correct. However, if switching from a "Small" to a "Large" size changes the processing or transit time, you must use this snippet to ensure the widget reloads the correct data when a customer makes a selection in Teeinblue.

---

## The solution

Teeinblue provides a custom JavaScript event called `teeinblue-event-variant-changed`. We can listen for this event, verify the data, and then tell the Delm widget to reload.

### 1. Add the Delm app block

First, add the [Delm Delivery Widget app block](/en/article/how-can-i-display-delivery-dates-using-the-app-block-va2rii/) to your product page via the Shopify Theme Editor as usual.

### 2. Add the integration script

1. Click **Add block** in your sidebar and select **Custom Liquid**. Ensure this block is placed **directly after** the Delm block.

![Custom Liquid Block](https://storage.crisp.chat/users/helpdesk/website/-/a/4/8/8/a488abe1860c5800/custom-liquid-block_86asz7.png)

2. Paste the following code into the block:

Directly below the Delm app block, click **Add block** in your sidebar, select **Custom Liquid**, and paste the following code:

```javascript
<script>
  document.addEventListener('teeinblue-event-variant-changed', function(event) {
    // 1. Exit if event details or variantId are missing
    if (!event.detail || !event.detail.variantId) {
      return;
    }

    const newVariantId = event.detail.variantId;
    const delmWidget = document.querySelector('delm-widget');

    // 2. Exit if the widget is missing on the page
    if (!delmWidget) {
      return;
    }

    const currentVariantId = delmWidget.getVariantId();

    // 3. Exit if the variant has not actually changed
    if (newVariantId === currentVariantId) {
      return;
    }

    // 4. Update the ID and call .load() to fetch new data
    delmWidget.setVariantId(newVariantId);
    delmWidget.load();
  });
</script>
```

![Teeinblue Snippet](https://storage.crisp.chat/users/helpdesk/website/-/a/4/8/8/a488abe1860c5800/custom-liquid-teeinblue_gg6l7g.png)

---

## How to verify it is working

To confirm the integration is successful, you can watch the background communication between your store and Delm. On **Google Chrome**, follow these steps:

1. Open your product page and **Right-click > Inspect** to open the Developer Tools.
2. Click on the **Network** tab at the top of the panel.
3. In the **Filter** box, type **delm**.
4. Change the variant in the Teeinblue options on your page.
5. You should see a new request appear in the list every time the variant changes. This indicates that the widget is successfully fetching new delivery data for the selected item.

![Network Requests](https://storage.crisp.chat/users/helpdesk/website/-/a/4/8/8/a488abe1860c5800/network-requests_1kcrk3l.png)

---

## Technical support

If you are having trouble getting the event listener to connect with your specific theme, please reach out to us via the in-app chat. Please note that custom integration assistance requires a plan with **Premium Support**.