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 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.

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:

<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>

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.

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.

Updated on: 27/02/2026