> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://autoserve.crisp.help/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).

# Setup Cart Page Date Picker in 5 minutes

# Setting Up Date Picker for Cart Page in 5 mins


## ❓**What is Date Picker for Cart Page?**
The **Date Picker for Cart Page** lets customers select a required delivery or pickup date right from your cart page before they check out.
This ensures every order includes a chosen date, helping you better manage fulfillment and avoid missed delivery/pickup info.


## **✅ Prerequisites**
* [Install **Calla - Delivery & Pickup Date**] and activate your preferred plan.
* Use a Shopify theme that supports App Blocks.
* Add at least one product to your cart to preview the date picker.

### View our Tutorial video
${frame}[Here you can use a custom legend](https://www.loom.com/embed/ea23f084ed334522991d551479ced757?sid=30393d5c-7974-4544-9aac-65b8a7e3e1ac)

### ⚙ Steps following the video
**1. Introduction to the App** [0:00](https://loom.com/share/ea23f084ed334522991d551479ced757?t=0)

* Thank the user for trying the app.
* Explain the purpose: to set up a required date picker on the cart page.

**2. Current Setup Overview** [0:08](https://loom.com/share/ea23f084ed334522991d551479ced757?t=8)

* Mention that the app is currently standalone and does not integrate with the subtotal.
* Suggest removing the current setup.

**3. Adding the Date Picker** [0:19](https://loom.com/share/ea23f084ed334522991d551479ced757?t=19)

* Navigate to the subtotal section and hover to find the 'add block' option.
* Add the cart date picker or time slot (if applicable).
* Note: The date picker only appears when a product is added.

**4. Adding a Product for Testing** [0:45](https://loom.com/share/ea23f084ed334522991d551479ced757?t=45)

* Demonstrate adding a product to the cart to see the date picker in action.

**5. Configuring Delivery and Pickup Options** [1:17](https://loom.com/share/ea23f084ed334522991d551479ced757?t=77)

* Explain options for setting the date picker for delivery, pickup, or both.
* Mention how orders can be filtered in the order management dashboard based on delivery or pickup.

**6. Making Date Selection Required** [1:48](https://loom.com/share/ea23f084ed334522991d551479ced757?t=108)

* Show how to make the delivery date required for checkout.
* Save the settings and demonstrate the restriction on checkout without a selected date.

**7. Improving Checkout Experience** [2:36](https://loom.com/share/ea23f084ed334522991d551479ced757?t=156)

* Suggest moving the date picker above the checkout button for better user experience.

**8. Customizing Labels and Messages** [3:09](https://loom.com/share/ea23f084ed334522991d551479ced757?t=189)

* Explain how to customize the label and add additional information for the buyer.

**9. Advanced Settings and Features** [3:24](https://loom.com/share/ea23f084ed334522991d551479ced757?t=204)

* Mention advanced settings like disabling specific weekdays and setting delivery/pickup cut-off dates.

**10. Final Review and Support** [4:04](https://loom.com/share/ea23f084ed334522991d551479ced757?t=244)

* Review how the date picker displays on the store.
* Encourage users to explore other features and reach out for help if needed.


## **🛠 Troubleshooting & FAQs**


**Q: The date picker is missing from my cart page.**
A: Confirm you added the Date Picker block in Theme Editor and have a product in the cart.

**Q: Customers can proceed without picking a date.**
A: Enable **Delivery Date Required** in the settings.

**Q: Can I add custom messages for customers?**
A: Yes, customize label, subheading, and info message in settings.



## **💬 Need Help?**
Questions? Use **Live Chat** in the app or visit **Help** for more guides.