Add a delivery date option to your Cart

Example:

When using the Page cart type, a graphical calendar picker is shown when the custom clicks the date input area:

Example of Modal cart type (pop-up cart):

Note: There is no graphical date picker on the Modal cart, only the Page cart type. 

How to:

Always make a duplicate of your theme before adding any code. This will save you if anything goes wrong or if you decide not to use the added code in the future. We can not support or be responsible of any code changes that you make to your theme. For that reason, save yourself and make a duplicate first.

Make a duplicate before any code changes:

Note: This tutorial is based on Shopify's support article:
https://help.shopify.com/en/themes/customization/cart/add-date-picker-for-delivery-dates

1

Add Javascript to set date picker start date

Open the Code Editor:

From your list of themes, find the Actions link for the theme you'd like to edit. Then select Edit code. Example draft theme:

Example if you're working from your main live/published theme:

Quick link if the theme is live/published:
Open Code Editor

Add the following code to the very bottom of your Javascript file, this will vary depending on which version of Pipeline you're running: 

Which version of Pipeline am I using?

Pipeline 4 - If you're working with a draft theme, open this file:

assets/theme.js

Quick link if your theme is live/published Pipeline 4:  
assets/theme.js

Earlier versions of Pipeline, you'll be opening this file:

assets/shop.js.liquid

Quick link if the theme is live/published and an earlier version of Pipeline:
assets/shop.js.liquid

Code to add:

/* -- Code for Cart Date Picker -- */
$(document).ready( function() {
    $(function() {
      $("#date").datepicker( {
        minDate: +1,
        maxDate: '+2M',
        beforeShowDay: jQuery.datepicker.noWeekends
      } );
  });
});
/* - end - */

Add the code to the very  bottom of the file on a new line. Make a couple blank lines before pasting the code snippet. 

Save the file.

2

Add code to cart.liquid

Open the cart.liquid from the Templates folder:

In the code area, use the Find feature (Command-F on Mac, Control-F in Windows) and search for (1):

cart.note

Find this line (2):

We will add a couple of blank links after the {% endif %} line which is 2 lines after the cart.note line:

Example after adding blank lines:

Next, paste the following code in that area:

<!-- Code added for Delivery date picker -->        
<div class="grid__item large--one-half cart__instructions">
  <label class="cart__instructions__label" for="date">Pick a delivery date</label>
  <input id="date" type="text" name="attributes[date]" value="{{ cart.attributes.date }}" class="input-full"/>
  <span class="cart__instructions__label"> We do not deliver during the weekend.</span>
</div>                    
<style>
  #AjaxifyModal input#date {margin-left:1rem;}
  #ui-datepicker-div { z-index: 999999 !important;}  
</style>
<!-- end -->

Example after paste:

Save the file.

3

Optional: Graphical date-picker when using the Page cart

This step is if you'd like to display the graphical date-picker on the Page cart type. If you're only using the Modal pop-up cart type, then you can skip this step.

Open theme.liquid from the Layout folder:

In the code area, use the Find feature (Command-F on Mac, Control-F in Windows) and search for (1):

</head

Find this line (2):

Add a couple blank lines above the </head> line:

Paste the following code:

{{ '//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>

Example after paste:

Save the file.

Complete - You're finished now and can test the modification. 

The date collected by the date picker will appear in the Order Details:

Need help with code changes?

We're not able to make any code customizations but we can recommend shophelper.io and heycarson -- they both specialize in small code changes and have really competitive flat-rate pricing.