Customer's order page

The guide is for illustrative purposes only and requires knowledge of HTML and Liquid. The exact steps depend on your online store's theme and requirements.

Prerequisites

1. Familiarise yourself with Shopify's theme code editing guide.

2. (Optional) I recommend duplicating your theme and making changes to it first. Once you're happy with the results, please apply the same changes to the live store.

Instructions

1. Start editing your theme code

2. Find the relevant customers/order.liquid file. Note that the file name may be different in your store's theme.

3. Place the code snippet within the order line_items loop to show serial numbers, warranty and custom fields. You may want to edit the snippet for more (e.g. use a custom field key specific to your store).

   {% comment %}SERIALIZER SNIPPET STARTS HERE{% endcomment %}
   {% assign tracked_line_items = order.metafields.serializer.properties.value.items
     | where: 'lineItemId', line_item.id
   %}
   
   {% if tracked_line_items.size > 0 %}
     {% assign sns = tracked_line_items | where: 'serialNumber' | map: 'serialNumber' %}
     {% if sns.size > 0 %}
       <p style="padding-top: 1em">
         <small> Serial number(s): {{ sns | join: ', ' }} </small>
       </p>
     {% endif %}
   
     {% if tracked_line_items[0].warrantyDuration.value > 0 %}
       <p>
         <small>
           Warranty duration: {{ tracked_line_items[0].warrantyDuration.value }}
           {{ tracked_line_items[0].warrantyDuration.unit }}(s)
         </small>
       </p>
     {% endif %}
     {% comment %}SERIALIZER CUSTOM FIELDS EXAMPLE STARTS HERE{% endcomment %}
     {% comment %}I'm using 'batchNumber' as an example - your key may be different{% endcomment %}
     {% assign line_custom_fields = tracked_line_items | map: 'customFields' %}
     {% assign my_fields = line_custom_fields | where: 'key', 'batchNumber' %}
     {% if my_fields.size > 0 %}
       <p>
         <small> Batch number(s): {{ my_fields | map: 'value' | join: ', ' }} </small>
       </p>
     {% endif %}
     {% comment %}SERIALIZER CUSTOM FIELDS EXAMPLE ENDS HERE{% endcomment %}
   {% endif %}
   {% comment %}SERIALIZER SNIPPET ENDS HERE{% endcomment %}

4. Click Save and Preview store (buttons at the top right)

   
5. Navigate to the customer's order page and verify the changes look as expected. Ensure the order has serial numbers, warranty or custom fields populated. Otherwise you wouldn't see any changes.

   

   If you don't see any changes even though the order has populated item fields, it's likely the wrong file was edited. Add a dummy code snippet, e.g. <p>Can you see this?</p> to ensure the correct file was edited.