How to Add a Delivery Date Picker to Shopify Cart

2026-10-14 · shipping fulfillment

A delivery date picker on your Shopify cart lets customers choose when they want an order to arrive, not just what they're buying. It's one of the highest-leverage small changes you can make to a store that ships physical goods — especially for flowers, baked goods, gifts, and local delivery. This guide covers two ways to add one (app and custom code), how to pass the chosen date through to checkout, and how to test it before you go live.

Why a Delivery Date Picker Reduces Missed Deliveries and Support Tickets

Most delivery problems aren't logistics problems — they're expectation problems. A customer assumes "3–5 business days" means it arrives before their mother's birthday. It doesn't. They email support. You issue a refund or a rushed re-ship.

A date picker fixes this at the source by making the delivery window explicit and customer-chosen. Three concrete benefits:

• Fewer "where is my order?" tickets. The customer picked the date themselves, so there's no ambiguity to argue about.
• Fewer failed deliveries. For local delivery, a customer who knows they'll be out on Tuesday will pick Wednesday instead of letting a courier leave a box on the porch.
• Higher conversion on gift and occasion products. Buyers are more confident when they can see a date that works for the recipient.

The tradeoff is operational: you have to actually honor the dates you offer. That's why the cutoff-time section below matters as much as the picker itself.

Option 1: Use a Shopify App to Add a Delivery Date Picker (No Code)

If you don't want to touch Liquid, an app is the fastest route. Several established apps in this category include Order Delivery Date, Delivery Date Pro, and Bird Pickup & Delivery. Features and pricing change often, so check current pricing and the Shopify App Store listing directly before committing.

Here's how the flow generally works:

1. Install the app from the Shopify App Store and approve the permissions it requests (usually read/write access to orders and your theme).
2. Open the app's settings and choose where the picker appears — typically the cart page, the product page, or both. For this guide, enable the cart page widget.
3. Set your rules: which days of the week you deliver, how many days of lead time you need, blackout dates (holidays, vacation), and the maximum date range customers can pick from.
4. Choose the field label and whether the date is required or optional.
5. Save, then open your storefront cart to confirm the widget renders.

The main advantage is that the app handles the hard part — writing the chosen date into the order as a cart attribute or line item property, so it shows up in your admin and on the packing slip. The main disadvantage is ongoing cost and a small amount of added page weight.

Pick an app if: you want this live today and don't want to maintain code. Skip the app if: you need a very specific layout, or you're already comfortable editing theme files.

Option 2: Add a Delivery Date Picker with Custom Code in Your Cart Template

This approach uses a native HTML <input type="date"> inside a Shopify cart form. No JavaScript library required.

Step 1 — Duplicate your theme. In Shopify admin, go to Online Store → Themes → … → Duplicate. Never edit the live theme directly.

Step 2 — Open the cart template. Go to Edit code and find sections/main-cart.liquid (in newer Shopify themes like Dawn) or templates/cart.liquid (older themes). The exact filename varies by theme.

Step 3 — Locate the cart form. Find the <form action="/cart" method="post"> element. Your input must live inside this form so it submits with the cart.

Step 4 — Add the date field. Insert this markup just above the checkout button:

<div class="delivery-date-field">
  <label for="delivery-date">Preferred delivery date</label>
  <input
    type="date"
    id="delivery-date"
    name="attributes[Delivery Date]"
    min="{{ 'now' | date: '%Y-%m-%d' }}"
    required
  >
</div>

The name="attributes[Delivery Date]" attribute is the key part — that's what turns this into a Shopify cart attribute.

Step 5 — Style it. Add a small CSS block to match your theme:

