How to add a delivery date picker to your Shopify cart
Include a calendar on your cart page that allows customers to easily specify a delivery date for their order. This implementation is intended to help merchants who are looking to book delivery slots. For example, a food ordering service.
Follow these steps to add a delivery date picker to your cart page.
Step 1: Include jQuery UI
- From your Shopify admin, to to Online Store > Theme.
- Find the theme you want to edit and then click Action > Edit code.
- In the Layout section, click theme.liquid to open the file in the online code editor.
- Find
<head>and paste below code just above it. - Click Save.
Step 2: Add a delivery date picker to your cart template
- Find your cart template: In the Sections > cart-template.liquid or Templates > Cart.liquid that depend on each theme.
- Find the closing
</form>tag in the code. On a new line above the closing</form>tag, paste the following code: - Click Save.
Step 3: Inserting executable Javascript code
- In the Assets directory, you must find the main js file of the them. May be it is theme.js or theme.js.liquid, that depend on each theme.
- Paste the following code at the bottom of the file:
- Click Save.
You are done. Happy coding!
Hi,
Thank you for the post.
What if I do want it to show weekends?
Can you tell me the code to put in?
comment below code to open wekeends
// beforeShowDay: $.datepicker.noWeekends
Hi, very useful but i need to tweak this a bit further.
Can I use European time notation when selected: DD/MM/Y?
Hi Balder,
Yes, you can. Please refer the guide here: https://jqueryui.com/datepicker/#date-formats