Table of Contents
How do I capture a delivery date on the cart page or at checkout? (Shopify Classic Admin)
You will need to customize your Shopify Theme for this.
In your shop admin, go to Themes → Template Editor:
On the Template Editor page, under Snippets on the left, create a new snippet called delivery-date:
Then, paste the content of this gist inside your new snippet.
PRO TIP: Click on the raw button at the top right of the gist, then use CTRL-A on your PC or ⌘-A on your Mac to select the entire content of the browser page, and copy it to your clipboard using CTRL-C or ⌘-C. Then, place your cursor inside your delivery-date.liquid snippet and use CTRL-V on your PC or ⌘-V on your Mac to paste the content of your clipboard there. Then save.
Time to include your delivery-date snippet on your /cart page.
Still on the Template Editor page, locate the file cart.liquid under Templates on the left. Click on cart.liquid to open that file in the online code editor.
Locate the closing tag of your cart form:
</form>
Right above </form>, add the following:
{% include 'delivery-date' %}
Like so:
Save. You are done.
You now have a new delivery date input field on your cart page:
When you mouse-click inside the text field, a calendar-like date-picker will pop up below:
Pick a date and it will be saved to your text field like so:
Do you want to avoid the need to click on the cart update button? Add this auto-save script at the bottom of your cart.liquid template.
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.
How do I capture a delivery date on the cart page or at checkout? (Shopify 2)
In order to capture a delivery date, you will need to customize your Shopify Theme.
In your shop admin, go to Themes. This will take you to the Theme page.
Click on the Template Editor button. This will take you back to your shop admin and into the Template Editor
On the Template Editor page scroll through the folders on the left until you reach "Snippets". Click on the folder to open it, then click on the Add a new snippet link. This will open a new window in which you can create your snippet.
Give your snippet a title called "delivery-date:"
Click Save.
Paste the content of this gist inside your new snippet.
Having trouble? Click on the raw button at the top right of the gist, then use CTRL-A on your PC or ⌘-A on your Mac to select the entire content of the browser page, and copy it to your clipboard using CTRL-C or ⌘-C. Then, place your cursor inside your delivery-date.liquid snippet you just created, and use CTRL-V on your PC or ⌘-V on your Mac to paste the content of your clipboard there. Then hit save.
Update your /cart page.
Still on the Template Editor page, locate the file "cart.liquid" under Templates in the left-hand sidebar. Click on cart.liquid to open that file in the online code editor.
Locate the closing tag of your cart form (you can do this by hitting ⌘-F or CTRL-F and searching "/form"):
</form>
Right above </form>, add the following line:
{% include 'delivery-date' %}
Like so:
Hit save. And you're done!
You now have a new delivery-date input field on your cart page:
When you mouse-click inside the text field, a calendar-like date-picker will pop up below:
Pick a date and it will be saved to your text field like so:
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.
