How to Add a Delivery Date Picker to Shopify Thank You Page

2026-10-15 · shipping fulfillment

How to Add a Delivery Date Picker to Shopify Thank You Page

Collecting a preferred delivery date at checkout is one of the simplest ways to reduce failed deliveries, cut "where is my order" tickets, and give customers a sense of control over when their order arrives. This guide walks through adding a delivery date picker to the Shopify thank you page using checkout UI extensions and cart attributes — the two supported methods that actually work on modern Shopify stores.

Why Add a Delivery Date Picker to the Thank You Page?

Asking for a delivery date after the order is placed sounds backwards, but there's a good reason sellers do it. The thank you page (also called the order status or post-purchase page) is a low-friction moment: the payment is already captured, so you're not adding a step that could cause cart abandonment. You're simply gathering scheduling information.

The practical benefits:

• Fewer failed deliveries. If you ship perishable goods, furniture, or high-value items, a customer-selected date lets you avoid leaving a package on a doorstep when nobody's home.
• Better routing for local delivery and pickup. Bakeries, florists, and meal-kit sellers can batch orders by requested date instead of guessing.
• Fewer support tickets. Customers who pick their own date rarely email to change it.
• Cleaner data. The date is stored as an order attribute, so it appears on the order record and in your exports, not buried in a note field.

The tradeoff is real: some customers will skip the field entirely. That's fine. Treat it as an optional preference, not a required data point.

What You Need Before You Start

Before you touch any settings, confirm your setup. The method differs depending on your Shopify plan and theme.

• A Shopify plan that supports checkout extensibility. As of Shopify's checkout extensibility rollout, checkout.liquid (the old way of editing checkout pages) is deprecated. New customizations use checkout UI extensions, which require an app or a developer setup.
• A checkout customization app OR a custom app. For most small sellers, an app is the fastest route. Options include apps in the Shopify App Store that add delivery date and time pickers — search "delivery date picker" or "order delivery date" and check current pricing, as these change frequently.
• Order attributes enabled. Shopify's cart attributes are the standard way to attach custom data to an order. Most delivery-date apps write to note_attributes.
• Access to your theme editor if you're adding a post-purchase message or confirmation note.
• A test order capability. You'll need to place a real or test order to verify the field works. Shopify's Bogus Gateway lets you simulate payments.

If you're on Shopify Plus, you have more native control over checkout and post-purchase pages. On Basic, Shopify, and Advanced plans, you'll rely on apps or a custom extension built with Shopify's checkout UI extension framework.

Step 1: Access Your Shopify Checkout Settings

1. From your Shopify admin, go to Settings.
2. Click Checkout.
3. Scroll to the Checkout customization or Customize checkout section. Depending on your plan, you'll see either a button to open the checkout editor or a note that checkout.liquid is no longer supported.
4. If you see Checkout editor, click it. This opens the checkout and thank you page editor where UI extensions render.
5. If you don't see an editor option, you're on a plan or setup that requires an app. Install a delivery-date app from the Shopify App Store, then return here — the app will register its extension with your checkout.

Note the difference between the checkout page and the thank you page. Shopify's checkout editor lets you add extensions to both, but they're configured separately. The thank you page is where you'll place the date picker if you want it post-purchase.

Step 2: Enable Checkout Customization and Add the Date Picker Field

This step depends on whether you're using an app or a custom extension.

Using an app:

1. Open the app you installed and find its checkout extension or thank you page settings.
2. Toggle the extension on for the thank you page (some apps only support the checkout page by default — check the app's settings).
3. Configure the field: label (e.g., "Preferred delivery date"), date range (how far ahead customers can choose), and whether it's required.
4. Save, then open the Shopify checkout editor to confirm the block appears in the thank you page section. Drag it into position if needed.

Using a custom checkout UI extension:

1. Scaffold an extension with the Shopify CLI (shopify app generate extension).
2. Use the purchase.thank-you.block.render target to render your date picker on the thank you page.
3. Build the field with Shopify's Polaris-based UI components, such as a date picker input.
4. Deploy the extension and add it to your checkout via the editor.

A quick comparison of the two routes:

If you're not a developer, the app route is almost always the right call. Building a custom extension is only worth it if you need behavior no app offers.

Step 3: Capture and Store the Delivery Date with Order Attributes

The date picker is useless if the value doesn't reach the order. Shopify stores this data as an order attribute, typically under note_attributes. When your extension or app writes the selected date, it should send it as a key-value pair, for example:

• Key: Preferred delivery date
• Value: 2025-06-14

Once saved, you'll see it in the admin under the order's Additional details or Notes section, and it will be included in order exports and most fulfillment integrations.

Two things to check:

• Attribute persistence. Some apps write to the cart attribute, which carries through to the order. Confirm the app's documentation says the value persists to the order record, not just the cart.
• Format consistency. Use ISO format (YYYY-MM-DD) so your exports and any automation tools parse it correctly. If you use Shopify Flow, you can trigger on order attributes to route orders or send notifications.

Step 4: Test Your Delivery Date Picker on a Live Order

Never trust a checkout customization without a test order.

1. Enable test mode or use Shopify's Bogus Gateway to place an order without charging a real card.
2. Complete checkout and land on the thank you page.
3. Confirm the date picker renders, is selectable, and shows the correct date range.
4. Pick a date and finish the order.
5. Open the order in your admin and verify the attribute appears with the correct value.
6. Export the order to CSV and check the attribute column populates.
7. If you use email notifications, confirm the date appears in the order confirmation if your app supports it.

If any step fails, note exactly where — that tells you whether the problem is the extension, the app's settings, or your attribute mapping.

Troubleshooting Common Issues and Limitations

• Field doesn't appear on the thank you page. The extension may be enabled for checkout but not for the thank you page. Recheck the app or editor settings.
• Date not saving to the order. The app may be writing to the cart only. Contact the app developer or switch to one that confirms order-attribute persistence.
• Extension won't load on your plan. Checkout UI extensions require compatible plans and the new checkout. Older checkout.liquid setups can't use them.
• Customers skip the field. That's expected. Don't make it required on the thank you page — you'll frustrate buyers who've already paid.
• No native date picker in the theme editor. Shopify doesn't offer a built-in thank-you-page date field; you need an app or extension. Theme hacks that inject HTML into checkout no longer work on modern checkout.

Also be aware that the thank you page is a poor place to collect a date if you need it to affect shipping cost or availability at checkout. For that, use a checkout-page extension instead. The thank you page is for preference capture, not pricing logic.

Conclusion

Adding a delivery date picker to your Shopify thank you page is a low-risk way to gather scheduling preferences without touching your checkout conversion flow. Use a checkout app unless you have developer resources, store the value as an order attribute in ISO format, and always verify with a test order. Done right, it cuts failed deliveries and support tickets with almost no ongoing effort.

FAQ

Can I add a delivery date picker without an app? Only if you build a custom checkout UI extension with the Shopify CLI. Shopify has no built-in date picker for the thank you page, and old theme-based checkout edits no longer work on modern checkout.

Will the delivery date show up in my order emails? It depends on the app and your notification templates. The date is stored as an order attribute, so you can add it to email templates manually or use an app that includes it automatically.

Is the thank you page the right place, or should I use the checkout page? Use the thank you page if you only need a customer preference and don't want to risk checkout abandonment. Use the checkout page if the date affects shipping cost, availability, or fulfillment rules.