Shopify

Shopify Development

Shopify: Displaying Order Attributes To Customers Post Purchase

You may have order attributes on your Shopify orders, which have been added during the order process or afterwards using an app to let you staff add them in the admin area.

Common uses are for delivery dates, wrapping options or status information beyond the standard Shopify ones. Once the customer has selected them, it can be useful to display these afterwards to remind your customers. This can be reassuring that they selected the correct options and save unnecessary support calls or emails to check.

Notification emails

The notifications in Shopify use slightly different liquid objects to themes, so we need to use the attributes object which is an array, we can cycle through.

<ul>
  {% for attribute in attributes -%}
    <li><strong>{{ attribute.first }}:</strong> {{ attribute.last }}</li>
  {%- endfor %}
</ul>

You can also do some filtering on that list to avoid showing staff only attributes, with some if/else statements against the attribute.first property.

Or we can just grab a specific attribute after checking it exists.

{% if attributes.delivery-date %}
  <strong>Delivery Date</strong> {{ attributes.delivery-date }}
{% endif %} 

You can also use bracket notation, which can be useful if your attribute name has spaces in it.

{% if attributes["Delivery Date"] %}
  <strong>Delivery Date</strong> {{ attributes["Delivery Date"] }}
{% endif %}

Your attribute on the notification email

Note: currently the attributes object is not available in the “Draft Order Invoice” email, hopefully Shopify will change this.

Order history

When a customer logs in to view their order history, you can display attributes using the order.attributes object.

<ul>
  {% for attribute in order.attributes -%}
    <li><strong>{{ attribute.first }}:</strong> {{ attribute.last }}</li>
  {%- endfor %}
</ul>

Again here we can grab a specific attribute to display too:-

{% if order.attributes.delivery-date %}
  <strong>Delivery Date</strong> {{ order.attributes.delivery-date }}
{% endif %} 

And the bracket notation method works fine here too.

{% if order.attributes["Delivery Date"] %}
  <strong>Delivery Date</strong> {{ order.attributes["Delivery Date"] }}
{% endif %}

Your attribute (delivery date) shown on the customer order history page.

Order Status Page

If you have access to edit the checkout.liquid file on your Shopify Plus plan, then you can do similar things to display the attributes on the order status page, using the order.attributes object similar to the order history.

More info on editing the checkout.liquid file

If you found this useful maybe drop me a tip so I can buy a coffee — https://ko-fi.com/stephenkeable