Add a delivery date picker to your cart page

You can include a calendar on your cart page that allows customers to specify a delivery date for their order.

Delivery date picker

Sectioned and non-sectioned themes

Edit your JavaScript file

To edit your theme's JavaScript file:

  1. Find the theme you want to edit, and then click Actions > Edit code.

  2. In the Assets directory, click theme.js or theme.js.liquid.

  3. Paste the following code at the bottom of the file:

    
        $(document).ready( function() {
          $(function() {
            $("#date").datepicker( {
              minDate: +1,
              maxDate: '+2M',
              beforeShowDay: jQuery.datepicker.noWeekends
            } );
          });
        });
    
    
  4. Click Save.

Edit your cart template

To add a delivery date picker to your cart template:

  1. In the Sections directory, click cart-template.liquid.

  2. Find the closing </form> tag in the code. On a new line above the closing </form> tag, paste the following code:

    
        <div style="width:300px; clear:both;">
          <p>
            <label for="date">Pick a delivery date:</label>
            <input id="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>
    
    
  3. Click Save.

Edit your theme.liquid template

For the delivery date picker to work, you will need to add some code to the <head> section of your theme.liquid:

  1. In the Layout directory, click theme.liquid.

  2. Find the closing </head> tag in the file. On a new line above the closing </head> tag, 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>
    
    

    You now have a delivery date input field on your cart page. When you click inside the text field, a calendar will appear:

    alt

The date picker used in this customization is a widget from the jQuery UI library. This blog post explains how to disable days in the date picker calendar.

Create a delivery date snippet

To create a snippet for your delivery date picker:

  1. Find the theme you want to edit, and then click Actions > Edit code.

  2. In the Snippets directory, click Add a new snippet:

    alt
  3. Create the snippet:
    a. Name your snippet delivery-date.
    b. Click Create snippet. The new snippet file will open in the code editor.

  4. In your new delivery-date.liquid snippet, paste this code hosted on GitHub.

  5. Click Save.

Include the snippet in your cart template

To include the delivery date snippet in your cart template:

  1. In the Templates directory, click cart.liquid.

  2. Find the closing </form> tag in the code. On a new line above the closing </form> tag, paste the following code:

    
       {% include 'delivery-date' %}
    
    
  3. Click Save.

You now have a delivery date input field on your cart page. When you click inside the text field, a calendar will appear:

alt

The date picker used in this customization is a widget from the jQuery UI library. This blog post explains how to disable days in the date picker calendar.

Want to discuss this page?

Visit the Shopify Community