Articles on: D: Local delivery date picker

Show date picker on Checkout Page (Shopify Plus)

Show the date picker on the checkout page (Shopify Plus)

Place the DingDoong date picker directly on your checkout page so customers select their delivery or pickup date and time as part of the checkout flow — no need to go back to the cart.

This feature requires a Shopify Plus plan. Checkout page customization (checkout extensibility) is only available to Shopify Plus stores. On non-Plus plans, use the Cart / Cart drawer position instead.

Overview

Showing the picker at checkout gives a seamless, transparent experience: customers can't miss the scheduling step, every order captures a date before submission, and there's less risk of incomplete or incorrect scheduling. It uses Shopify's Global date picker checkout block.

Because of Shopify's checkout architecture, some features that work on the cart/cart drawer or product page may behave differently — or not be available — on the checkout date picker. See the note at the end of the steps.

Before you start

Your store is on Shopify Plus (required for editing the checkout page).
DingDoong is installed with at least one method enabled.
For smooth checkout behavior, manage rates through DingDoong rather than Shopify — see Rates.

How to set up the checkout date picker

Here's how, step by step:

Step 1: Choose the Checkout page position

In the DingDoong admin, go to Widget display and choose Checkout page.

Step 2: Open the checkout editor

Click Edit appearance, then Add global date picker to open Shopify's checkout editor.

Step 3: Add the Global date picker block

In the checkout editor, click Add block and choose Global date picker. Position it where you want in the checkout layout.

Step 4: Adjust optional settings and save

Configure these as needed (or keep defaults), then Save:

Allow app to block checkout — prevents submitting without a valid date.
Include block in Shop Pay — shows the picker in the Shop Pay flow.
Show error at the top of the page — surfaces validation errors prominently.

How it looks on the storefront

During checkout, customers see the date picker inline and choose an available date and time slot before placing the order.

Checkout date picker on storefront

Common scenarios

Require a date before the order is placed

Turn on Allow app to block checkout so customers can't complete checkout without selecting a valid date.

Cover Shop Pay express checkout

Enable Include block in Shop Pay so even express-checkout customers get the picker.

Keep cart and checkout consistent

If you also use the cart widget, test both — checkout has different logic, so verify your rules apply as expected.

Configuration options

Option	Description	Default	Notes
Allow app to block checkout	Blocks submission until a valid date is chosen	Off	Use to make scheduling mandatory at checkout
Include block in Shop Pay	Shows the picker inside Shop Pay	Off	Recommended if you get Shop Pay traffic
Show error at the top of the page	Displays validation errors at the top	Off	Improves visibility of errors

Tips & Best practices

Some cart/product-page features don't carry over to checkout due to Shopify's limitations. Test your full flow on checkout before relying on it, and manage rates through DingDoong to avoid checkout rate conflicts.

If a feature you need isn't available at checkout, consider the cart/cart drawer position, which supports the full feature set.

Troubleshooting

The Checkout page option is disabled / greyed out?

This position requires Shopify Plus. If you're on Plus and it's still disabled, reopen the app and confirm your plan, or contact support.

A cart-page feature isn't working at checkout?

That's expected for some features due to Shopify's checkout architecture. Use the cart/cart drawer position for full feature support, or contact us to confirm what's supported.

FAQ

Can non-Plus stores use the checkout date picker?

No — checkout customization is a Shopify Plus capability. Non-Plus stores should use the cart, cart drawer, or product page positions.

How do I remove the checkout picker?

Remove the Global date picker block from the checkout editor and save. Your other settings are unaffected.

Where can you display date picker? — Cart, cart drawer, and product positions (all plans) (Widget Appearance & Placement)
Rates — Manage rates in DingDoong for smooth checkout (Delivery Rates & Fees)
How to keep delivery selection from Cart to Checkout — Carry the cart selection into checkout (General Settings)

If you need further assistance, feel free to reach out to us via live chat or email at [email protected]. We're happy to help!

Updated on: 09/06/2026

Was this article helpful?

Thank you!