How to Add a Delivery Date Picker to Shopify Product Pages

2026-10-17 · shipping fulfillment

A delivery date picker lets shoppers choose when their order arrives instead of hoping it shows up before a birthday, holiday, or event. On Shopify, you can add one in about 15 minutes with a free app, or with a short snippet of theme code if you'd rather not install anything. This guide covers both routes, plus testing, customization, and fixes for the problems that actually come up.

Why a Delivery Date Picker Boosts Conversions and Cuts Support Tickets

Uncertainty is the enemy of checkout. When a shopper is buying a gift, flowers, cake, or anything time-sensitive, "delivery in 3–5 business days" doesn't answer their real question: will it arrive by Saturday? If they can't tell, many leave to buy somewhere that gives them a date. A date picker answers that question on the product page, before they've committed.

The second benefit is operational. Every "Can I get this by Friday?" email costs you time. A picker that shows available dates based on your cutoff rules prevents most of those tickets from being written in the first place — the customer self-selects a date you can actually fulfill.

It also feeds your fulfillment workflow. Instead of a generic order note, you get a structured date field you can sort, filter, and export. For bakeries, florists, personalized-goods sellers, and anyone shipping perishables, that's the difference between a spreadsheet and a pile of sticky notes.

Option 1: Add a Delivery Date Picker with a Free Shopify App (No Code)

This is the fastest path and the one most small sellers should start with.

Step 1: Browse the Shopify App Store. Search for "delivery date picker" or "order delivery date." Several established apps do exactly this, including Order Delivery Date by SolverCircle and Delivery Date Pro by Zestard. There's also a broader category of "cart and checkout" apps that bundle a date picker with other features. Check current pricing on each listing — most have a free tier, but the limits vary (number of orders per month, number of blackout dates, and so on).

Step 2: Install and open the app. From your Shopify admin, go to Apps → your new app. Most apps walk you through a short setup wizard.

Step 3: Choose where the picker appears. You'll typically get options for product page, cart page, or checkout. Start with the product page — that's where buying decisions happen.

Step 4: Set your rules. Configure:

• Lead time — the minimum days between order and earliest selectable delivery date (e.g., 2 days for made-to-order items).
• Cutoff time — the hour after which today's orders count as tomorrow's (e.g., 2:00 PM).
• Available days — which weekdays you deliver. If you don't ship Sundays, uncheck Sunday.
• Blackout dates — holidays, vacation days, sold-out production days.
• Date range — how far into the future customers can pick (30, 60, 90 days).

Step 5: Save and enable. Most apps add a "Save" or "Publish" button. The picker should appear immediately on your product pages — if it doesn't, see the troubleshooting section below.

The tradeoff: you're adding another app to your store, which means another monthly bill if you outgrow the free tier, and a small page-speed cost. For most stores under a few hundred orders a month, that's fine.

Option 2: Add a Delivery Date Picker with Theme Code (For Non-Developers)

If you'd rather not install an app, you can add a native HTML date input to your product form. This won't enforce cutoff times or blackout dates on its own — it's a plain date field — but it's free, fast, and lightweight.

Before you start: duplicate your theme. In Shopify admin, go to Online Store → Themes → … → Duplicate. Work on the copy so you can revert instantly if something breaks.

Step 1: Open the product template. Go to Online Store → Themes → Edit code. Find sections/main-product.liquid (in older themes it may be templates/product.liquid).

Step 2: Find the product form. Search the file for <form — you're looking for the form that contains the Add to cart button. You want to insert your field inside that form, above the button.

Step 3: Paste this block above the Add to cart button:

<div class="delivery-date-wrapper">
  <label for="delivery-date">Preferred delivery date</label>
  <input
    type="date"
    id="delivery-date"
    name="properties[Delivery Date]"
    min=""
    required
  >
</div>

The name="properties[Delivery Date]" attribute is the important part. Shopify reads any input named properties[Something] and attaches it to the line item as a custom property, which then shows up on the order in your admin and on the packing slip.

Step 4: Set a minimum date with a small script. Add this just below the input:

<script>
  (function() {
    var input = document.getElementById('delivery-date');
    var min = new Date();
    min.setDate(min.getDate() + 2); // 2-day lead time
    input.min = min.toISOString().split('T')[0];
  })();
