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" | 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 first 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 both "Local delivery" and "Store pickup") - Default value: Delivery Date / Pickup Date
Order tag time slot label (if applicable, check the value for both "Local delivery" and "Store pickup") - Default value: Delivery Time / Pickup 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.

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, the following code snippets need to be placed within <td class="order-list__product-description-cell"></td> , at the end, just before </td> .

For the chosen date:

{% assign tag_names = "Method,Delivery Date,Delivery Time,Pickup Date,Pickup 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 both "Local delivery" and "Store pickup") - Default value: Delivery Date / Pickup Date
Order tag time slot label (if applicable, check the value for both "Local delivery" and "Store pickup") - Default value: Delivery Time / Pickup 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.

For more context, please refer to this code example.

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.