How to Add a Delivery Date Picker to Shopify Checkout

2026-10-12 · shipping fulfillment

How to Add a Delivery Date Picker to Shopify Checkout

A customer adds a gift to their cart, pays for standard shipping, and then emails you asking if it can arrive by Friday. Multiply that by a few orders a week and you have a real operational problem: you're collecting delivery preferences by email instead of at checkout, where the customer is already deciding how much to spend.

A delivery date picker fixes this by letting shoppers choose a date (and often a time slot) before they pay. This guide covers what Shopify does natively, the workarounds that cost nothing, the apps that do it properly, and how to test the whole thing so you don't promise dates you can't hit.

Why Add a Delivery Date Picker to Shopify Checkout (and What It Actually Solves)

A date picker is not a cosmetic feature. It solves four specific problems:

• Failed deliveries. If a customer isn't home, the courier reattempts or returns the parcel. Each failed attempt costs you a redelivery fee and a support ticket.
• Gift and occasion orders. Birthday cakes, flowers, and hampers need to land on a specific day, not "sometime next week."
• Local delivery and pickup scheduling. If you run your own van or offer curbside pickup, you need to know which orders go out on which route.
• Fewer pre-purchase support emails. "Can this arrive by the 14th?" is answered at checkout instead of in your inbox.

It also sets expectations. A customer who picks their own slot is far less likely to open a dispute than one who assumed a date.

What Shopify Checkout Allows Natively — and Where the Limits Are

Shopify's checkout is deliberately locked down. On any plan, the checkout page itself (the step where payment happens) cannot be edited with custom code unless you're on Shopify Plus, where checkout extensibility and checkout UI extensions are available.

What you can do on all plans:

• Add fields and options before checkout — on the product page or in the cart.
• Use cart attributes and line item properties to attach data to an order.
• Use order notes for free-text instructions.
• Install apps that inject date pickers into the cart or product page and pass the selection through to the order.

What you cannot do without Plus:

• Add a custom field directly inside the native checkout form.
• Modify checkout.liquid (deprecated for most stores).
• Build custom checkout UI extensions.

In practice, this means almost every date picker for non-Plus stores lives on the cart page or product page, then travels with the order as an attribute. From the customer's point of view it still feels like part of checkout, because the cart page is the last step before payment.

Native Workaround 1: Capture Delivery Dates with Order Notes and Cart Attributes

The cheapest option is a free app like Order Notes or Shopify's own cart note field, which lets customers type instructions. It's better than nothing, but a free-text box produces messy data: "next tues", "14/3", "asap please".

A cleaner native approach uses cart attributes — structured fields you add to the cart page with a small snippet of Liquid. Attributes appear on the order in the admin under "Additional details," and you can read them in your fulfilment workflow.

Steps:

1. In your theme editor, open the cart template (cart.liquid or the main-cart section, depending on your theme).
2. Add a <select> or <input type="date"> field inside the cart form.
3. Give it a name attribute in the format attributes[Delivery Date].
4. Save and test: add a product, pick a date, check out, and confirm the value shows on the order.

Example field:

<label for="delivery-date">Preferred delivery date</label>
<input type="date" id="delivery-date" name="attributes[Delivery Date]" min="2025-01-01">

Limits: no validation beyond the browser's, no blackout dates, no cutoff logic, and it won't stop a customer choosing a Sunday if you don't deliver on Sundays. You'd need JavaScript to enforce that.

Native Workaround 2: Use Variant Options or Line Item Properties for Date Selection

If your products are made-to-order or you sell time-sensitive items, you can attach the date to the line item rather than the cart. This is useful when different items in one order need different dates.

Two ways:

• Line item properties. Add a date field to the product template with name="properties[Delivery Date]". The value attaches to that specific product line and shows on the order, on the packing slip, and in the order confirmation email.
• Variant options. Create a variant option called "Delivery Week" with values like "Week of 3 Feb". This is simpler for non-technical staff but bloats your variant count and makes inventory tracking harder. Use it only for a handful of date options.

Line item properties are the better fit for most stores. They're free, they survive theme updates if you add them via a custom Liquid block, and they appear on the order without any app.

Low-Cost Apps That Add a Delivery Date Picker to Checkout

When you need cutoff times, blackout dates, time slots, or per-day capacity limits, an app is worth the monthly fee. These are established options in the Shopify App Store — check current pricing and reviews before installing, as plans change:

Most of these work the same way: you install the app, it adds a calendar widget to the cart page, and the chosen date/time is written to the order as an attribute or metafield. Some also let you block specific dates, set a daily order cap, and add a fee for premium slots.

Step-by-Step: Installing and Configuring a Delivery Date App

1. Install from the Shopify App Store. Search the app name, click Install, and approve the permissions.
2. Open the app's settings in your Shopify admin under Apps.
3. Choose where the picker appears — cart page is standard; some apps also support the product page.
4. Set your date range. A common setup is "earliest = tomorrow, latest = 30 days out."
5. Add cutoff times. For example, orders placed after 2pm are eligible from the day after tomorrow.
6. Block blackout dates. Public holidays, your own closure days, and any date you can't fulfil.
7. Set capacity limits if the app supports it — say, 20 deliveries per day.
8. Enable the date in notifications. Turn on the option to include the chosen date in the order confirmation and shipping confirmation emails.
9. Save, then place a test order (see below).

Testing, Cutoff Times, and Blackout Dates Before You Go Live

Do not launch a date picker without testing it end to end. Run this checklist:

• Place a test order with a date and confirm it appears on the order in the admin.
• Check the order confirmation email shows the date.
• Check the packing slip and any fulfilment app you use.
• Test the cutoff: place an order after your cutoff time and confirm the earliest selectable date shifts.
• Test a blackout date and confirm it's unselectable.
• Test on mobile — most date pickers break on small screens first.
• Test with a discount code and a multi-item cart.

Set your cutoff time based on when you actually pack orders, not when you'd like to. If your courier collects at 3pm, a 2pm cutoff is realistic; a 5pm cutoff will cause late parcels.

Which Option Should You Choose for a Store Under 100 Orders?

For fewer than 100 orders a month, start free. Use line item properties or cart attributes if you only need a date and can manually check it against your calendar. Move to a paid app when any of these become true: you need blackout dates, you need time slots, you're running local delivery routes, or you're spending more than an hour a week fixing delivery mistakes.

A $10–$20/month app pays for itself with one or two prevented failed deliveries. But if you're doing 20 orders a month and none are time-sensitive, the native field is enough — don't pay for capacity limits you'll never hit.

Conclusion

Adding a delivery date picker to Shopify checkout is really about choosing between free native fields and a paid app that handles cutoff times, blackout dates, and capacity. Non-Plus stores can't edit the checkout page itself, so plan for the cart or product page as your capture point. Test the full order flow before launch, and set your cutoff time to match your real packing schedule.

FAQ

Can I add a date picker directly to Shopify checkout? Only on Shopify Plus, using checkout UI extensions. On all other plans, the picker goes on the cart or product page and passes the date to the order as an attribute or line item property.

Do delivery date apps work with Shopify's order confirmation emails? Most established apps can inject the chosen date into Shopify's notification emails. Confirm this in the app's settings or its listing before you buy, since not all apps support it.

What happens if a customer picks a date I can't fulfil? That's what blackout dates and capacity limits are for. Set them in the app, or if you're using a native field, review orders daily and contact the customer immediately to reschedule.