Add the date picker to checkout (Shopify Plus)

Updated 19 August 2026

On Shopify Plus, Flare renders a native date picker inside checkout itself. The date and the shipping options are calculated together against the shopper's real address. That makes this the most accurate location, and the only one that can hard-block checkout until a valid date is chosen.

Requires: Shopify Plus (for Shopify's checkout editor) and Flare's Advanced plan or higher.

Set it up

1. In Flare, open Storefront experience.
2. In the Date picker location card, set Editing to Checkout.
3. Click Enable on Checkout, then click Open checkout editor.
4. In the checkout editor, click Add app block, then choose Flare's delivery date picker block.
5. Position the block. Most stores place it with the shipping options.
6. Click Save in the checkout editor.
7. Return to Flare. Flare checks the block and marks Checkout Live.

How it behaves

• The calendar appears once the shopper has entered their address. It only shows dates that are valid for their address, cart, and chosen shipping rate.
• If the shopper picks a shipping rate that Flare doesn't manage (for example a Shopify-managed rate you've kept), the picker steps aside and checkout proceeds normally.
• If the shopper dawdles past a cutoff, the picker says "The shipping cut-off for your selected date has passed. Please select a new date." and refreshes their options.
• Flare also installs a Shopify checkout rule that re-checks the date at the moment of payment. This is the server-side backstop: it stops an order that has no date, or a date that has since become invalid, even when the picker never ran. Shop app and Shop Pay orders are covered. See Checkout validation.

Options you control in Flare

With Editing set to Checkout, the settings column shows these sections:

• Date selection behaviour: Auto-select a delivery date. Choose Earliest available date and an optional Default to a later available date offset, or Earliest date on a preferred shipping profile and tick the profiles to prefer.
• Date display: the Date format dropdown, Show the selected date above the calendar with editable Text shown before the date, and Show selected date as a line item.
• Shipping methods (shown when you use shipping zones): What customers choose first, and Add the date to the shipping option name at checkout.
• Advanced checkout settings: Hide express payment buttons until a delivery date is chosen, which stops accelerated checkouts skipping date selection.
• Checkout error messaging: the shopper-facing text for Address unavailable, Products unavailable, and No shipping options. Leave a field blank to use Flare's default wording.

Two checkout options live in Shopify, not in Flare:

• The block title (default "Select Delivery Date") is the Block Title setting on the block in Shopify's checkout editor.
• Whether a date is mandatory is the Require delivery date before checkout setting on Flare's checkout rule, in Shopify admin → Settings → Checkout. See Checkout validation.

Pairing with other locations

Checkout-only is the cleanest Plus setup. If you want dates visible earlier in the journey, add the passive Estimated Delivery date product-page block rather than a second interactive picker.