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.12{{ '//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css' | stylesheet_tag }}<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" type="text/javascript" defer="defer"></script> - 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:1234567<div style="width:300px; clear:both;"><p><label for="huratips-delivery-date">Pick a delivery date:</label><input id="huratips-delivery-date" type="text" name="attributes[date]" value="{{ cart.attributes.date }}" /><span style="display:block" class="instructions"> We do not deliver during the weekend.</span></p></div> - 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:123456789$(document).ready( function() {$(function() {$("#huratips-delivery-date").datepicker( {minDate: +1,maxDate: '+2M',beforeShowDay: jQuery.datepicker.noWeekends} );});});
- 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
Helpful tutorial! Adding a delivery date picker manually is useful for stores that need customers to select a delivery slot, especially food, local delivery, or scheduled delivery businesses.
At the same time, many Shopify merchants may not feel comfortable editing theme code or maintaining custom JavaScript when their theme updates. A no-code delivery date solution can be easier for those stores.
I also think delivery clarity should start before checkout. Showing estimated delivery dates, delivery ranges, cutoff times, weekends, holidays, and working-day rules can help customers understand when they may receive their order and reduce delivery-related questions.