Add a delivery date picker to your cart

Note

If you use a free theme from Shopify, then you can contact Shopify Support for help with this tutorial. It requires 15 minutes of design time. Learn more about the Shopify Design Policy.

Note

This customization is for Online Store 2.0 themes, and doesn't apply to vintage Shopify themes. Find out your theme's architecture version.

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

Caution

This customization will not work for drawer or pop-up cart styles, and will only work for a cart page (at the URL your-store.com/cart). If you use a cart drawer or pop-up, then you will need to change your cart style to Page in the theme editor. Add a product to the cart in the theme preview, and then click the Cart page tab in the theme editor to view your cart settings.

Include jQuery in your theme.liquid

For this customization to work, some themes require that a script tag for jQuery is added to the theme.liquid layout file. If you use a free Shopify Online Store 2.0 theme, then you might need to follow the next step:

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

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

{{ '//ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js' | script_tag }}

1. Click Save.

Create a delivery date snippet

To create a snippet for your delivery date picker:

Desktop

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme you want to edit, click the … button to open the actions menu, and then click Edit code.
3. In the Snippets directory, click Add a new snippet:
4. Create the snippet:
   1. Name your snippet delivery-date.
   2. Click Create snippet. The new snippet file will open in the code editor.
5. In your new delivery-date.liquid snippet, paste the following code:

{{ '//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css' | stylesheet_tag }}
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" defer="defer"></script>

<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>

<script>
  window.onload = function() {
      if (window.jQuery) {
        let $ = window.jQuery;

        $(function() {
          $("#date").datepicker({
          minDate: +1,
          maxDate: '+2M',
          beforeShowDay: $.datepicker.noWeekends
        });
      });
    }
  }
</script>

1. Click Save.

iPhone

1. From the Shopify app, tap the … button.
2. In the Sales channels section, tap Online Store.
3. Tap Manage themes.
4. Find the theme you want to edit, click the … button to open the actions menu, and then click Edit code.
5. In the Snippets directory, click Add a new snippet:
6. Create the snippet:
   1. Name your snippet delivery-date.
   2. Click Create snippet. The new snippet file will open in the code editor.
7. In your new delivery-date.liquid snippet, paste the following code:

{{ '//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css' | stylesheet_tag }}
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" defer="defer"></script>

<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>

<script>
  window.onload = function() {
      if (window.jQuery) {
        let $ = window.jQuery;

        $(function() {
          $("#date").datepicker({
          minDate: +1,
          maxDate: '+2M',
          beforeShowDay: $.datepicker.noWeekends
        });
      });
    }
  }
</script>

1. Click Save.

Android

1. From the Shopify app, tap the … button.
2. In the Sales channels section, tap Online Store.
3. Tap Manage themes.
4. Find the theme you want to edit, click the … button to open the actions menu, and then click Edit code.
5. In the Snippets directory, click Add a new snippet:
6. Create the snippet:
   1. Name your snippet delivery-date.
   2. Click Create snippet. The new snippet file will open in the code editor.
7. In your new delivery-date.liquid snippet, paste the following code:

{{ '//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css' | stylesheet_tag }}
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" defer="defer"></script>

<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>

<script>
  window.onload = function() {
      if (window.jQuery) {
        let $ = window.jQuery;

        $(function() {
          $("#date").datepicker({
          minDate: +1,
          maxDate: '+2M',
          beforeShowDay: $.datepicker.noWeekends
        });
      });
    }
  }
</script>

1. Click Save.

Include the snippet in your cart page

To include the delivery date snippet in your cart page:

1. In the Sections directory, click main-cart-items.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' %}

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

The date picker used in this customization is a widget from the jQuery UI library.