Skip to content

  • Home
  • About Us
  • Add-ons
  • Services
    • Shopify Development Services
    • Shopify Maintenance services
    • Shopify PageSpeed Optimization
    • Shopify Training
    • Shopify App Development
    • Shopify App Integration Services
    • Shopify Email Marketing
    • Shopify Web Design Agency
  • Blog
  • Contact Us
  • Search button

Add a delivery date picker to your cart

Apr 15, 2022Nov 15, 2022
Add a delivery date picker to your cart

This is a feature where your customer could Add a delivery date picker to your cart while they’re buying something from your Shopify store. Include a calendar on your cart page that allows customers to easily specify a delivery date for their order. This implementation is intended to help merchants who are looking to book delivery slots.

A simple app that allows merchants to enable customers to select the date for delivery during their checkout, the Shopify delivery date picker is simple, stylish, and easy to use. It can provide merchants with a view of all the orders and their delivery dates at a glance and helps customize the various features without any coding or development required.

You can include a calendar on your cart page that allows customers to specify a delivery date picker to your cart in Shopify for their order. By choosing a delivery date and enabling tracking orders, customers are kept notified of when their orders are due and when they are fulfilled. You can also go on to customize the appearance and options of the delivery date picker. Without any delay, let’s get rolling

Editing your theme code to add Shopify delivery date picker feature

Required files: section [cart-template.liquid]; assets[datepicker-jquery.js]
  • In the Assets directory, Create a new file and add the following code:
$(document).ready( function() {
    $(function() {
      var noweekends = datepicker_noweekends, noweekends_val;
      var maxdate = "+"+datepicker_maxdate+"W";
      var mindate = datepicker_mindate;
      if (noweekends==true){
        noweekends_val = jQuery.datepicker.noWeekends;
      } else {
        noweekends_val = false;
      }
      $("#date").datepicker( {
        minDate: mindate,
        maxDate: maxdate,
        beforeShowDay: noweekends_val
      } );
    });
  });
  • In the Section directory, find cart-template.liquid and locate the closing form tag </form>. Add the following code right above the </form> tag:
{% if section.settings.datepicker_enabled %}
      &amp;amp;amp;amp;amp;amp;amp;lt;div style="width:300px; clear:both;"&amp;amp;amp;amp;amp;amp;amp;gt;
        &amp;amp;amp;amp;amp;amp;amp;lt;p&amp;amp;amp;amp;amp;amp;amp;gt;
          &amp;amp;amp;amp;amp;amp;amp;lt;label for="date"&amp;amp;amp;amp;amp;amp;amp;gt;Pick a delivery date:&amp;amp;amp;amp;amp;amp;amp;lt;/label&amp;amp;amp;amp;amp;amp;amp;gt;
          &amp;amp;amp;amp;amp;amp;amp;lt;input id="date" type="text" name="attributes[date]" value="{{ cart.attributes.date }}" /&amp;amp;amp;amp;amp;amp;amp;gt;
          &amp;amp;amp;amp;amp;amp;amp;lt;span style="display:block" class="instructions"&amp;amp;amp;amp;amp;amp;amp;gt; {{section.settings.datepicker_note}}&amp;amp;amp;amp;amp;amp;amp;lt;/span&amp;amp;amp;amp;amp;amp;amp;gt;
        &amp;amp;amp;amp;amp;amp;amp;lt;/p&amp;amp;amp;amp;amp;amp;amp;gt;
      &amp;amp;amp;amp;amp;amp;amp;lt;/div&amp;amp;amp;amp;amp;amp;amp;gt;
      {% endif %}
  • Same file add the following code right before the {% schema %}:
{% if section.settings.datepicker_enabled %}
  &amp;amp;amp;amp;amp;amp;amp;lt;script&amp;amp;amp;amp;amp;amp;amp;gt;
    window.datepicker_noweekends = {{section.settings.datepicker_noweekend}};
    window.datepicker_maxdate = {{section.settings.datepicker_maxdate}};
    window.datepicker_mindate = {{section.settings.datepicker_mindate}};
  &amp;amp;amp;amp;amp;amp;amp;lt;/script&amp;amp;amp;amp;amp;amp;amp;gt;
  {{ '//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css' | stylesheet_tag }}
  &amp;amp;amp;amp;amp;amp;amp;lt;script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" defer="defer"&amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;lt;/script&amp;amp;amp;amp;amp;amp;amp;gt;
  &amp;amp;amp;amp;amp;amp;amp;lt;script src="{{ 'datepicker-jquery.js' | asset_url }}" defer="defer"&amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;lt;/script&amp;amp;amp;amp;amp;amp;amp;gt;
  {% endif %}
  • In the same file locate the settings inside {% schema %}, locate the closing square brackets ] in the settings. Add the following delivery date picker code right before the closing square bracket ]:
,
{
      "type": "header",
      "content": "Date Picker"
    },
    {
      "type": "checkbox",
      "id": "datepicker_enabled",
      "label": "Enabled Delivery Date Picker?",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "datepicker_noweekend",
      "label": "No weekend?",
      "default": true
    },
    {
      "type": "number",
      "id": "datepicker_mindate",
      "label": "Min Date (Days)",
      "default": 4
    },
    {
      "type": "number",
      "id": "datepicker_maxdate",
      "label": "Max Date (Weeks)",
      "default": 8
    },
    {
      "type": "text",
      "id": "datepicker_note",
      "label": "Additional Text",
      "default": "We do not deliver during the weekend."
    }
  • Congrats, You’ve completed the coding parts.
  • Now it’s available on the Add a delivery date picker to your cart page. You can modify through Themes>customization>cart page section settings.

Congrats, You’ve completed this feature.

Posted in Shopify Tutorials

Post navigation

Next Watch Video Now! How to Add The Look Section In My Theme?

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Latest Posts

  • Shopify winter edition
    Understanding The Shopify Winter Edition 2023 UpdatesMar 14, 2023
  • Steps To Set Up Shopify Test Order For Quality Assurance
    Steps To Set Up Shopify Test Order For Quality AssuranceMar 1, 2023
  • Why You Should Implement Shopify Inventory Management for Increased EfficiencyFeb 16, 2023
  • Shopify theme detector
    Shopify Theme Detector: Uncover the Perfect Shopify Theme for Your StoreFeb 10, 2023

Subscribe Now

Follow Us

  • facebook
  • twitter
  • instagram
  • linkedin2

OriginateWeb.com is the realization of a dream. Our founder previously spent several years working for a large website development company.

Quick Links

  • Shopify Services
  • About Us
  • Shopify Theme Add-ons
  • Blog
  • Contact Us
  • Careers

Services

  • Shopify Theme Add-ons
  • Website Development
  • Page Speed Optimization
  • App Development
  • Maintenance
  • Training

Need Help?

  • Licensing Agreement
  • Terms and Conditions
  • Privacy Policy
  • Sitemap
  • facebook
  • twitter
  • instagram
  • linkedin2

© 2023 Originate Web. All Rights Reserved