Add the date picker to your cart drawer
Let customers choose a delivery, local delivery, or pickup date right inside your cart drawer, so every order has a date before they reach checkout.
❓ What is the cart drawer date picker?
A cart drawer (also called a slide-out cart, mini cart, or side cart) opens when a customer adds a product, without leaving the page. The cart drawer date picker puts your fulfillment options in that drawer: Delivery, Local Delivery, and Pickup, with a date and time slot for each.
Why it helps:
- Customers pick a date at the moment they add to cart, with no extra step.
- You can require a date, so no order comes through without one.
- Your cart drawer matches your store's look, with custom calendar themes and button colors.
⚙ How to set up the cart drawer date picker
Step 1: Open Cart Drawer settings
In the app, go to Settings. Find Cart Drawer (marked PRO) and click Modify.
Step 2: Choose your Fulfillment Type
Open the Fulfillment Type menu and choose how customers receive their orders:
Fulfillment Type | What customers see in the drawer |
|---|---|
Delivery | The Delivery option with date and time slot |
Pickup | Store location, date, and time slot |
Both | Delivery, Local Delivery, and Pickup together, with switching between them |
This setting is also used to label orders as pickup or delivery in your Shopify Admin order view. |
💡 Tip: The Live Preview on the right updates as you change settings, so you can check how the drawer will look before you save.
Step 3: Require a date (recommended)
Under Require Date, tick the methods that need a date: Delivery, Local Delivery, and/or Pickup. Customers must then choose a date before checking out.
Step 4: Check how each method looks
Switch between fulfillment types and look at the Live Preview. For Pickup, customers choose a store location, then a date and time slot.
Step 5: Style the calendar
Under Calendar Style, pick a Calendar Theme that fits your brand (for example, Black Square). You can also adjust the calendar display options below it.
Step 6: Customize the fulfillment buttons
Scroll down to Fulfillment Button and set the Background Color, Text Color, and Hover Background Color. Choose colors with enough contrast so the buttons are easy to read.
Step 7: Save
When Unsaved changes appears at the top, click Save to apply your cart drawer settings.
Step 8: Test on your storefront
Open your store, add a product to the cart, and open the cart drawer. Check that:
- The fulfillment options you chose are showing
- The date and time slot pickers open and respond
- The checkout is blocked until a date is selected (if you turned on Require Date)
🛠 Troubleshooting & FAQs
1. Which plans include the cart drawer date picker?
Pro and Elite. It's not available on the Free plan.
2. Local Delivery isn't showing in my cart drawer.
Set Fulfillment Type to Both, and make sure Local Delivery is set up in Delivery & Pickup Schedule. Local Delivery requires the Pro or Elite plan.
3. Can customers switch between Delivery, Local Delivery, and Pickup?
Yes. When Fulfillment Type is Both, customers can switch right in the drawer.
💬 Need Help?
Questions or need setup assistance? Start a Live Chat in the app or visit the helpdesk. We're here to help!
Updated on: 15/10/2026
Thank you!