Add a date picker to get delivery dates on your cart page

Caution

You can only add cart attributes to your cart page at /cart. Cart attribute information will not be captured in a cart drawer or cart popup. You must disable any cart drawer or popup in your theme if you want to add cart attributes to your cart form.

If you want to capture a delivery date, then you will need to customize your Shopify theme.

  1. Find the theme you want to edit, click Actions, and then click Edit HTML/CSS.

The steps for this tutorial differ depending on whether you are using a sectioned or a non-sectioned theme. To figure out whether your theme supports sections, go to the theme's Edit HTML/CSS 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 non-sectioned theme, then click the Non-sectioned themes button and follow the instructions.

Capture a delivery date for sectioned themes

  1. Locate and click the Assets folder to open it.

    Assets folder

  2. In the Assets directory, open your theme.js file (or theme.js.liquid) and add the following to the bottom of the file:

    
    $(document).ready( function() {
      $(function() {
        $("#date").datepicker( {
          minDate: +1,
          maxDate: '+2M',
          beforeShowDay: jQuery.datepicker.noWeekends
        } );
      });
    });
    
    
  3. Save your changes.

  4. Still on the Edit HTML/CSS page, under the Sections folder, locate and click the cart-template.liquid file to open it in the online code editor.

  5. Locate the closing tag of your cart form (you can do this by hitting ⌘-F or CTRL-F and searching "/form": </form>

  6. Right above </form>, add the following line:

    
        <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>
    
    
  7. Save your changes.

  8. Under the Layout folder, locate and click the theme.liquid file to open it in the online code editor.

  9. Just before the </head> tag, add the following:

    
        {{ '//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 new delivery-date input field on your cart page. When you click inside the text field, a date picker appears:

Delivery date snippet 3

The captured delivery date will show up in your order notes like this:

Delivery date snippet 4

The date picker used here is a widget from the jQuery UI library. The widget is documented here. This blog post will show you how to disable days in the date picker.

Capture a delivery date for non-sectioned themes

  1. Locate and click the Snippets folder to open it.

    Snippets folder1

  2. Scroll down to the bottom of the folder and click the Add a new snippet link.

  3. Give your snippet a title called: delivery-date.

    Delivery date snippet

  4. Click Create snippet

  5. Open up a new tab in your browser.

  6. Go to https://gist.github.com/carolineschnapp/1961333.

  7. Click on the Raw button and copy all of the content on that page (CMD-C for Mac users and CTRL-C for Windows users).

  8. Back in your admin, paste all of the copied content into your 'delivery-date' snippet (CMD-V for Mac users and CTRL-V for Windows users).

    Delivery date snippet 2

  9. Save your changes.

  10. Still on the Edit HTML/CSS page, under the Templates folder, locate and click on cart.liquid to open it in the online code editor.

  11. Locate the closing tag of your cart form (you can do this by hitting ⌘-F or CTRL-F and searching "/form": </form>

  12. Right above </form>, add the following line:

    
    {% include 'delivery-date' %}
    
    
  13. Save your changes.

You now have a new delivery-date input field on your cart page. When you click inside the text field, a date-picker appears:

Delivery date snippet 3

The captured delivery date will show up in your order notes like so:

Delivery date snippet 4

The datepicker used here is a widget from the jQuery UI library. The widget is documented here. This blog post will show you how to disable days in the datepicker.

Want to discuss this page?

Visit the Shopify Community