How can I add a custom message to gift cards purchased in my store?

[Cavera]

For Gift Cards purchased through our store, we need to be able to add a "message" property where customers can fill out a custom message for the gift card. This message will then be displayed in the Shopify Gift Card notification email. I am capturing this during the sale using a line-item property which is passed to the cart/checkout and I can see when the order is submitted. I assumed that this line-item property would then be applied to the gift card that is automatically generated from the sale (applied to it's properties) but that doesn't appear to be the case.

Am I missing something here or is there another way I can display this submitted message in the Gift Card notification email?

Thanks

[yy0z]

I assume you mean the gift card email that gets sent out to the customer? 

I am afraid you would need to edit the code in the notification yourself to display the line-item property, it does not get automatically added on emails.

Go to Admin -> Notifications, and scroll down to Orders and find Gift Card Created. You can edit the code inside that screen.

Hope this helps.

[Cavera]

Thanks for responding. I understand that I need to edit the code in the Notification to display the Gift Card properties. Where I'm running into issues is despite the Gift Card product having line item properties on checkout, these properties don't appear to be added to the gift card that is created. So, when I then try to display the Gift Card properties in the notification email, that object has no properties to display. That's the issue.

So, my question is, why are these properties not being added from the order to the newly created gift card? Is there something I need to enable?

[ChristopherVigh]

I am having the same problem..

I tried the docs and it says gift_card have properties, but i have tried multible ways and nothing works. So if anyone has a lead or a way to inplement the properties that would be great 🙂
(The line-item property is already in my cart and checkout)

https://shopify.dev/api/liquid/objects/gift_card

        {% for property in gift_card.properties %}

          {{ property.first}}: {{ property.last }}

        {% endfor %}
        {% for property in gift_card.properties %}

                            {%- assign property_first_char = property.first | slice: 0 -%}

                            {%- if property.last != blank and property_first_char != '_' -%}

                              <div class="product-option">

                                <dt>{{ property.first }}: </dt>

                                <dd>

                                  {%- if property.last contains '/uploads/' -%}

                                    <a href="{{ property.last }}" class="link" target="_blank">

                                      {{ property.last | split: '/' | last }}

                                    </a>

                                  {%- else -%}

                                    {{ property.last }}

                                  {%- endif -%}

                                </dd>

                              </div>

                            {%- endif -%}
          {% endfor %}

[yy0z]

When you say it is not showing, do you mean you can't see it in the email preview in Shopify admin? Did you try to put through a test order? For custom properties like line-items, you can't really preview these in the email template, as the preview order itself doesn't contain these custom properties, so they will always come up as empty. I think the only way to test for these is to put through a test order and see if the properties come through as you intended.  

[ChristopherVigh]

No, it is not in the email template but in the gift card liquid file in the dawn template.

[Cavera]

YyOz. My original question, it doesn't matter if we're talking about the email notification template or the gift card template. The  issue is when the order is placed for a gift card and this triggers the creation of a Gift Card product in Shopify, the line item properties that were added to that line item in the order are not then applied to the newly created Gift Card. A Shopify Gift Card object can have properties, just like an order line item so I assumed this would be passed to the card automatically when created from an order. Apparently, this doesn't happen.

So, what I'm wondering is, is there a way to pass this information from the order/lineitem to the gift card that is created from the order. I'm guessing I need to create an app to do this for me but if so, I'm surprised that this isn't a native Shopify feature.

[yy0z]

I see. I must confess I have never used gift_card properties before. One thing I don't understand is why don't you just use the line item properties instead? This can be accessed in the gift card liquid. I just tested it, if I add custom properties like gift message to the line item properties, and make a test order, I can retrieve these in the gift card page. Am I not understanding what you trying to achieve here?

[ChristopherVigh]

Thats what i am trying to do, the gift_card.properties is the way to get the line item properties from the gift_card object or that is atleast how i see it. If you can share your solution that would be great 🙂

[Cavera]

Shopify's lineitem object from the order is not accessible in the Gift Card notification email which is what I've been trying to do. I do have access to the Gift Card object and it's properties but those properties and the lineitem properties are two different things. When I try to access the Gift Card properties, they are empty regardless of whether the line item in the order that created had properties. That's where I'm stuck.

[ChristopherVigh]

It is the same place where i am stuck.. 

[yy0z]

I played around with gift card create notification and was able to retrieve the gift card properties in the notification. See attached screen shot. I just added the following code to the notification email:

Test for line properties

{% unless gift_card.properties == empty %}
{%- for prop in gift_card.properties -%}

<div>
<span class="order-list__item-variant">{{ prop.first }}: </span>
<span class="order-list__item-variant"> {{ prop.last }} </span>
<div>
{%- endfor -%}
{% endunless %}

The same applies to the gift card.liquid, also have included a screen shot.

Testing for the code -
gift_card properties
{% for prop in gift_card.properties %}}
{{ prop.first}}: {{ prop.last }}
{% endfor %}

