> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.omegatheme.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 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](https://help.omegatheme.com/en/article/where-can-you-display-date-picker-lhbf39/) 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](https://help.omegatheme.com/en/article/rates-ola4f4/).



## 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**.

![](https://storage.crisp.chat/users/helpdesk/website/-/8/3/8/3/8383e5404a31c000/image_o9f3it.png)

### Step 2: Open the checkout editor

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

![](https://storage.crisp.chat/users/helpdesk/website/-/8/3/8/3/8383e5404a31c000/image_1cpgi25.png)

### 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](IMAGE_URL_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.



## Related articles

* [Where can you display date picker?](https://help.omegatheme.com/en/article/where-can-you-display-date-picker-lhbf39/) — Cart, cart drawer, and product positions (all plans) *(Widget Appearance & Placement)*
* [Rates](https://help.omegatheme.com/en/article/rates-ola4f4/) — Manage rates in DingDoong for smooth checkout *(Delivery Rates & Fees)*
* [How to keep delivery selection from Cart to Checkout](https://help.omegatheme.com/en/article/how-to-keep-delivery-selection-from-cart-to-checkout-1xdb41e/) — 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 contact@omegatheme.com. We're happy to help!
