How to Set Up cart placement feature on Estimated Delivery App

Cart Widget — Support Guide

A guide for the support team covering the newly added cart placement feature: what it does, how merchants configure it, and what to tell them when the widget doesn't appear.

What it is

Merchants can now show estimated delivery dates on the cart page and cart drawer, not just on product pages. The cart widget is created from the app the same way as other widgets, and it reuses the delivery rules the merchant has already set up for their product widgets.

Widget modes

When creating a cart widget, the merchant picks one of two modes (Conditions tab → Widget mode):

| Mode | What the customer sees

| General | One delivery estimate for the whole order. All products in the cart are combined into a single date, based on the item with the longest delivery time.

| Per Product | A dedicated delivery line under each item in the cart. Uses a compact (minimal) design so it fits next to the line items.

Limit: one widget per mode. A merchant can have one General widget and one Per Product widget at most — they cannot create a second widget of the same mode.

Delivery times are inherited

The cart widget has no delivery rules of its own. It automatically uses the conditions from the merchant's product page widgets (the app shows an "Inherited Delivery Rules" banner in the editor).

Placement options

Configured in the widget's Placement tab (_Position_):

1. Default

The app embed automatically resolves where to insert the widget inside the cart page / cart drawer (it appears at the bottom of the cart). No merchant action needed beyond publishing the widget.

2. Custom (code snippet)

For exact control — or when Default can't find a spot in the theme — the merchant places a small snippet in their theme's cart template or cart drawer template:

<div class="essential-estimated-cart-general"></div>
<div class="essential-estimated-cart-per-product"></div>

The correct snippet for the widget's mode is shown in the Placement tab with a copy button. Next to it there's a "Learn how to place it" link that opens a step-by-step in-app guide (with screenshots) walking the merchant through:

1. Finding the desired spot in their store using the browser inspector (F12).
2. Copying the class name of the nearest element.
3. Opening the theme code editor (one-click button).
4. Searching the theme code for that class and pasting the snippet.
5. Refreshing the store preview to verify.

Point merchants to that guide before walking them through it manually.

Theme compatibility (important)

• Default placement is tested against the most popular free Shopify themes.
• On custom or paid themes, Default placement will most likely fail to position the widget — this is expected, not a bug.

Support takeaway: if a merchant on a custom/paid theme reports "the cart widget doesn't show up," the standard answer is to switch the widget's Position to Custom and place it with the code snippet (using the in-app guide above).

Quick troubleshooting checklist

1. Widget doesn't appear in cart → Is the widget published? Is the theme custom/paid? If so → Custom placement with the snippet.
2. Snippet placed but nothing renders → Check the snippet class matches the widget's mode (-general     vs -per-product    ), and that it's in the template that's actually used (cart page vs cart drawer).
3. Dates look wrong → Check the product widgets' delivery conditions (cart inherits them). In General mode, the slowest product in the cart sets the date.
4. Merchant wants two General widgets (e.g. one for cart page, one for drawer) → Not supported; one widget per mode.
5. Merchant wants to display only the cart widget → Open the widget you want to hide, go to Design → Custom CSS and add:

css .essential-estimated-delivery-widget { display: none !important; }