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.

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. You can scan the QR code only using the Shopify POS app.

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>
  new QRCode(document.getElementById('qr-code'), {
    text: '{{ gift_card.qr_identifier }}',
    width: 120,
    height: 120

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 }}"
    src="{{ 'gift-card/add-to-apple-wallet.svg' | shopify_asset_url }}"
    alt="Add To Apple Wallet"
{% 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>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />