In the article How to Localize Tracking Statuses and Their Descriptions in Klaviyo Templates, we demonstrated how to personalize tracking data for customers in their local language. Now, in this article, we'll explore how to enhance the template further by including product items associated with shipments and orders.

Let's walk through the steps:

1. Begin by accessing the previously adjusted template in the article. While in template editing mode, click the Test and Preview button located in the upper right corner. Scroll through the event properties until you locate the shipmentItems line. Here, you'll find various product variables such as name, picture, size, color, quantity, and SKU.

2. To copy the desired variable, simply click on it. Since a single variable represents only one product, and the number of items can vary per purchase, we've prepared a unified code snippet that will display all the products in the parcel. Just copy the code below, and return to template editing by clicking the Done button. Paste the copied code into the desired template location switching to the Source code mode. 

Here's the code to use for Shipment events:

{% for item in event.shipmentItems %}
<div>
<img style="width: 150px; height: auto;" src="{{ item.orderItem.imageUrl }} " alt="Product Image">
<p>{{ item.orderItem.productName }}</p>
<p>Size: {{ item.orderItem.productOptions.Size }}</p>
<p>Color: {{ item.orderItem.productOptions.Color }}</p>
<p>Quantity: {{ item.qty }}</p>
</div>
{% endfor %}

3. Finalizing, click the Preview and Test button to view the result. In the Preview Event Info menu, locate the Previewing with recent event' section. Then, using the arrows, select the event with populated data to display product options.

Utilize the Send Test button to verify the template's display in an email inbox. 

4. For Order events, use the following code. Since a single order can contain multiple shipments and the number of items can vary per parcel, we've prepared a unified code snippet to display all shipments with the products in the order. Copy the code below, return to template editing by clicking the Done button, and paste the copied code into the desired template location, switching to Source code mode. Then, repeat step 3 to complete:

{% for shipment in event.shipments %}
<h2>Shipment Details</h2>
<p>Tracking Number: {{ shipment.trackingNumber }}</p>
<p>Tracking Status: {{ shipment.trackingStatusTranslation.es|default:'' }}</p>
<p>Origin Country: {{ shipment.originCountry }}</p>
<p>Destination Country: {{ shipment.destinationCountry }}</p>
<p>Shipped At: {{ shipment.shippedAt }}</p>
<h3>Shipment Items</h3>
{% for item in shipment.shipmentItems %}
<p><img style="width: 150px; height: auto;" src="{{ item.orderItem.imageUrl }}" alt="Product Image"></p>
<p>Product Name: {{ item.orderItem.productName }}</p>
<p>Size: {{ item.orderItem.productOptions.Size }}</p>
<p>Color: {{ item.orderItem.productOptions.Color }}</p>
<p>Quantity: {{ item.qty }}</p>
{% endfor %}
{% endfor %}

Feel free to customize the template with your unique style and text according to your preferences and requirements. Utilize the Send Test button to verify the template's display in an email inbox. 

5. Afterward, save the job by clicking the Done and Save buttons.

Learn more about the integration possibilities between TrackMage and Klaviyo in the following section.