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 %}
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 %}
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.
If you found this useful maybe drop me a tip so I can buy a coffee — https://ko-fi.com/stephenkeable