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

Caution

This document has not been verified to work with sectioned themes. We are currently reviewing our documentation and will update them soon. You can try to implement this on your theme, but keep in mind that it may not function.

In order to capture a delivery date, you will need to customize your Shopify Theme.

  1. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

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

  3. Locate and click the Snippets file to open it.

    Snippets folder1
  4. Scroll down to the bottom of the folder and click the Add a new snippet link.

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

    Delivery date snippet
  6. Click Create snippet.

  7. Open up a new tab in your browser.

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

  9. 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).

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

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

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

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

    
    {% include 'delivery-date' %}
    
    
  15. 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