How to Add a Delivery Date Picker to Shopify Order Confirmation

2026-10-14 · shipping fulfillment

Why Add a Delivery Date Picker to Shopify Order Confirmation?

If you sell perishable goods, baked-to-order items, floral arrangements, or anything a customer wants on a specific day, the order confirmation page is the last moment you can realistically collect a delivery preference without a back-and-forth email. Shopify's default checkout doesn't ask for a delivery date, so most merchants either eat the support cost of chasing customers or guess a date and hope for the best.

Adding a delivery date picker to the order confirmation page solves three problems at once: it captures the customer's preferred date while their intent is highest, it reduces "when will this arrive?" support tickets, and it gives your fulfillment team a structured date to sort and route by. This guide walks through a free approach using Shopify's native order notes and a small snippet of Liquid/JavaScript on the order confirmation (thank-you) page.

What You Need Before You Start

A Shopify plan that supports checkout customization and order status page scripts. Most plans allow this, but check your theme's access to the checkout.liquid and order status page settings — some newer themes and Shopify Plus setups handle this differently.
Access to your theme code (Online Store → Themes → Edit code).
A basic comfort with Liquid, HTML, and JavaScript. If you can edit a theme section, you can do this.
A test order you're willing to place and then archive or refund.

You do not need a paid app for the core mechanic. You are using the order confirmation page's ability to write back to the order via the order attributes / note attributes API, which Shopify exposes on the thank-you page.

Step 1: Enable Order Notes on Your Shopify Checkout

Order notes are the simplest native place to store a delivery date, and they're visible in the admin on the order detail page.

Go to Settings → Checkout.
Scroll to Order processing.
Enable Order notes (sometimes labeled "Allow customers to add a note to their order").
Optionally set the note label to something useful, like "Delivery instructions or preferred date."

This makes the note field appear in checkout. You'll use it as a fallback and as a place customers can add context. The picker you build in Step 2 will write to a note attribute instead, which is cleaner for structured data.

Step 2: Add a Delivery Date Field to the Order Confirmation Page

The order confirmation page (the "thank you" page) is controlled by the Checkout and accounts settings and, on older themes, by checkout.liquid. On many themes you can inject a script via Settings → Checkout → Additional scripts or via the order status page script field.

Add this HTML and JavaScript. It renders a date input and saves the value as a note attribute when the customer submits it.

<div id="delivery-date-widget" style="margin:24px 0;padding:16px;border:1px solid #ddd;border-radius:8px;">
  <label for="delivery-date" style="display:block;font-weight:600;margin-bottom:8px;">
    Preferred delivery date
  </label>
  <input type="date" id="delivery-date" name="delivery-date" style="padding:8px;font-size:16px;">
  <button id="save-delivery-date" type="button" style="margin-left:8px;padding:8px 16px;cursor:pointer;">
    Save date
  </button>
  <p id="delivery-date-msg" style="margin:8px 0 0;font-size:14px;color:#555;"></p>
</div>

<script>
  (function () {
    var input = document.getElementById('delivery-date');
    var button = document.getElementById('save-delivery-date');
    var msg = document.getElementById('delivery-date-msg');

    // Block past dates
    var today = new Date().toISOString().split('T')[0];
    input.min = today;

    button.addEventListener('click', function () {
      if (!input.value) {
        msg.textContent = 'Please choose a date first.';
        return;
      }
      // Shopify exposes the order token and checkout on the thank-you page.
      var params = {
        'checkout[note_attributes][Delivery Date]': input.value
      };
      fetch('/cart/update.js', { method: 'POST' }) // placeholder to confirm script runs
        .catch(function () {});

      // Persist via the order status page API (available on the confirmation page)
      if (window.Shopify && Shopify.Checkout && Shopify.Checkout.apiHost) {
        fetch('https://' + Shopify.Checkout.apiHost + '/checkouts/' +
          Shopify.Checkout.token + '.json', {
          method: 'PATCH',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(params)
        }).then(function () {
          msg.textContent = 'Saved. We will aim for ' + input.value + '.';
        }).catch(function () {
          msg.textContent = 'Could not save automatically — please add the date to your order note.';
        });
      } else {
        msg.textContent = 'Saved locally. Please also add the date to your order note.';
      }
    });
  })();
