Activate Gift Cards & improve customer experience with gift card email templates
Please note: Activating gift cards is required for YouPay to work. YouPay uses the gift card API to process orders.
1. Activate Gift Cards on your store.
If you already have Gift Card products (even just a draft) on your Shopify store, you can skip this step. If you do not have a Gift Card on your Shopify store, head to 'Products' -> 'Gift Cards' and click 'Add gift card product'. Simply set any name for the card and save it as a draft. Shopify requires one gift card product to be set on your store for gift card functionality to be enabled.
2. Adjusting your gift card email template.
Please note: This change is optional. YouPay will fully function without adjusting your gift card email template, however, this will provide your customers with the best user experience.
In order to create the best experience for your customers, adjusting the gift card email helps to keep the YouPay experience consistent. To ensure your customers receive YouPay-themed updates for their YouPay activity, follow the below steps.
With Gift Cards activated. Navigate to 'Settings' -> 'Notifications' -> 'Gift card created' to arrive at your Gift Card templates.
If you have a default Shopify email template you can follow the steps and copy the code blocks below. Alternatively, if you have a custom gift card template, you can skip this view our Custom Template Guide.
Copy and paste the code below for Email Subject (HTML) template into your 'Email subject' -> click 'Save'.
Copy and paste the code below for Email Body (HTML) template into your 'Email body (HTML)' -> click 'Save'.
If you use SMS notifications, copy and paste the code below for SMS template into 'SMS' under 'Content' -> click 'Save'.
Email Subject (Liquid) template
{% raw %}{% if gift_card.product.title contains "YouPay" %} {{ gift_card.product.title }} confirmed {% else %} {{ shop.name }} {{ gift_card.balance | money_without_trailing_zeros }} gift card {% endif %}{% endraw %}Email Body (Liquid, HTML, CSS) template
{% raw %}
{% if gift_card.product.title contains "YouPay" %}
{% assign youpayOrder = true %}
{% else %}
{% assign youpayOrder = false %}
{% endif %}
{% capture email_title %}
{% if youpayOrder %}
{% else %}
Your gift card is now available!
<table class="row actions"><tr><td class="empty-line"> </td></tr></table>
<img src="{{ 'gift-card/card.jpg' | shopify_asset_url }}" alt="Gift card image" width="240" height="160">
<table class="row actions"><tr><td class="empty-line"> </td></tr></table>
{% endif %}
{% endcapture %}
{% capture email_body %}
{% if youpayOrder %}
<img src="https://cdn-001.youpay.ai/gift-card-standard.jpg" style="width: 100%; height: auto;">
{% else if gift_card.expires_on %}
Your {{ gift_card.balance | money_without_trailing_zeros }} gift card for {{ shop.name }} is active. Keep this email or write down your gift card number. This gift card expires on {{ gift_card.expires_on }}.
{% else %}
{% if gift_card.customer %}
Hi {{ gift_card.customer.first_name }}, here is your {{ gift_card.balance | money_without_trailing_zeros }} gift card. Treat yourself, or send it to someone else as a gift.
{% else %}
Hi, here is your {{ gift_card.balance | money_without_trailing_zeros }} gift card. Treat yourself, or send it to someone else as a gift.
{% endif %}
{% endif %}
{% endcapture %}
<!DOCTYPE html>
<html lang="en">
<head>
<title>{{ email_title }}</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="/assets/notifications/styles.css">
<style>
.button__cell { background: {{ shop.email_accent_color }}; }
a, a:hover, a:active, a:visited { color: {{ shop.email_accent_color }}; }
</style>
</head>
<body>
<table class="body">
<tr>
<td>
<table class="header row">
<tr>
<td class="header__cell">
<table class="container autowidth">
<tr>
<td>
<table class="row">
<tr>
<td class="shop-name__cell">
{%- if shop.email_logo_url %}
<img src="{{shop.email_logo_url}}" alt="{{ shop.name }}" width="{{ shop.email_logo_width }}">
{%- else %}
<h1 class="shop-name__text">
<a href="{{shop.url}}">{{ shop.name }}</a>
</h1>
{%- endif %}
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="row content">
<tr>
<td class="content__cell">
<center>
<table class="container">
<tr>
<td>
<p>{{ email_title }}</p>
<p>{{ email_body }}</p>
<table class="row actions">
{% if youpayOrder %}
<tr>
<td class="actions__cell">
{% if shop.url %}
<table class="link secondary-action-cell">
<tr>
<td class="link__cell"><a href="{{ shop.url }}" class="link__text">Visit our store</a></td>
</tr>
</table>
{% endif %}
</td>
</tr>
{% else %}
<tr>
<td class="actions__cell">
<table class="button main-action-cell">
<tr>
<td class="button__cell"><a href="{{ gift_card.url }}" class="button__text">View your gift card</a></td>
</tr>
</table>
{% if shop.url %}
<table class="link secondary-action-cell">
<tr>
<td class="link__cell"><a href="{{ shop.url }}" class="link__text"><span class='or'>or</span> Visit our store</a></td>
</tr>
</table>
{% endif %}
</td>
</tr>
{% endif %}
</table>
{% if gift_card.pass_url %}
<a href="{{ gift_card.pass_url }}" class="apple-wallet-button">
<img src="{{ 'gift-card/add-to-apple-wallet.png' | shopify_asset_url }}" alt="Add to Apple Wallet" width="120" height="40">
</a>
{% endif %}
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
<table class="row footer">
<tr>
<td class="footer__cell">
<center>
<table class="container">
<tr>
<td>
<p class="disclaimer__subtext">If you have any questions, reply to this email or contact us at <a href="mailto:{{ shop.email }}">{{ shop.email }}</a></p>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
<img src="{{ 'notifications/spacer.png' | shopify_asset_url }}" class="spacer" height="1" />
</td>
</tr>
</table>
</body>
</html>
{% endraw %}SMS Template
{% raw %}{% if gift_card.product.title contains "YouPay" %}Thank you,your YouPay order has been placed and the shopper has been notified.{% else %}Your{{gift_card.balance | money_without_trailing_zeros}}gift card for{{shop.name}}:{{gift_card.url}}is active.{% if gift_card.expires_on %}This gift card expires on{{gift_card.expires_on}}{% endif %}{% endif %}{% endraw %}
Custom Template Guide
Please note: This solution requires a basic understanding of Liquid, HTML and CSS.
Email Subject (Liquid) template
Firstly, you can copy and adjust this code block accordingly for the Email subject.
{% raw %}{% if gift_card.product.title contains "YouPay" %} {{ gift_card.product.title }} confirmed {% else %} {{ shop.name }} {{ gift_card.balance | money_without_trailing_zeros }} gift card {% endif %}{% endraw %}1. Adjust the contents between the "{% raw %}{% if %}{% endraw %}" and "{% raw %}{% else%}{% endraw %}" statement to suit a YouPay message.
2. Adjust the contents between of the "{% raw %}{% else %}{% endraw %}" and "{% raw %}{% endif %}{% endraw %}" statement to suit a typical gift cart order.
Here is an example of where you should adjust the messaging:
{% raw %}{% if ... %}
ADD YOUPAY SUBJECT MESSAGE HERE
{% else %}
ADD TYPICAL GIFT CARD SUBJECT MESSAGE HERE
{% endif %}
{% endraw %}
Email Body (Liquid) template
In order to adjust the email body, you will need to identify the specific HTML blocks within the custom email template that display Gift Card messaging and add conditions to each of them. Firstly, add this to the top of your template.
{% raw %}{% if gift_card.product.title contains "YouPay" %} {% assign youpayOrder=true %}{% else %} {% assign youpayOrder=false %}{% endif %}{% endraw %}
Now, whenever you want to include YouPay messaging in the email template body you can execute the variable like this:
{% raw %}{% if youpayOrder %} <!-- display YouPay content --> {% else %} <!-- display standard gift card content --> {% endif %}{% endraw %}Test your new YouPay-themed email updates works!
To test that your Gift Card code translates to a YouPay-themed update for YouPay orders, in your Email Body (HTML) Template, on the 4th line of code, change the '{% assign youpayOrder = false %}' to '{% assign youpayOrder = true %}'. Before you save, you can click 'Preview' and you will see the YouPay banner appear in the preview.
If this test worked - great, this works! Before you save, make sure you change the 'true' back to its original value of 'false'.
Congratulations, you're almost ready to go live! Continue on to:
If you have any issues integrating the YouPay components, please contact us at [email protected].
Was this article helpful?
That’s Great!
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
Feedback sent
We appreciate your effort and will try to fix the article