This guide covers the gift card template: the page customers reach when they receive a gift card link by email after a purchase.
This is a different surface from the product page that sells gift cards. For the gift card recipient form on the product page (where the buyer enters who to send the gift card to), see template-product.md.
What the gift card template does
When someone buys a gift card from your store and chooses to send it as a gift, Shopify generates a unique URL for that gift card and emails it to the recipient. The recipient clicks the link and lands on the gift card page rendered by gift_card.liquid.
The page shows:
| Element | Source |
|---|---|
| Shop logo or shop name | shop.brand.logo (uploaded in your Shopify admin under Settings, Brand) with a fallback to shop.name plain text |
| Heading | A translated "Your gift card" string |
| Gift card image | gift_card.image, usually sourced from the gift card product image in Shopify admin. Optional: if no image is set, this section is hidden |
| Balance | gift_card.balance formatted in the store currency. Updates as the customer spends the gift card |
| Initial value | Shown only when the balance differs from the initial value (that is, the customer has already used part of the gift card) |
| Expired notice | Shown only if the gift card is past its expiry date |
| Expiry date | Shown only if the gift card has an expiry date set |
| Gift card code | gift_card.code, formatted in groups for readability |
| Copy code button | Copies the code to the customer's clipboard |
| QR code | A 120 by 120 px QR code containing the gift card identifier. Generated client-side using a JavaScript QR library bundled with the theme |
| Print button | Triggers the browser's print dialog |
| Shop now button | Links to shop.url |
| Add to Apple Wallet | Only when Shopify provides a gift_card.pass_url (varies by region and Shopify configuration) |
What the merchant configures
The gift card page is layout-only: it has no theme editor settings, no schema, and no blocks. Most of the content is sourced automatically from Shopify objects.
You configure the page indirectly through:
| What | Where to set it |
|---|---|
| Shop logo | Shopify admin, Settings, Brand, upload your logo |
| Shop name | Shopify admin, Settings, General, Store name |
| Gift card product image | Shopify admin, Products, open the gift card product, upload an image |
| Gift card denominations | Shopify admin, Products, open the gift card product, set price options |
| Gift card expiry rules | Shopify admin, Settings, Gift cards (where supported by your Shopify plan) |
| Translated copy on the page | Online Store, Themes, Edit default theme content, Gift card |
Why this template stands alone
The gift card page intentionally does not use the standard theme layout (no header, no footer, no navigation). This is by design:
- The page is meant to be saved, printed, or shared by the recipient.
- Without site chrome, the gift card stays focused on its purpose: showing the balance, code, and instructions.
- Search engines are excluded from indexing this page through a
<meta name="robots" content="noindex, nofollow">tag, since each gift card URL is unique to a single recipient and should not appear in search results.
QR code
The QR code is generated by a JavaScript QR library bundled with the theme. The QR code value is gift_card.qr_identifier, which is a Shopify-provided identifier safe to encode (it is not the gift card code itself, but a redeemable token).
The QR code measures 120 by 120 CSS pixels, meeting Shopify's minimum size requirement for gift card QR codes. Customers scan the code at point of sale where supported.
Apple Wallet
When gift_card.pass_url is provided by Shopify, an "Add to Apple Wallet" button appears at the bottom of the page. Customers on iPhone can tap this button to add the gift card to Apple Wallet for easy access at checkout.
This button only appears when Shopify has generated a wallet pass URL for the gift card. Whether and when Shopify generates this URL is controlled by Shopify, not by Fitcore.
Print behavior
The Print button calls the browser's window.print() function. The page is styled with print CSS so the printed output focuses on the gift card details (balance, code, QR) and removes interactive elements (Copy button, Print button itself, Shop now and Apple Wallet buttons).
Multi-language and multi-currency
- All text on the gift card page (heading, balance label, code label, button labels, instructions) is translated through the theme's locale files. English, German, Spanish, French, and Dutch ship by default.
- The balance is rendered with Shopify's money formatting for the gift card value.
- The expiry date is formatted using Shopify's
datefilter with locale-aware formatting.
See markets-localization.md for the full localization workflow.
Customizing the gift card page
The gift card page uses a fixed layout. To change visual styles:
- The page reads color schemes from the theme's CSS variables, so changing your theme's colors (in Theme settings, Colors) affects the gift card page automatically.
- Layout, spacing, and typography are defined in
template-gift_card.css. Changes require code customization. - Adding or removing elements (for example, removing the Apple Wallet button or adding a custom message) requires editing
gift_card.liquiddirectly.
The gift card template does not accept blocks or app blocks. Apps that want to render content on the gift card page need a custom integration.
What to do next
| If you want to | Read |
|---|---|
| Set up the gift card product (where customers buy gift cards) | template-product.md (see Gift card products section) |
| Configure the password page | template-password.md |
| Review reference image dimensions | image-sizes.md |
End of template-gift-card.md.