</script>

Two things to know about this snippet:

The PATCH call to the checkout API works on the order status page in many stores, but Shopify has been tightening access to checkout APIs. If it fails, the fallback message tells the customer to use the order note — which is why Step 1 matters.
The min attribute prevents past dates, but customers can still type a date manually in some browsers. Validate server-side or in the admin if the exact date is critical.

Step 3: Capture and Display the Chosen Date in Your Order Admin

Once a customer saves a date, you need to see it. Note attributes appear on the order detail page under Additional details or Notes, depending on your admin version.

If you used the order note fallback, the date shows in the Notes timeline. If the note attribute saved successfully, it appears as a labeled key-value pair.

To make the date easier to scan, add it to your order confirmation email template:

Go to Settings → Notifications → Order confirmation.
Insert a Liquid line that reads the note attribute, for example:

{% if note_attributes %}
  {% for attr in note_attributes %}
    {% if attr.name == 'Delivery Date' %}
      <p><strong>Requested delivery date:</strong> {{ attr.value }}</p>
    {% endif %}
  {% endfor %}
{% endif %}

Save and send a test email.

Where the date lives	Who sees it	Best for
Order note	You and staff in admin	Free-form customer context
Note attribute	Admin + notifications via Liquid	Structured, filterable data
Order confirmation email	Customer	Confirming the request back to them
Fulfillment app fields	Your 3PL or shipping tool	Routing and batching

Step 4: Test the Delivery Date Picker End to End

Place a real test order and walk the full path:

Add a product to cart and complete checkout.
On the confirmation page, pick a date at least two days out.
Click Save date and confirm the success message appears.
Open the order in Orders in your admin and verify the note attribute or note is present.
Check the order confirmation email for the date line.
Refund or archive the test order.

If the date doesn't appear, check the browser console for a failed PATCH request. A 401 or 403 means the checkout API rejected the write — fall back to the order note approach and tell customers explicitly to type the date there.

Common Issues and Limitations to Watch For

Checkout API access is restricted. Shopify has moved much of checkout customization behind Checkout Extensibility. On stores using the new checkout, the checkout.liquid and script injection approach may not work at all.
Order confirmation page timing. The thank-you page fires after payment. A customer who closes the tab immediately never sees your picker.
No validation on your end. A customer can pick a date you can't fulfill. You still need a human or an app to check capacity.
Timezone drift. The type="date" input returns a date string with no timezone. If you ship across timezones, confirm the intended date in your confirmation email.
Theme updates overwrite scripts. If you edited checkout.liquid directly, a theme update can wipe your changes. Keep a copy.

When a Free Workaround Is Not Enough

The free approach works for low-volume stores with simple delivery windows. It stops working when you need any of the following:

Date-specific capacity limits — e.g., only 20 cakes per day.
Blackout dates — holidays, sold-out slots, or supplier closures.
Automatic routing to a fulfillment app or 3PL based on the chosen date.
Local delivery or pickup scheduling with time slots, not just dates.
Multi-language or multi-currency checkout consistency.

At that point, look at dedicated delivery-date and order-scheduling apps in the Shopify App Store. Compare on: does it support time slots, does it block blackout dates, does it sync to your fulfillment workflow, and does it work with the new Checkout Extensibility. Check current pricing on each app's listing, since these change often.

Conclusion

A delivery date picker on the Shopify order confirmation page is achievable for free using order notes and a small script, and it pays for itself in fewer support emails and fewer mis-shipped orders. Start with the native order note, add the picker script, and test end to end before you rely on it. If your delivery logic gets more complex than a single date, move to a dedicated app rather than stretching the free workaround past its limits.

FAQ

Does this work on Shopify's new checkout? Not reliably. The script injection method depends on the order status page and checkout APIs that Shopify has been restricting. Test on your store first, and check whether your theme uses Checkout Extensibility.

Will the customer see their chosen date in the confirmation email? Only if you add the Liquid snippet from Step 3 to your order confirmation notification template. By default, note attributes don't appear in the email.

Can I limit which dates customers can pick? The basic type="date" input only blocks past dates. Blocking holidays, sold-out days, or capacity limits requires custom JavaScript or a dedicated scheduling app.