These two properties were added as line-item properties in the product template, not as gift_card properties. For transparency, the codes I added on the product page was in a custom liquid object:

<label for='message' >Gift Message (Optional)</label>
<div class='field'>
<textarea id='message' name='properties[Gift Message]' form='product-form-{{section.id}}' class='text-area field__input'>
</textarea>
</div>

<div>
<label
for='giftWrapping'>Gift Wrapping</label>

<input type="checkbox" id='giftWrapping' value='yes' name='properties[Gift Wrapping]' form='product-form-{{section.id}}' checked />
</div>

As I said previously though, these custom properties will show up as empty/blank in preview unless you actually place a test order on your site. I don't know how both you and ChristopherVigh were testing these previously. 

[Cavera]

Oh my god, that so weird. That is exactly what I did but whatever properties I add to the product, those are not being applied to the gift card for some reason. I can see the properties in the cart and checkout so I know that they are there on the line item properties for the sale. Also, I can see them in the line item properties in the order summary after the sale but when I query the gift card properties, that attribute is just an empty array. But you're saying you didn't do anything special to get the properties to be applied to the gift card. Well, I'm just stumped. Maybe there is a store setting somewhere that controls this? I just don't know why your code works in your store and not mine. So Weird.

[ChristopherVigh]

I am experience the exact same thing as Cavera. I also see the properties in cart, checkout and order. It is really weird.. What template are you using @yy0z?

[yy0z]

I was using the standard Dawn template, latest version. One thing I did notice was that when I tried the same code the night before it wasn't showing, but then it was working as intended the next day. 

Maybe just save your code as it is, and then revisit the next day to do another test order to see if it worked. I don't know what else to suggest really. 

[Cavera]

Interesting thought Yy0z. Shopify does have some goofy caching and maybe that is getting in the way of testing. Man, I wish Shopify support was able to answer questions like this. I did reach out to support and all they are able to tell me is that they are not developers and you're pretty much on your own. Appreciate your input.

[yy0z]

good luck with it. Sometimes computer just says no...

[ChristopherVigh]

I got it working. You need to resend the real giftcard that you get from the order(If you don't have it in your mail inbox) and not any test preview. Have it set it up like YyOz and when i did that it worked. But it does not work in any test preview, atleast not for me.

[Richie_Ramone]

Hi Yy0z,
I really wanted to implement these changes and coding doesn't terrify me - but unfortunately you haven't fully elaborated exactly where each of these pieces of code were placed.

I'm using the Minimal Theme and just went through a discussion with Shopify Support and as it's a "vintage" theme I would need to add the code myself. I've had two customer in the past week that have entered their own email (rather than the intended recipient) and have not been happy.
Hope you are happy to revisit and help! Thank you.

[aweston]

Hi there! I know this is too late to be of use to the OP, but I found this post while trying to solve an issue with disappearing line item properties, and I wanted to help others who might be struggling!

We successfully implemented a send-to-recipient feature for gift cards following this documentation: https://shopify.dev/docs/themes/product-merchandising/gift-cards
We noticed that the gift-card related line item properties (`Message`, `Recipient Name`, etc) were removed from the line item on the order after checkout. We talked to Shopify support and determined that this is the expected behavior. This was their explanation:

"I have confirmed with our internal teams that the gift card recipient details are intentionally removed from the order once fulfilled. This is due to personal information being available to the public if the recipient details/line item properties are not removed. You will only see the recipient info before fulfillment because it is required by the system to send to the recipient."

As of writing, this was not in the documentation. I have asked them to update it, but in the meantime wanted to leave breadcrumbs for those who are confused!