Articles on: Integrations
This article is also available in:

Delm + UpCart

You can display specific delivery dates for every item inside the UpCart drawer. This setup uses UpCart's custom JSX templates to embed the Delm widget directly into the cart tiles.


Difficulty: Advanced

Requirement: You must be comfortable editing JSX/HTML-like code within the UpCart editor.



1. Enable the Delm Core app embed


The Delm Core app embed is required whenever you add widgets directly to your theme templates (like UpCart) rather than using standard app blocks. It loads the necessary JavaScript to power the widgets.


  1. Go to Shopify Admin > Online Store > Themes > Customize.
  2. Open App embeds on the left.
  3. Toggle Delm Core to ON and click Save.


Enable Delm Core



2. Create a cart-specific widget


Since space in a cart drawer is limited, we recommend creating a new widget in Delm with a much shorter message.


  • Example text: Delivery {{delivery_completed}}
  • Design: Choose a minimal layout without large icons to ensure it fits the compact UpCart tile.


New Widget



3. Enable custom templates in UpCart


UpCart requires you to opt-in to advanced template editing.


  1. Open the UpCart app.
  2. Go to Cart Editor > Settings > Cart Settings.
  3. Scroll to Advanced Settings and enable Access custom templates.


Enable Custom Templates



4. Add the widget to the UpCart template


Now you will insert the Delm widget into the Product Tile template.


  1. In the Delm app, select your cart widget, click Install, go to the Liquid tab, and copy the Widget ID (the long string of letters and numbers).


Install Widget


Widget Embed Code


  1. In the UpCart editor, navigate to Cart Items > Product Tile.
  2. Locate the spot where you want the date to appear (for example, above the quantity input).
  3. Paste the following code snippet, replacing YOUR_WIDGET_ID with the ID you copied:


<delm-widget
data-widget-id="YOUR_WIDGET_ID"
data-variant-id={props.rawItem.variant_id}
></delm-widget>


UpCart JSX Template



Why the code looks different


Unlike standard Shopify Liquid files, UpCart uses JSX. We replace the standard Liquid variable with the UpCart-specific variable {props.rawItem.variant_id} so that Delm knows exactly which variant is in the cart.



5. Save and test


Once you save the template in UpCart, open your store and add an item to your cart. You should now see a specific delivery date calculated for each individual product within the drawer.


UpCart Cart Drawer

Updated on: 19/02/2026

Was this article helpful?

Share your feedback

Cancel

Thank you!