intermediate Intermediate tutorials require familiarity with basic web design concepts, as well as basic knowledge of HTML, CSS and JavaScript.

Unsupported Customization

Unsupported customizations fall outside the scope of our support service. This means that we’re not able to help you if you run into problems. The good news is that we’ve classified each tutorial according to its level of difficulty, to help you decide whether or not to attempt it on your own.

There’s also a growing community on our forums - you’ll often find friendly and helpful advice there. You could also consider reaching out to a Shopify Expert to assist you with some of the more advanced customizations.

Capturing a delivery date on the cart page

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

  1. From your shop admin, go to the Themes page.

  2. Click Template Editor for the theme you want to customize.

    #

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

    #

  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.

    #

  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-P for Mac users and CTRL-P for Windows users).

    #

  11. Save your changes.

  12. Still on the Template Editor 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":

  14. Right above , add the following line:

{% include 'delivery-date' %}

Save your changes.

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

#

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

#

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.

This customization is not supported by our Shopify Gurus. Learn more ›

Ready to put what you've learned into action?

Build an online store with Shopify. Try it free.

Experience the future of retail now.

Shopify Point of Sale. Try it free.