Skip to main content

Customizing the Cart Delivery Estimate

This guide explains the Cart settings in the ArrivesBy app embed, which show a delivery estimate on each cart line.

Written by Trevor Reid

ArrivesBy can show a delivery estimate on each line of your cart, for example "Arrives by Oct 3 - 5".

Turn on the ArrivesBy app embed in the theme editor under App embeds, then open Cart settings. Cart settings need the Scale plan or above.

Settings

  • Cart line item: leave on Smart locate. If some lines are missed, see If the estimate doesn't show.

  • Line item key attribute: the attribute your theme uses to identify each cart line, for example data-key. Only used when Cart line item is set to Specify HTML attribute.

  • Line text: the text shown on each line. Defaults to Arrives by [delivery_range]. Bold, italic and links are supported.

  • Date format: Short, Medium, Long, Weekday short, Weekday long, Short numeric, Numeric or ISO. Dates follow your shopper's language.

Variables

Use these in Line text. Each one is replaced with the real date for that line.

  • [delivery_range]: the delivery date, or a range like "Oct 3 - 5"

  • [delivery_min_date]: the earliest delivery date

  • [delivery_max_date]: the latest delivery date

Variables from the product blocks, such as [ship_range] or [countdown], don't work in the cart and show as typed.

If the estimate doesn't show

ArrivesBy matches each cart line using its line key, a code unique to that line, like 45678901234567:0123456789abcdef0123456789abcdef. Smart locate looks for an attribute on your cart page that holds this code. It also recognises the code inside a remove link's /cart/change?id= address and in row ids that end with it, such as CartItem-<line key>. If your theme doesn't include the code in any of these ways, no estimate shows.

Check your theme for an attribute

Do this on your live store, using your browser's developer tools.

  1. Add a product to your cart.

  2. Open your-store.com/cart.js in a new tab and copy the first "key" value, without the quotes.

  3. Back on your cart, right-click the product and choose Inspect.

  4. In the Elements tab, press Ctrl+F (Cmd+F on Mac) and paste the key.

If it matches, the name before the = is the attribute:

data-line-key="45678901234567:0123456789abcdef0123456789abcdef"

Set Cart line item to Specify HTML attribute and enter data-line-key in Line item key attribute.

When you use Specify HTML attribute, the value must be exactly the line key. A key inside a longer value, such as a remove link, can't be used there. Smart locate does accept those, so you only need this setting if Smart locate misses lines.

Add the attribute to your theme

If nothing matched, add data-ab-line-key to your cart. Smart locate picks it up automatically.

Theme edits can break your store, so make changes carefully.

  1. In your Shopify admin, go to Online Store > Themes, then … > Edit code.

  2. Find the file that draws each cart line. Look in Sections and Snippets for names like main-cart-items, cart-items or cart-drawer. It contains a loop like {% for item in cart.items %}.

  3. Add the attribute to the outermost element of one cart line, usually a <tr>, <li> or <div>. Use the name from the loop, item or line_item:

    <tr class="cart-item" data-ab-line-key="{{ item.key }}">

  4. Repeat for your cart drawer, if your theme has one. It is usually a separate file.

  5. Reload your cart. The estimate should appear.

Add the attribute to one element per line only. If it's on nested elements, or one line's element wraps another line, those lines are skipped.

Migrate from the old cart embed

The new cart estimate doesn't save the ETA to your orders' line item info, and it doesn't show in checkout. It appears in the cart only. If you need either, keep using the old embed for now.

The old embed is named Cart ETA (deprecated) in the theme editor. It keeps working, but it is replaced by the Cart settings above.

  1. In the theme editor, open App embeds and turn on Delivery Promises if it isn't on already.

  2. Turn off Cart ETA (deprecated). The new estimate doesn't appear while the old embed is on.

  3. In the ArrivesBy app, find Extensions on the home page. On the Cart row, open the menu next to Edit in Theme editor and choose Enable.

  4. In the theme editor, open Delivery Promises > Cart settings. Set Line text and Date format to match what you used before. If your old Cart estimate text was "Arrives by", the new default Arrives by [delivery_range] already matches.

  5. Reload your cart and check each line. If an estimate is missing, see If the estimate doesn't show.

Once the old embed is off, the Cart and Checkout (deprecated) row disappears from Extensions.

Need a hand? Message our support team with the name of your cart file and we'll help.

Did this answer your question?