Why is the widget not updating when I change variants?

This troubleshooting guide involves advanced technical steps like adjusting CSS selectors and reviewing JavaScript events. If you are not comfortable working with theme code, please reach out to our support team for assistance.

How variant updates work

When a customer selects a different size or color, the delivery date needs to update to reflect the stock or processing time of that specific variant.

Every Shopify /cart/add form has a hidden input field (<input type="hidden" name="id">) that stores the ID of the selected variant. Because Shopify requires this field to add a product to the cart, it is the most reliable way for Delm to track which version of a product a customer is looking at.

When a customer selects a new option, your theme updates this hidden input and broadcasts a standard JavaScript "change" event. Delm uses a CSS selector to watch this field and automatically reloads the widget when it detects that change.

If the displayed date is not changing, here are the most common reasons and how to fix them.

1. Incorrect CSS selector (Most common)

If your theme uses a different CSS selector than what is configured in the Delm app block, the widget cannot find the hidden input. It will not detect any changes.

How to fix: 1. Open your product page and right-click your variant selector.

2. Select Inspect to open your browser developer tools.
3. Find the <input type="hidden" name="id"> element in your /cart/add form and note its unique CSS selector (like its exact ID or class name).
4. Open your Shopify Theme Editor and click on the Delm Delivery Widget app block.
5. Find the Update when variant changes setting and update the CSS selector to match the element from step 3.

2. Missing change event in your theme

Some themes successfully update the hidden variant ID input, but they fail to broadcast the standard "change" event. Without this signal, third party apps like Delm cannot know that an update occurred.

How to fix: This requires a small fix in your theme JavaScript. The theme developer needs to dispatch a change event after updating the input value. For reference, you can see how our team fixed this exact issue by submitting a pull request to the official Shopify Horizon theme here: https://github.com/Shopify/horizon/pull/54.

3. Using a custom product options app

Third party apps that add custom dropdowns or swatches (like Teeinblue) often bypass the standard Shopify form entirely. Because of this, Delm cannot automatically detect when a customer makes a selection.

How to fix: These apps require a small custom script. Follow our Liquid guide to manually trigger widget updates.

4. Do the variants actually have different dates?

The widget will only update visually if the new variant actually has a different delivery timeline. If all your variants share the exact same processing and transit rules, the displayed date will stay exactly the same.

How to verify: Check your Delm dashboard rules to confirm that the specific variant you are switching to is configured to have a different processing or transit time than the default.

Updated on: 04/03/2026