gift_card.liquid

The gift_card.liquid file renders the gift card issued to a customer upon purchase. The URL to the gift_card.liquid template is found in email notifications sent to the customer when a gift card is purchased.

Within the gift_card.liquid template, you can use the gift_card object's attributes to display a gift card's details.

A default gift_card.liquid template is created automatically when the Gift Card feature is activated in a store.

Gift card liquid

Template requirements

The gift card template must support QR codes and Apple Wallet Passes. You can ensure the template supports these requirements by adding some code to the gift-card.liquid template.

QR code

Your gift card template must include a QR code link to your store.

Include the following script in the <head> element of gift_card.liquid:


{{ 'vendor/qrcode.js' | shopify_asset_url | script_tag }}

Then, in the <body> of the template, include the following code:


<div id="qr-code"></div>
<script>
  new QRCode(document.getElementById("qr-code"), {
    text: "{{ gift_card.qr_identifier }}",
    width: 120,
    height: 120
  });
</script>

Apple Wallet Passes

Your gift card template must also support Apple Wallet Passes. You can do this by including the following code in the <body> element of the gift_card.liquid template:


{% if gift_card.pass_url %}
<a href="{{ gift_card.pass_url }}"><img id="apple-wallet-badge" src="{{ 'gift-card/add-to-apple-wallet.svg' | shopify_asset_url }}" width="120" height="40" alt="Add To Apple Wallet"></a>
{% endif %}

This code is usually included in the <footer> element.

Displaying only the gift card details

If you don't want to include theme elements (logo, menu, footer, etc.) inside the gift_card.liquid template, include a layout tag with a parameter of none.


{% layout none %}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
...

Want to discuss this page?

Visit the Shopify Community