If you would like to customize your notification emails to display variable content based on product tags from a given order, you can add custom code to the email templates to display different text, images, or other content based on which products were purchased.
The most common emails this code is applied to are:
Order Confirmation
Shipping Confirmation
This guide will show you how to display the following variable content based on products in the order:
Text
Images
Discount Codes
Product Recommendations
***
Using an example to illustrate this, let’s say you want to add variable text depending on product tags in a given order.
If the product is tagged as “Bags” then display text “This is a bag”
If the product is tagged as “Classic_Gift_Card” then display the text “This is a gift card”
If the product is tagged as “Leather” then display the text “This is a leather item”
If none of the above conditions are triggered for the product, then we should display the text “This is none of the above”
In this scenario, you can only display one line of text per product / line item in the order. Also, you can edit this to use whatever product tags and corresponding text you want to use.
Once you're in the template builder, drag & drop the 5 code components, or as many or as little as you need on to the template in the desired location you want the dynamic content.
Insert the code blocks below into the custom code components with the text component with the text you want to display under each code block. Note, if you want to show more or fewer corresponding product to text relationships, you can simply add or remove code blocks as needed. (This code cannot be seen by customers on their notifications):
```
{% assign count = 0 %}
{% for line_item in line_items %}
{% for tag in line_item.product.tags %}
{% if tag == 'Bags' and count == 0 %}
```
Then this is where you will drag and drop a text component that says “This is a bag” in this example. Then you can move on to the next code block below.
```
{% assign count = count | plus: 1 %}
{% elsif tag == 'Classic_Gift_Card' and count == 0%}
```
Below the above code block, this is where you will drag and drop a text component that says “This is a gift card” in this example. Then you can move on to the next code block below, if applicable.
```
{% assign count = count | plus: 1 %}
{% elsif tag == 'Leather' and count == 0%}
```
Then this is where you will drag and drop a text component that says “This is a leather item” in this example. Then you can move on to the next code block below, if applicable.
```
{% assign count = count | plus: 1 %}
{% endif %}
{% endfor %}
{% if !line_item.product.tags and count == 0%}
```
Then this is where you will drag and drop a text component that says “This is none of the above” in this example. Then you can move on to the next code block below.
```
{% assign count = count | plus: 1 %}
{% endif %}
{% endfor %}
```
This final code block closes off the loop.
Here is a video of this process being done:
To make these changes effective, make sure you set the email templates live into Shopify again, and make sure to test an order to see if it's working as intended.
Have fun and feel free to reach out to [email protected] or through the in-app chat if you have any questions!