Show the chosen date/time on the packing slip

This documentation page is about making the chosen date/time visible in the packing slip provided by Shopify. If you're using another app for your packing slips and wish to make the date/time visible please contact the app's vendor.

For context, the packing slip is downloadable on the order's admin page (at the top-right of the screen, on the desktop):

If the date picker is placed on the CART page

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

When the date picker is placed on the cart page the chosen date/time is stored as order attributes. Due to Shopify's limitations, we can't access the order attributes in the packing slip template. However, the order notes are shown on the packing slips. So we have built a feature that copies the chosen date/time into the notes automatically. If you're already using the notes for something else it might not be an issue as the new notes are appended to any existing notes.

To enable this feature, make sure the date picker is set to show on the cart page. Then in the app's admin area, go to Home; scroll down to Advanced settings; then check the box: "Append the chosen method/date/time slots to the order's notes"; then click Save.

Now that this option is active and new orders will have the chosen date/time showing on the packing slip like this:

Now, it's possible to modify the packing slip's template to display the note on multiple lines.

To do so, find the following code (usually around line 154).

<p class="notes-details">
   {{ order.note }}
</p>

And replace it with this code snippet:

{% assign note_array = order.note | split: " | " %}
{% for note_item in note_array %}
   <p class="notes-details">{{ note_item }}</p>
{% endfor %}

The packing slip should now look like this:

If the date picker is placed on the PRODUCT page

Note: If the date picker is placed on the cart page of your shop, please scroll up. These steps 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 that we can display the chosen date/time slot for each order item. This is the expected outcome:

To obtain that result we need to modify the packing slip templates to display the line item properties. To do so, on Shopify's admin page, go to Settings then Shipping and delivery, then scroll down to the Packing slips section and click Edit next to Packing slip template.

In the Edit packing slip template page, add the following code snippet within the item description's div. It should be line 131. You need to place it under {% endif %} and above </p> . For more context, please refer to this code example.

{% assign tag_names = "Method,Delivery Date,Delivery Time,Pickup Date,Pickup Time" | split: "," %}
{% for tag_name in tag_names %}
  {% if line_item.properties[tag_name] %}
    <span class="line-item-description-line">{{ tag_name }}: {{ line_item.properties[tag_name] }}</span>
  {% 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

Make sure each tag label are 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.