Add a delivery date picker to your cart

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

The steps for this tutorial differ depending on whether you are using a sectioned or a non-sectioned theme. A sectioned theme is a newer theme that lets you drag and drop to arrange the layout of your store's pages.

To figure out whether your theme supports sections, go to the theme's Edit code page. If there are files in the Sections directory, you are using a sectioned theme. Non-sectioned themes were released before October 2016, and do not have files in the Sections directory.

If you are using a sectioned theme, then click the Sectioned themes button and follow the instructions. If you are using an older, non-sectioned theme, then click the Non-sectioned themes button and follow the instructions.

Edit your JavaScript file

To edit your theme's JavaScript file:

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

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

      $(document).ready( function() {
        $(function() {
          $("#date").datepicker( {
            minDate: +1,
            maxDate: '+2M',
            beforeShowDay: jQuery.datepicker.noWeekends
          } );
        });
      });
  3. 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:

    Delivery date calendar

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

Create a delivery date snippet

To create a snippet for your delivery date picker:

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

    Add new snippet button

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

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

  4. 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:

    {% render '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:

Delivery date calendar

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

Ready to start selling with Shopify?

Try it free