</script>

Change the + 2 to match your real lead time. This stops customers from picking yesterday, but it does not stop them from picking a Sunday or a holiday — for that, you need an app or a more involved script.

Step 5: Style it. Add CSS to match your theme, or the field will look out of place:

.delivery-date-wrapper { margin: 1rem 0; }
.delivery-date-wrapper label { display: block; font-weight: 600; margin-bottom: .35rem; }
.delivery-date-wrapper input { width: 100%; padding: .6rem; border: 1px solid #ccc; border-radius: 4px; }

Step 6: Save. The field now appears on every product page using that template.

The limitation is real: a plain date input trusts the customer completely. Someone can select a date you can't fulfill, and you'll only find out when the order comes in. If delivery timing is core to your business, the app route is worth it.

How to Test Your Delivery Date Picker Before Going Live

Don't trust a preview alone. Run through this list:

• Place a real test order using a Shopify Bogus Gateway or a 100% discount code, and confirm the date appears as a line-item property on the order in your admin.
• Check the packing slip and order confirmation email — does the date show up where your fulfillment team will see it?
• Test on mobile. Open the product page on an actual phone, not just a resized browser window. Tap the field and confirm the native date wheel opens.
• Test the boundaries. Try selecting a date before your lead time, a blacked-out date, and the furthest allowed date.
• Test in a different browser (Safari and Chrome handle date inputs differently).
• Check page speed with Google PageSpeed Insights before and after, especially if you added an app.

Customizing the Picker: Cutoff Times, Blackout Dates, and Date Formats

Most of the meaningful configuration lives in your app's settings:

• Cutoff time — set it to the latest hour you can realistically process and hand off orders. If your courier picks up at 3 PM, use 2 PM to leave a buffer.
• Blackout dates — enter holidays, supplier closures, and your own vacation days. Do this quarterly, not once.
• Date format — US shoppers expect MM/DD/YYYY, much of Europe expects DD/MM/YYYY. Check your app's regional settings rather than assuming.
• Lead time per product — if some items are made to order and others ship same-day, look for per-product or per-collection lead time settings. Many apps support this; if yours doesn't, that's a reason to switch.

Common Issues and Fixes (Theme Conflicts, Mobile Display, Time Zones)

The picker doesn't appear. Usually the app's embed didn't attach to your theme. Re-run the app's theme setup, or check whether your theme uses a custom product template that the app doesn't recognize.

It appears twice. You likely added the code snippet and installed an app. Remove one.

It looks broken on mobile. Fixed-width inputs are the usual culprit. Set width: 100% and test at 375px viewport width.

Dates are off by one day. This is almost always a time zone mismatch between your store settings and the app. Set your store's time zone correctly in Settings → General, then check the app's own time zone setting.

Customers can pick dates you can't fulfill. The picker is working, but your blackout dates or lead time aren't configured. Fix the rules, not the picker.

The Add to cart button stopped working. A code snippet was pasted outside the product form, or a script has a syntax error. Restore your theme backup and re-paste carefully.

Which Method Should You Choose? App vs. Code Comparison

Choose the app if: you have cutoff times, blackout dates, or per-product lead times. That's most sellers.

Choose the code route if: you ship everything the same way, you just want a date on the order, and you'd rather not add another app.

Conclusion

A delivery date picker is one of the highest-return small additions you can make to a Shopify product page — it removes the biggest source of hesitation for gift and time-sensitive buyers, and it gives your fulfillment team structured data instead of vague notes. Start with a free app if you have real delivery rules; use the code snippet only if your shipping is genuinely simple. Either way, test with a real order before you announce it.

FAQ

Will a delivery date picker slow down my Shopify store? A well-built app adds a small amount of JavaScript, usually negligible. The code route adds almost nothing. If you notice a slowdown, check your PageSpeed score before and after installing.

Can I add a delivery date picker only to certain products? Yes — most apps let you target specific products, collections, or tags. With the code route, you'd need to edit a custom template assigned only to those products.

Does the delivery date show up on the customer's order confirmation? It should, because Shopify treats it as a line-item property. Confirm this with a test order — if it's missing from the confirmation email, check your notification templates.