.delivery-date-field { margin: 1rem 0; }
.delivery-date-field label { display: block; font-weight: 600; margin-bottom: .25rem; }
.delivery-date-field input { padding: .5rem; border: 1px solid #ccc; border-radius: 4px; width: 100%; max-width: 320px; }

Step 6 — Save and preview. Reload your cart page. The picker should appear above the checkout button.

One limitation: a plain date input lets customers pick any future date, including days you don't deliver. To restrict that, you'll need a small JavaScript snippet that sets the min attribute dynamically and disables specific weekdays or blackout dates.

How to Capture the Delivery Date at Checkout with Cart Attributes

Cart attributes are extra fields attached to an order, separate from line items. They're the right mechanism here because the delivery date applies to the whole order, not one product.

Once your input uses name="attributes[Delivery Date]", Shopify automatically stores the value. To confirm:

1. Add a product to the cart, pick a date, and click checkout.
2. Complete a test order (use Shopify's Bogus Gateway in test mode, or a 100% off discount code).
3. In admin, open the order. Scroll to the bottom — you'll see an Additional details or Note attributes section listing Delivery Date and the value.

To surface it on packing slips and order confirmation emails, reference it in your notification templates:

{% if attributes['Delivery Date'] %}
  Delivery Date: {{ attributes['Delivery Date'] }}
{% endif %}

If you'd rather store the date per product (useful when different items ship separately), use a line item property instead: name="properties[Delivery Date]" inside the product form.

Testing Your Delivery Date Picker on Desktop and Mobile

Test on real devices, not just a resized browser window. Mobile date pickers behave differently across iOS Safari, Android Chrome, and in-app browsers like Instagram's.

Run through this checklist:

• Desktop Chrome, Safari, Firefox — the picker opens, the selected date persists after page reload.
• iOS Safari — the native wheel picker appears; the date isn't truncated in the cart summary.
• Android Chrome — the calendar dialog opens and closes cleanly.
• In-app browser (open your store link from Instagram or TikTok) — confirm the picker still functions.
• Empty cart — the field doesn't break the layout.
• Required validation — submitting without a date blocks checkout with a visible message.
• Order round-trip — place a test order and verify the date appears in admin, on the packing slip, and in the confirmation email.

Best Practices for Delivery Date Windows and Cutoff Times

• Set a realistic minimum lead time. If your fulfillment team ships next business day, don't offer same-day. Two to three days is a safe default for most small stores.
• Publish a cutoff time. "Orders placed after 2pm ET ship the next business day" prevents the classic complaint where a customer orders at 5pm Friday and expects Monday delivery.
• Offer windows, not exact times, for local delivery — "9am–12pm" is easier to honor than "by 10am."
• Block your blackout dates. Holidays, supplier closures, and your own vacation should be excluded from the picker.
• Cap the range. Allowing bookings 18 months out creates a calendar you'll forget to check.
• State the policy next to the field. One line — "We deliver Tuesday–Saturday" — removes most confusion before it starts.

Troubleshooting Common Issues and Next Steps

The date doesn't show in the order. Check the name attribute spelling. It must be exactly attributes[Delivery Date] and the input must sit inside the cart <form>.

The picker appears on the product page instead of the cart. You edited the wrong template, or an app is injecting its own widget. Disable the app widget first to avoid two pickers.

Customers can pick past dates. Add a min attribute, or use JavaScript to set it to today's date on page load.

The field disappears after an AJAX cart update. Themes that update the cart without a full reload (Dawn, most modern themes) re-render the cart section. Either move the field outside the re-rendered area or re-inject it via the theme's cart update callback.

Next steps: once the date is captured reliably, wire it into your fulfillment workflow — a Shopify Flow automation can tag orders by delivery date, and your packing slip template can sort by it.

Adding a delivery date picker is a small change with an outsized effect on support volume. Start with the no-code app route if speed matters, or the cart attribute method if you want full control over the layout. Either way, test the full order round-trip on a real phone before you announce it to customers.

FAQ

Does adding a date picker require a Shopify Plus plan? No. Cart attributes and the <input type="date"> method work on every Shopify plan, including Basic. Only some advanced automation tools have plan restrictions.

Will the delivery date show up on the packing slip automatically? Not by default. You need to add a Liquid reference to your packing slip template, as shown in the cart attributes section above.

Can I limit which days customers can choose? Yes, but not with plain HTML alone. You'll need a short JavaScript snippet to disable specific weekdays or blackout dates, or an app that handles this in its settings.