> For the complete documentation index, see [llms.txt](https://galmis.gitbook.io/serializer-product-tracking/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://galmis.gitbook.io/serializer-product-tracking/getting-started/sharing-and-integration/share-item-information-with-customers/customers-order-page.md).

# Customer's order page

{% hint style="danger" %}
The guide is for stores using the legacy customer account pages, as the new customer account pages do not support Liquid customisations. Learn more about the [differences between customer accounts and legacy customer accounts](https://help.shopify.com/en/manual/customers/customer-accounts).
{% endhint %}

{% hint style="info" %}
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.
{% endhint %}

## Prerequisites

1. Familiarise yourself with [Shopify's theme code editing guide](https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/edit-theme-code). 
2. (Optional) I recommend [duplicating your theme](https://help.shopify.com/en/manual/online-store/themes/managing-themes/duplicating-themes) 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](https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/edit-theme-code#edit-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).

   ```liquid
   {% 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)\
   &#x20;

   <figure><img src="/files/imk419N2IMRSBXnscjjq" alt=""><figcaption></figcaption></figure>
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.<br>

   <figure><img src="/files/IBxfyYrkZsrhLKjLMQy9" alt=""><figcaption></figcaption></figure>

   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.