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

# How can I display delivery dates using Liquid?

While the [app block](/en/article/how-can-i-display-delivery-dates-using-the-app-block-va2rii/) is the preferred method for most users, Liquid is necessary in the following scenarios:

* **Older Themes:** If your theme does not support Shopify’s "Online Store 2.0" app blocks, you can paste the code directly into your theme's Liquid files or use a **Custom Liquid** block within the theme editor.
* **Page Builder Apps:** Use a "Liquid" or "HTML" element within apps like [PageFly](/en/article/delm-pagefly-1dyods4/), [EComposer](/en/article/delm-ecomposer-157hmky/), or [GemPages](/en/article/delm-gempages-106k81w/) to drop the widget into your custom layout.
* **Custom Locations:** Use Liquid to show delivery dates in areas where app blocks are not typically available, such as **collection grid items** or individual **cart line items**.

---

## Enabling the Delm Core app embed

The **Delm Core** app embed is required whenever you add widgets directly to your templates via custom code rather than using standard app blocks.

1. Go to your **Shopify Admin > Online Store > Themes**.
2. Click **Customize** next to your active theme.
3. On the left sidebar, click the **App embeds** icon.
4. Locate **Delm Core** and toggle it to **ON**.
5. Click **Save**.

![Enable Delm Core](https://storage.crisp.chat/users/helpdesk/website/-/a/4/8/8/a488abe1860c5800/enable-delm-core_e0eac2.png)

---

## Adding the widget code

Delm is built using **Web Components**, a modern suite of standard web technologies. This allows us to create custom HTML tags like `<delm-widget>` that are native to the browser. They are lightweight, highly compatible with any theme, and do not conflict with your existing JavaScript.

To find your specific code:

1. Open the **Widget** section in the Delm app.
2. Click **Install** on the widget you want to use.

![Install Widget](https://storage.crisp.chat/users/helpdesk/website/-/a/4/8/8/a488abe1860c5800/install-widget_1k1o0t0.png)

3. Select the **Liquid** tab to reveal your unique embed code.

![Widget Embed Code](https://storage.crisp.chat/users/helpdesk/website/-/a/4/8/8/a488abe1860c5800/widget-embed-code_1okjgs9.png)

---

## HTML attributes

You can use these attributes directly on the `<delm-widget>` tag to control its behavior:

| Attribute | Description |
| ---- |
| `data-widget-id` | **Optional.** If left empty, the app will load your **Default** widget. You can find specific IDs by clicking **Install** on any widget in the app dashboard. |
| `data-variant-id` | **Optional but recommended.** The Shopify variant ID. Linking this ensures the widget displays the correct date. If missing, the widget cannot display rule-specific dates (like those based on variant stock). |

---

## Handling variant updates with JavaScript

The Liquid snippet is static by default. If a customer selects a different color or size, the widget needs to be told that the variant ID has changed and then commanded to reload.

### Example: Refreshing on change

The following example includes the widget with a unique ID and a script that "watches" the standard Shopify variant input. Whenever a selection is made, the script checks if the ID is different, updates the property, and calls the load method.

**Note on view limits:** Each time the widget reloads to show data for a new variant, it fetches fresh information from our servers. Because of this, **every variant update counts as a new view** toward your monthly view limit.

```html
<delm-widget 
  id="delm-product-widget"
  data-widget-id="00000000-0000-0000-0000-000000000000"
  data-variant-id="{{ product.selected_or_first_available_variant.id }}">
</delm-widget>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    // Select the hidden "ID" field that Shopify uses to add items to the cart
    const variantInput = document.querySelector('form[action*="/cart/add"] [name="id"]');
    if (!variantInput) {
      return;
    }
    
    variantInput.addEventListener('change', function (event) {
      const widget = document.getElementById('delm-product-widget');
      if (!widget) {
        return;
      }

      const newVariantId = event.target.value;
      const currentVariantId = widget.getVariantId();

      // Only reload if the variant has actually changed
      if (newVariantId === currentVariantId) {
        return;
      }

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

### Available developer methods

For custom integrations, the following methods are available on the `delm-widget` element:

| Method | Description |
| ---- |
| `.setVariantId(id)` | Updates the variant ID attribute. Note: You must call `.load()` afterward to see the changes. |
| `.setWidgetId(id)` | Updates the widget ID attribute. Note: You must call `.load()` afterward to refresh the content. |
| `.load()` | Triggers the widget to fetch fresh data from the Delm servers based on current attributes. |
| `.getVariantId()` | Returns the current variant ID associated with the widget. |
| `.hide()` | Stops all timers and hides the widget from view. |

---

## Troubleshooting

### The widget is not showing up

* **App Embed:** Double-check that **Delm Core** is enabled in your theme's App embeds settings.
* **App Status:** Ensure the app is enabled in your Delm dashboard.
* **Plan Limits:** Check your usage in the **Billing** section. If you have exceeded the monthly view limit of your plan, the widget will stop appearing.
* **Published Status:** Verify that your widget is set to **Published** in the widget editor.
* **Invalid Widget ID:** Ensure the `data-widget-id` used in your code actually exists in your dashboard. If you use an ID for a widget that has been deleted or is incorrect, the component will fail to load content.

### Incorrect delivery dates are appearing

Ensure you are passing the correct variant ID to the widget. If you are adding the widget to a collection page or a cart, you may need to use different variables like `card_product.id` or `item.variant_id`.

### The widget does not update on variant change

Please see our detailed troubleshooting guide: [Why is the widget not updating when I change variants?](/en/article/why-is-the-widget-not-updating-when-i-change-variants-1rwa8lh/)

---

## Technical support

If you need help with a custom technical implementation or finding the correct selectors for your theme, please reach out to our support team. Note that personalized code assistance requires a plan with **Premium Support**.