Show the chosen date/time on the Shipping confirmation email
This document explains how to make the chosen date/time visible in the Shipping confirmation email.
Follow the steps below to use the Shipping confirmation email to show your customers the information they have chosen for their delivery.
- In your shop's admin page, go to Notifications;
- Go to Customer notifications > Shipping 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 on the CART page
Note: Please scroll down if the date picker is placed on your shop's product page. This step will only work if the calendar is on the cart page.
Identify what would be the best location to display the chosen delivery information in your Shipping confirmation HTML email structure and paste the following code:
{% 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 %}
For this example, we placed the snippet within <td class="order-list__product-description-cell"></td>
, at the end, just before </td>
.
This is the expected outcome:
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: "," %}
Note that the changes won’t be reflected 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.
If the date picker (widget) is placed on the PRODUCT page
Note: Please scroll up if the date picker is placed on your shop's cart page. This step will only work if the calendar is on the product page.
When the date picker is placed on the product page, the chosen date and time slot are stored as a property on the order line items. That means we can display each order item's chosen date/time slot. This is the expected outcome:
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>
.
{% assign tag_names = "Method,Delivery Date,Delivery Time,Pickup Date,Pickup Time" | split: "," %} {% for tag_name in tag_names %} {% if line.line_item.properties[tag_name] %} <p>{{ tag_name }}: {{ line.line_item.properties[tag_name] }}</p> {% endif %} {% endfor %}
This is how it would look like:
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: "," %}
Note that the changes won’t be reflected 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.