Gift card

The page a gift-card recipient opens from their email. Uisce frames it as a keepsake, not a receipt: the balance, card number, and QR code sit together on a watermarked voucher panel carrying your brand mark. The recipient can copy the code with one tap, scan the QR at your till, add the card to Apple or Google Wallet, or print a clean paper voucher — and the page states plainly when a card has expired or been fully used.

Try it

Switch the card state between Active, Expired, and Depleted, toggle the watermark, and try the copy button and the QR — both run the real storefront behaviour. The light/dark buttons in the preview header show the voucher in both modes.

←Gift card

Card state

ActiveExpiredDepleted

Preview how the keepsake reads while the card is active, after it expires, and once the balance is used up. On a live store Shopify sets this from the real card.

Show brand watermark

A faint brand mark behind the card — subtle on screen, stronger on the printed voucher.

The real section also has Color scheme, Watermark image (falls back to your logo), a Google Wallet URL template, and top / bottom padding — see the settings table below the demo.

Storefront preview

Gift card

Balance

€50.00

Use this gift card at checkout

Card number

XXXX-XXXX-XXXX-XXXX

Add to Google Wallet

The copy button and the QR code are the real storefront behaviour — click Copy code and the confirmation appears; the QR is painted by the same generator the live page uses. On paper (print) the watermark strengthens and the buttons disappear, leaving a clean voucher.

How it works

Shopify emails the recipient a link to this page automatically when a gift card is bought — there is nothing to wire up. The keepsake panel shows the card title, the live balance, the card number on a dashed voucher plate with a Copy code button (with a confirmation for screen readers too), and a QR code the recipient can have scanned at a physical till. Outside the panel sit the wallet buttons and Print this gift card.

The page has three honest states, styled distinctly: Active (the default look), Expired (dimmed, with an "Expired" badge and a plain-language notice), and Depleted (an overlay plus a "This card has been used" badge). Shopify sets the state from the real card — you never manage it.

Buying as a gift? The recipient form — their email, a message, a delivery date — lives on the gift-card product page, where Shopify collects it natively at purchase. This landing page is redemption-only: it is the artifact the recipient receives, and it cannot change who receives it. That is a Shopify platform boundary, not a theme setting.

The Apple Wallet button appears automatically whenever Shopify issues a wallet pass for the card. The Google Wallet link appears once you fill in the URL template setting with your pass provider's link.

Section settings

Setting	What it does
Color scheme	Paints the voucher — background, text, balance, code plate — from one scheme, so contrast holds in light and dark.
Show brand watermark	The faint brand mark behind the card details — subtle on screen, stronger on the printed voucher.
Watermark image	An image to use as the watermark. Leave blank to use your shop logo.
Google Wallet URL template	Your Google Wallet pass link, with placeholders for the card's code and balance. Leave blank to hide the button.
Top padding / Bottom padding	Space above and below the voucher.

Responsive & accessibility

• One calm centered voucher at every size — the panel keeps a comfortable reading width on desktop and fills a phone edge-to-edge gracefully.
• The card code always reads left-to-right, even inside Arabic, Hebrew, Persian, or Urdu pages — codes are not words, and reversing them breaks retyping.
• Copy confirmation is announced — the "Copied" feedback is a polite live region, so screen-reader users hear that the code is on the clipboard.
• The QR carries a text alternative describing what scanning it does.
• Print gives a clean voucher — buttons, wallet links, and page chrome disappear; the watermark strengthens; the balance and code print in solid black, laid out for an A4 sheet. Pick another paper size in your browser's print dialog if you print on US Letter.
• State is never color-alone — Expired and Depleted each pair their visual treatment with a text badge.

Tips

• The recipient form lives on the product page, not here. If you want gift-givers to add a message and delivery date, that happens at purchase via Shopify's native recipient form on the gift-card product. This landing page can't change the recipient — it's the redemption artifact itself.
• Leave the watermark on — it is what makes the printed voucher feel like a gift rather than a receipt, and it deters casual code screenshots.
• Test the printed version once: open a test gift card, print to PDF, and check your logo and scheme read well in black and white.
• Only add a Google Wallet template if you use a pass provider — the button hides itself while the setting is blank, and a broken template is worse than no button.