How to Add a Delivery Date Picker to Shopify Cart Page

2026-10-18 · shipping fulfillment

A delivery date picker on the Shopify cart page lets customers choose when they want their order to arrive before they check out. That matters most for florists, bakeries, meal-kit sellers, and any store where "when it arrives" is part of the purchase decision. This guide covers two ways to add one — a theme code edit and a lightweight app — plus how to save the date to the order, style it, and test it before launch.

Why Add a Delivery Date Picker to the Shopify Cart Page

The cart page is the last point where a customer can change their mind about the whole order without re-entering shipping details. Asking for a delivery date there does three things:

• Reduces failed deliveries. A customer who picks a date has committed to being available. Fewer "no one was home" redeliveries, fewer refund requests.
• Cuts support tickets. "Can I get this by Friday?" emails drop sharply when the answer is a calendar on the cart page.
• Improves conversion on gifting and perishable products. Cake, flowers, and gift boxes sell better when the buyer can see a concrete date rather than a vague "3–5 business days."

A date picker is not right for every store. If you sell digital goods or long-tail inventory with unpredictable lead times, a simpler "delivery notes" field may serve you better. But for scheduled delivery, it's worth the setup.

Option 1: Add a Delivery Date Picker With a Theme Code Edit

This is the free route. You edit your theme's cart template and add a native HTML date input plus a small script that carries the value into cart attributes. Shopify's cart attributes are the mechanism that saves custom fields to an order — no app required.

Steps:

1. In your Shopify admin, go to Online Store → Themes → Edit code.
2. Duplicate your theme first (Actions → Duplicate) so you have a rollback point.
3. Open sections/main-cart-items.liquid (Dawn and most OS 2.0 themes) or templates/cart.liquid (older themes).
4. Inside the cart <form> — the one that posts to /cart — add a labelled date field:

<div class="cart-delivery-date">
  <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>

5. Save. The name="attributes[Delivery date]" attribute is what makes Shopify store the value on the order — the key becomes the attribute name shown in the admin.
6. If your theme's cart updates via AJAX (Dawn does), confirm the field sits inside the form that submits on the cart page, not inside a separate quantity form that refreshes independently.

When to choose this option: you're comfortable editing Liquid, you want zero recurring cost, and you only need a single date field. When not to: you need blackout dates, per-product lead times, or capacity limits per day — the native input can't enforce those on its own.

Option 2: Use a Lightweight App to Add a Delivery Date Picker

Apps exist for exactly this job, and they handle the logic a code snippet can't: blocking holidays, limiting orders per day, and hiding dates that fall inside a product's lead time.

Realistic candidates to evaluate (check current pricing and reviews in the Shopify App Store before committing — plans change):

• Delivery Date & Time style apps that add a date and time-slot picker to cart or product pages.
• Order Delivery Date apps, which typically combine date selection with cut-off times.
• Advanced shipping/checkout customizers if you also need per-product rules.

Evaluation criteria that actually matter:

• Does it inject the picker on the cart page specifically, or only at checkout? Checkout-page injection requires a Shopify Plus plan for most script-based tools, so cart page is the practical target for standard plans.
• Does it write the date to cart attributes or order metafields, and can you see it in the admin order view and in export/fulfilment integrations?
• Can you set blackout dates and daily capacity limits?
• Does it work with your theme without breaking the cart's AJAX refresh?
• Does it offer a free trial so you can test the full flow before paying?

Install the app, follow its setup wizard to place the widget on the cart page, and configure your date rules in the app dashboard. Most take under 20 minutes to configure. The trade-off is a monthly fee and one more dependency in your stack.

Capturing and Saving the Chosen Date on the Order

Whichever route you take, the date must end up somewhere your fulfilment team will see it. There are two storage patterns:

Cart attributes are the simplest and survive checkout automatically. Metafields are better when you want to trigger Shopify Flow automations — for example, tagging orders that need next-day dispatch. Confirm with any app vendor that the date is written to a field you can export; a picker that only displays in the app's own dashboard creates re-keying work.

Styling the Picker and Setting Available Date Rules

A native <input type="date"> looks different on every browser. To match your brand, style the wrapper and let the browser handle the calendar popup — fighting the native picker with custom JS is rarely worth it. Set a width, padding, border radius, and font to match your cart's other inputs, and add a short helper line ("We deliver Tuesday–Saturday").

Rules to set, whether in code or in an app:

• Minimum date: today plus your production lead time. In Liquid, {{ 'now' | date: '%Y-%m-%d' }} gives today; add days with a date filter or compute it in JS.
• Maximum date: typically 30–60 days out, so customers don't book a date you can't forecast stock for.
• Blocked days: Sundays, public holidays, and any closure dates.
• Capacity caps: if you can only fulfil 40 orders a day, cap selections per date.
• Cut-off time: orders placed after 2pm ship the next working day — state this next to the picker.

Testing the Delivery Date Picker Before You Launch

Run this checklist on a duplicate theme before publishing:

• Place a test order with a date selected and confirm the date appears on the order in the admin.
• Place a test order without a date if the field is optional, and confirm checkout doesn't break.
• Test on mobile Safari and Chrome — the native date picker behaves differently on iOS.
• Try to select a blocked date and confirm it's rejected.
• Add an item, change quantity on the cart page, and confirm the date isn't wiped by the AJAX cart refresh.
• Check the order export (CSV) includes the date column.
• Ask a colleague to complete a real checkout on a password-protected store.

Common Issues and Fixes for Cart Page Date Pickers

• Date doesn't appear on the order. The field is outside the cart form, or the name attribute is misspelled. It must be exactly attributes[Your label].
• Date resets when quantity changes. Your theme re-renders the cart via AJAX and drops custom fields. Move the field into the persistent form or re-populate it from sessionStorage on refresh.
• Customer can pick a past date. Add a min attribute and validate again server-side or in the app.
• Picker doesn't show on mobile. Some themes hide custom cart fields below a breakpoint. Check your CSS for display: none on the container.
• App conflicts with theme cart drawer. Disable the drawer for the cart page or check the app's compatibility notes.

Conclusion

Adding a delivery date picker to your Shopify cart page is a small change with an outsized effect on scheduled-delivery stores: fewer missed deliveries, fewer support emails, and a clearer promise at the moment of purchase. Start with the free Liquid approach if you need one date field; move to an app when you need blackout dates and capacity limits. Either way, test the full order flow before you publish.

FAQ

Will the delivery date show up in Shopify's order notifications and exports? Cart attributes appear on the order's detail page and are included in order CSV exports. Whether they appear in customer emails depends on your notification templates — you may need to add the attribute to the order confirmation template manually.

Can I add a delivery date picker without editing code? Yes. Delivery-date apps install a widget through their own setup wizard and don't require theme edits, though you should still test that the widget renders correctly in your theme's cart.

Does this work if my store uses a cart drawer instead of a cart page? It can, but the drawer re-renders more aggressively and often drops custom fields. Either disable the drawer on the cart page or use an app that explicitly supports drawer carts — check that before installing.