When customers shop on your Shopify store, you should ensure that they can choose their delivery dates while checking out. This article is a guide on how to add a delivery date picker to your Shopify cart page using code.

How to Add a Delivery Date Picker to Your Cart Page - Easy Step-By-Step Shopify Tutorial

Many store owners choose to insert a delivery date picker in their cart template to help customers choose their delivery date. This is an effective method of increasing the business sales allowing store owners and their customers to monitor orders placed and their delivery dates. 

By choosing a delivery date and enabling tracking orders, customers are kept notified of when their orders are due and when they are fulfilled. On your part as a Shopify store owner, the delivery date can be transferred into CSV format which can be sent to suppliers, delivery services and customers. You can also go on to customize the appearance and options of the delivery date picker.

This article is a step-by-step tutorial on How to insert a delivery date picker to your cart template in Shopify. Follow this guide on how to include a delivery date picker to your Shopify store:

Add a Delivery Date Picker to Your Cart Page

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.

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 Boundless, Debut version 17.2.0 or newer, Express, Narrative, or Venture, then you may 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:

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme you want to edit, and then click Actions > 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 week-end.</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.

    2. Include the snippet in your cart page  

    To include the delivery date snippet in your cart page:

    1. In the Sections directory, click cart-template.liquid. If your theme doesn't have this file, then click cart.liquid in the Templates directory.
    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

    Add a Delivery Date Picker to Your Cart Page

    Once you have completed all of this steps, you can now start tracking your customers delievry dates, sending updates whe needed. 

    Any questions? Leave a comment or contact us Ecom Experts.

    Back to blog