Add delivery date picker to your cart in shopify

 

I have received a lot of requests that how we can add a delivery date picker in our store so we can get additional information about delivery. Here I am going to write about adding a calendar to the cart page.

For this, you have to add the jquery library to your theme.liquid if your theme doesn't have.

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

Step 2: Find </head> and add jquery just before it.

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

Step 3: Save theme.liquid file.

Step 4: Add a snippet file under the Snippets directory

Name this file - delivery-date

Step 5:  Copy the below code and paste it into a snippet file

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

Step 6: Save this file.

Step 7: Render this snippet file in your cart.liquid or cart-template.liquid file wherever you want to show delivery date picker

{% render 'delivery-date' %}

Step 8: Save your file. To check visit your store, Add some products and visit the cart page.

Try Shopify for free, and explore all the tools and services you need to start, run, and grow your business.