Skip to main content

gift_card.liquid

The gift_card.liquid template renders the gift card page, which displays the gift card issued to a customer upon purchase.

Tip

Refer to the gift_card.liquid template in Dawn for an example of this template.

Unlike other pages in your store, gift card pages are hosted on the checkout.shopify.com domain. Gift card URLs contain unique identifiers for your store and gift card:

https://checkout.shopify.com/gift_cards/[store_id]/[gift_card_token]

The following image is an example of how Dawn's gift_card.liquid template renders the gift card page.

An example of the gift card template in Dawn

Anchor to LocationLocation

The gift_card template is located in the templates directory of the theme:

└── theme
├── layout
├── templates
| ...
| ├── gift_card.liquid
| ...
...

Anchor to ContentContent

This template can't be a JSON template.

You can include the following in your gift_card template or a section inside of the template:

Anchor to The gift_card objectThe gift_card object

You can access the Liquid gift_card object to display the gift card details.

Anchor to UsageUsage

When working with the gift_card template, you should familiarize yourself with the following:

Anchor to QR codeQR code

You can include a QR code link by adding JavaScript that generates a QR code. Add the following snippets in the <head> and <body> elements of the page, respectively. To control the content of the QR code, update the text property with the desired content. In this example, the QR code links to the store's URL.

Include in <head>

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

Include in <body>

<div id="qr-code"></div>

<script>
new QRCode(document.getElementById('qr-code'), {
text: '{{ shop.url }}',
width: 120,
height: 120
});
</script>

Anchor to Apple Wallet passesApple Wallet passes

You can include Apple Wallet passes by adding the following snippet to the <body> element of the page:

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

Anchor to Display only the gift card detailsDisplay only the gift card details

If you don’t want to include theme elements, like the header and footer, you can choose to render the gift_card.liquid template with no layout or with a custom layout, using the Liquid layout object.

For example:

gift_card.liquid

{% layout none %}

<!-- template content -->

Anchor to Preview the templatePreview the template

You can preview the gift card's appearance by navigating to the gift card template from the theme editor.

  1. From the theme editor, open the drop-down menu at the top of the page.
  2. Under Templates, click Others. Then click Gift card.
Note

If you can't find the gift card template in the theme editor's navigation menu, then you might need to insert the content_for_header Liquid object in the HTML <head> tag of your gift_card.liquid template.

Was this page helpful?