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

# 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](https://storage.crisp.chat/users/helpdesk/website/-/a/4/8/8/a488abe1860c5800/enable-delm-core_kabg6d.png)

---

## 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](https://storage.crisp.chat/users/helpdesk/website/-/a/4/8/8/a488abe1860c5800/new-widget_1xp3pcg.png)

---

## 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](https://storage.crisp.chat/users/helpdesk/website/-/a/4/8/8/a488abe1860c5800/upcart-access-custom-templates_1dwflrl.png)

---

## 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](https://storage.crisp.chat/users/helpdesk/website/-/a/4/8/8/a488abe1860c5800/install-widget-1_1fvlhs7.png)

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

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

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

![UpCart JSX Template](https://storage.crisp.chat/users/helpdesk/website/-/a/4/8/8/a488abe1860c5800/upcart-jsx-template_9mnoea.png)


### 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](https://storage.crisp.chat/users/helpdesk/website/-/a/4/8/8/a488abe1860c5800/upcart-demo_pbk3y9.png)