> ## 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 + EComposer

You can integrate your delivery widgets into custom pages built with **EComposer** by using the **Code** element. This allows you to place a delivery estimate anywhere within your custom layout.

---

## 1. Enable the Delm Core app embed

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

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_17w0jnh.png)

---

## 2. Copy your widget embed code

You need the specific Liquid snippet for the widget you want to display.

1. Open the **Delm** app and go to the **Widget** section.
2. Select the widget you want to use.
3. Click **Install** and navigate to the **Liquid** tab.

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

4. Copy the code snippet (it looks like `<delm-widget ...></delm-widget>`).

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

---

## 3. Add the Code element in EComposer

Now you can place this code anywhere on your EComposer page.

1. Open your page in the **EComposer Builder**.
2. Search for the **Code** element in the left-hand sidebar elements list.

![EComposer Code Element](https://storage.crisp.chat/users/helpdesk/website/-/a/4/8/8/a488abe1860c5800/ecomposer-code-element_1ggy5xn.png)

3. Drag and drop the **Code** element onto your page where you want the delivery date to appear.
4. In the element settings on the left, find the **Custom code** field.
5. Paste the snippet you copied from Delm into this field.

![EComposer Custom Code](https://storage.crisp.chat/users/helpdesk/website/-/a/4/8/8/a488abe1860c5800/ecomposer-custom-code_58c4qi.png)

6. **Save** and **Publish** your page.

---

## 4. Verification

Once published, view your live page. The widget will automatically load and calculate the delivery date based on the product context of that page.