Display & position
This guide explains how to configure the Display & Position settings to customize the Estimated Time of Arrival (ETA) widget on your Shopify store.
Purpose: Enable or disable the ETA widget across your store.
How to Use:
Activate App: Switch the toggle to “On” to enable the widget.
Deactivate App: Switch the toggle to “Off” to hide the widget.
Choose how to integrate the ETA widget into your store theme. Three methods are available:
Add App Block: Easily add the widget as a block using Shopify’s theme editor. Click “Add block” to insert the widget into your store’s desired section.
Embed App: Place the widget through Shopify’s theme editor without writing code. Click “Embed app” to automatically position the widget in your theme.
Manual (Custom Liquid Code): For advanced customization or precise widget placement.
Copy the provided HTML snippet:
<div class=”ot-estimated-shipping”></div>
Insert it into the desired section in the Shopify theme.
Note: If using Page Builder, embed the app in Shopify’s Theme Editor and add the custom liquid code in the Page Builder’s editor.
Control where the ETA widget appears on your store.
Purpose: Specify which pages the ETA banner displays on.
Options:
Product: Show widget on product pages.
Home: Show widget on the home page.
Collection: Show widget on collection pages.
All Pages: Display the widget across all store pages.
Custom Positioning: Custom code positioning.
Note: Rules with conditions may not display correctly on non-product pages due to Shopify’s limitations.
You can choose whether to display ETA banner for product/variant not enabled “[Track quantity](https://help.shopify.com/en/manual/products/inventory/getting-started-with-inventory/set-up-inventory-tracking)” in Shopify admin. This can be useful for stores that sell made-to-order items, dropshipped products, or other cases where inventory is not explicitly tracked. Simply toggling on this option to enable.
Choose how the ETA widget displays delivery estimates in the cart and checkout process.
Shopify themes compatible with dynamic date
Inspect the cart page or drawer in the “Elements” tab. Ensure it includes cart-item, cart-item__details, and dl (written exactly like this) in the correct nesting order from outer to inner elements.
Since Shopify doesn’t allow third-party apps to modify emails directly, you can manually add the delivery estimates by following these steps.
Note that these instructions usually work for Shopify's default email template. If you use a different template, it might not work as expected. Please contact us for support.
Go to Store Settings > Notifications > Choose email template that you want to add message text
Inspect the line in a product cell (press F12 or right-click > Inspect) below which you want to display delivery estimates. The best practice is below the discount code. Copy the span class, here is:
Copy
3/ Click Edit code. Ctrl F and paste the class you have copied to search its location. Then copy this code
Case 1: No discount - Paste the codes above expand_bundles
Search for more instances. If you want to show the date for line item inside a bundle, paste the code between endif and </td>
Case 2: Have discount
Add the code under the line item title, and change line.properties to line_item_group.properties
Configure to show on store
Activate app
Purpose: Enable or disable the ETA widget across your store.
How to Use:
Activate App: Switch the toggle to “On” to enable the widget.
Deactivate App: Switch the toggle to “Off” to hide the widget.
Add App to Store Theme
Choose how to integrate the ETA widget into your store theme. Three methods are available:
Add App Block: Easily add the widget as a block using Shopify’s theme editor. Click “Add block” to insert the widget into your store’s desired section.
Embed App: Place the widget through Shopify’s theme editor without writing code. Click “Embed app” to automatically position the widget in your theme.
Manual (Custom Liquid Code): For advanced customization or precise widget placement.
Copy the provided HTML snippet:
<div class=”ot-estimated-shipping”></div>
Insert it into the desired section in the Shopify theme.
Note: If using Page Builder, embed the app in Shopify’s Theme Editor and add the custom liquid code in the Page Builder’s editor.
Configure for Specific Places
Control where the ETA widget appears on your store.
**Pages**
Purpose: Specify which pages the ETA banner displays on.
Options:
Product: Show widget on product pages.
Home: Show widget on the home page.
Collection: Show widget on collection pages.
All Pages: Display the widget across all store pages.
Custom Positioning: Custom code positioning.
Note: Rules with conditions may not display correctly on non-product pages due to Shopify’s limitations.
**Show Banner When Inventory Is Not Tracked**
You can choose whether to display ETA banner for product/variant not enabled “[Track quantity](https://help.shopify.com/en/manual/products/inventory/getting-started-with-inventory/set-up-inventory-tracking)” in Shopify admin. This can be useful for stores that sell made-to-order items, dropshipped products, or other cases where inventory is not explicitly tracked. Simply toggling on this option to enable.
Date Mode of Delivery Estimates in Cart and Checkout
Choose how the ETA widget displays delivery estimates in the cart and checkout process.
| Category | Static date | Dynamic date |
|---|---|---|
| Compatibility | Any theme | Shopify themes |
| How it works | This displays a static delivery date when the product is added to the cart and remains unchanged, even if the customer revisits the cart later. | This dynamically updates the delivery estimate based on the current date, ensuring accuracy if the customer revisits their cart. |
| Placement | ||
| Cart page | ✓ | ✓ |
| Cart drawer | ✓ | ✓ |
| Cart popup | ✓ | x |
| Checkout, Thank you, Order status page | ✓ | x |
| ✓ | x | |
| Orders - Shopify Admin | ✓ | x |
Shopify themes compatible with dynamic date
| Themes by Shopify | Cart page | Cart drawer | Cart popup |
|---|---|---|---|
| Colorblock | ✓ | ✓ | Not compatible |
| Craft | ✓ | ✓ | |
| Crave | ✓ | ✓ | |
| Dawn | ✓ | ✓ | |
| Origin | ✓ | ✓ | |
| Publisher | ✓ | ✓ | |
| Refresh | ✓ | ✓ | |
| Ride | ✓ | ✓ | |
| Sense | ✓ | ✓ | |
| Spotlight | ✓ | Not compatible | |
| Studio | ✓ | ✓ | |
| Taste | ✓ | ✓ | |
| Trade | ✓ | ✓ |
How to check if a theme is compatible with dynamic date?
Inspect the cart page or drawer in the “Elements” tab. Ensure it includes cart-item, cart-item__details, and dl (written exactly like this) in the correct nesting order from outer to inner elements.
Show Message Text in Email
Since Shopify doesn’t allow third-party apps to modify emails directly, you can manually add the delivery estimates by following these steps.
Note that these instructions usually work for Shopify's default email template. If you use a different template, it might not work as expected. Please contact us for support.
Go to Store Settings > Notifications > Choose email template that you want to add message text
Inspect the line in a product cell (press F12 or right-click > Inspect) below which you want to display delivery estimates. The best practice is below the discount code. Copy the span class, here is:
Copy
class="order-list__item-title"3/ Click Edit code. Ctrl F and paste the class you have copied to search its location. Then copy this code
{% for p in line.properties %}
{% unless p.last == blank %}
{{ p.first }}: {{ p.last }}
{% endunless %}
{% endfor %}Case 1: No discount - Paste the codes above expand_bundles
Search for more instances. If you want to show the date for line item inside a bundle, paste the code between endif and </td>
Case 2: Have discount
Add the code under the line item title, and change line.properties to line_item_group.properties
Updated on: 01/06/2025
Thank you!