Show the chosen date/time on the customer order confirmation email

It's possible to show the date or time slot your customer has chosen in the confirmation email they receive after making an order. We can't automate this step within our application so this requires a little bit of technical work, but all you need to do is to follow this guide.

In your shop's admin page, go to Notifications;
Go to Order confirmation;
Click on Edit code (top right corner)
In Email body (HTML) insert the following code snippets as advised below.

If the date picker is placed in CART page

Note: If the date picker is placed in the product page of your shop, please scroll down. This step will only work if the calendar is in the cart page.

Before the "<!DOCTYPE html>" you will find a {% endcapture %} tag (for the email_body capture block), insert the following code above the endcapture tag:

{% assign tag_names = "Method,Delivery Date,Delivery Time,Pickup Date,Pickup Time,Shipping Date,Shipping Time" | split: "," %}
{% for tag_name in tag_names %}
  {% if attributes[tag_name] %}
      <p>{{ tag_name }}: {{ attributes[tag_name] }}</p>
  {% endif %}
{% endfor %}

Important: Make sure to modify the assign tag_names line to list all the possible attribute names you want to display. They need to be the exact same values that you've set in the app's Settings > Texts and Languages.

The values are defined in "Messages":

Method tag label - Default value: Method
Order tag date label (if applicable, check the value for all methods "Local delivery", "Shipping", and "Store pickup") - Default value: Delivery Date / Pickup Date / Shipping Date
Order tag time slot label (if applicable, check the value for all methods "Local delivery", "Shipping", and "Store pickup") - Default value: Delivery Time / Pickup Time / Shipping Time

If you have multiple languages set up, include the tag for each one. Make sure each tag label is separated with a comma, without any extra spaces. For example:

{% assign tag_names = "Method,Local Delivery Date,Time Slot,Store Pickup Date,Time Slot" | split: "," %}

If these values are not exactly the same as those set in the admin, the dates won't appear in the order confirmation email.

Once the code has been added the date and/or time slots should then appear in the next order confirmation email like this:

For more context, please refer to this code example.

If the date picker is placed in PRODUCT page

Note: If the date picker is placed in the cart page of your shop, please scroll up. This step will only work if the calendar is in the product page.

When the date picker is placed on the product page the chosen date and time slot is stored as a property on the order item. That means that we need to display the chosen date/time slot for each order item. For example:

To obtain this result, in the email template, look for {{ line.variant.title }}. You want to insert the following snippet right after that block of code.

Important: there might be multiple locations where {{ line.variant.title }}. The code snippet needs to be added for each one you can find.

If you're on the legacy Order confirmation email template (it's probably the case if it's a around 600 lines of code), there is usually one location to find it around line 200.
If you're on the new Order confirmation email template (if it's more than 3000 lines of code), there usually 3 difference locations around lines 324, 912 and 2063.

Product mode code snippet:

{% assign tag_names = "Method,Delivery Date,Delivery Time,Pickup Date,Pickup Time,Shipping Date,Shipping Time" | split: "," %}
{% for tag_name in tag_names %}
  {% if line.properties[tag_name] %}
      {% if forloop.first == false %}
        <br/>
      {% endif %}
      {{ tag_name }}: {{ line.properties[tag_name] }}
  {% endif %}
{% endfor %}

The values are defined in "Messages":

Method tag label - Default value: Method
Order tag date label (if applicable, check the value for all methods "Local delivery", "Shipping", and "Store pickup") - Default value: Delivery Date / Pickup Date / Shipping Date
Order tag time slot label (if applicable, check the value for all methods "Local delivery", "Shipping", and "Store pickup") - Default value: Delivery Time / Pickup Time / Shipping Time

If you have multiple languages set up, include the tag for each one. Make sure each tag label is separated with a comma, without any extra spaces. For example:

{% assign tag_names = "Method,Local Delivery Date,Time Slot,Store Pickup Date,Time Slot" | split: "," %}

If these values are not exactly the same as set in the admin the dates won't show up in the order confirmation email.

Note that the changes won’t reflect in the preview or test email. You’ll want to place a test order from your storefront to verify that it is displayed in the confirmation email.