display Gift Card image based on Variant selected in notification emails

Products and Orders APIs
1

Hi everyone,

I’m looking for some guidance on customizing the Gift Card Notification email.

I have a Gift Card product with multiple variants (e.g., “Birthday,” “Thank You,” and “Christmas”). Each variant has its own unique Variant Image assigned in the Shopify Admin.

When a customer selects the “Christmas” variant and completes the purchase, I want the automated Gift Card email they receive to show that specific “Christmas” variant image, rather than the default “Gift Card” product image.

2

Hi @Aman_Yadav,

You can certainly edit the Gift Card Notification Email to display a specific image, however this would require a bit of a workaround since the Gift Card Notification Email doesn’t have context on the actual product variant added to the cart/checkout, just the gift card object that is created after the fact when fulfilling the order.

You can workaround this limitation using liquid objects and filters on the storefront, adding line item properties to the product added to the cart, which are available on the final gift card object, with the following steps and documentation as a general guidance on how to accomplish this:

  1. Edit the product theme page so it adds a line item property to the cart if the product being added is a gift card.

    • the property can be anything, but I recommend using the product variant title, which can be retrieved via Liquid and added as a property like so:
{%-  if product.gift_card? -%}
  <input
    name="properties[variant-title]"
    value="{{product.selected_variant.title}}"
  >
{%- endif -%}
  1. Edit the Gift Card Notification Email Template so that it retrieves the line item properties, which can then be used to find the actual product variant with the image you want to display, like so:
 {% assign variant_title_from_property = gift_card.properties['variant-title'] %}
 {% if variant_title_from_property %}
    {% assign matched_variant = nil %}
    {% for variant in gift_card.product.variants %}
        {% if variant.title == variant_title_from_property %}
            {% assign matched_variant = variant %}
            <img src="{{ matched_variant.image | img_url: '480x480' }}" alt="{{ matched_variant.title }}" width="240">
        {% endif %}
    {% endfor %} 
{% endif %}

I did test this on my own test store, and I can confirm that this does work to display the Gift Card Variant Image in the email that’s sent to the customer after fulfilling the order.

Relevant Documentation: