How can I display delivery dates using Liquid?

While the app block 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, EComposer, or GemPages 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.

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

Enable Delm Core

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:

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

Install Widget

Select the Liquid tab to reveal your unique embed code.

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.

<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

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 date does not update on variant change

The most common cause for dates not updating is that the CSS selector for the variant input (used in the script above) does not match your specific theme.

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.

Updated on: 25/02/2026

Was this article helpful?

Thank you!