Gift card

The gift-card landing page (/gift_cards/{code}/preview) displays a recipient's gift card with balance, QR code, and wallet integrations. This guide covers how to configure the page and use its features.

For support troubleshooting, see Gift card support.

How the gift-card page works

The gift-card page renders via sections/main-gift-card.liquid within a standalone layout/gift-card.liquid — a separate layout that includes fonts and meta-tags independently of the main theme layout.

Shopify requires the gift-card template to be a Liquid file, so a minimal templates/gift_card.liquid wires the layout and section together. The landing URL Shopify emails to recipients is /gift_cards/{code}/preview — the base /gift_cards/{code} address (without /preview) returns a 404 by Shopify convention.

Apple Wallet

Apple Wallet passes are auto-populated by Shopify when you enable the Apple Gift Card Passbook integration in your Shopify admin. The Uisce theme renders the Apple Wallet button when Shopify makes the pass URL available.

Enable Apple Wallet:

1. Shopify admin → Settings → Payments → Gift cards → Enable Apple Wallet passes
2. Follow the Apple integration setup (requires an Apple developer account for pass signing)
3. After setup, gift-card landing pages automatically show the "Add to Apple Wallet" button

The button appears automatically when gift_card.pass_url is non-nil (populated by Shopify when Apple integration is active). No theme setting is required.

If the button is missing: The Apple integration is not enabled in your Shopify admin, or the pass URL was not generated for that specific gift card. See Gift card support — FAQ.

Google Wallet

Google Wallet passes are provided via a third-party app (Walletly, PassKit, or similar). The theme renders a Google Wallet button when you configure the google_wallet_url_template setting.

Setup:

1. Install a Google Wallet pass provider app from the Shopify App Store.
2. Obtain a URL template from the app that accepts gift-card code and/or balance parameters.
3. Theme editor → Sections → Gift card → Google Wallet URL template.
4. Enter the URL template. You can use and placeholders:

https://pay.google.com/gp/v/save/{your-jwt}?code={{code}}&amount={{balance}}

The theme replaces with the gift card code and with the balance as a raw amount in currency subunits — for example, 5000 for a $50.00 card.

If the button is missing: The google_wallet_url_template setting is empty — enter the URL template in the theme editor.

Brand watermark

A brand watermark appears on the gift-card landing page and is visible in print output — helping the recipient identify your store on their printed or digital gift card.

Configure:

• Theme editor → Sections → Gift card → tick Show brand watermark, then optionally set Watermark image (image picker)
• If no watermark image is set, the watermark falls back to settings.logo (your global theme logo)

The watermark renders in both screen and print stylesheets.

Recommended watermark image: 200×60 px at 2x (400×120 px), transparent background, PNG or SVG. The watermark scales to a capped width with automatic height, so aspect ratio is preserved regardless of the image dimensions you upload.

Send-to-recipient at purchase

Important behavior note: The gift-card recipient details are set at purchase time on the gift-card product page — NOT on the gift-card landing page itself.

The theme ships Shopify's native recipient form built into the buy box of every gift-card product page — no app or extra setup required. Buyers tick "I want to send this as a gift" above the Add to cart button and fill in:

• Recipient email (required once opted in) — Shopify emails the gift card link to this address
• Recipient name (optional)
• Message (optional, 200-character max with a live character count)
• Send on (optional) — schedule the send date up to 90 days ahead; the send time is based on the buyer's timezone, captured from their browser at purchase

Under the hood the form posts Shopify's reserved recipient properties (properties[__shopify_send_gift_card_to_recipient], properties[Recipient email], properties[Recipient name], properties[Message], properties[Send on], plus a hidden properties[__shopify_offset] carrying the buyer's browser timezone offset) — these are what trigger Shopify's native send-to-recipient email; generic cart line-item properties do not.

The form appears automatically on any product Shopify marks as a gift card (product.gift_card?); it never renders for regular products. Recipient values entered by the buyer survive denomination (variant) changes.

The gift-card landing page (/gift_cards/{code}/preview) does not include a recipient form — this is intentional. By the time the recipient lands on this URL (via email link from Shopify), the purchase is already complete.

Print quality tips

The gift-card landing page includes a premium print stylesheet optimized for A4 and US-Letter paper sizes.

Key print features:

• A4 and US-Letter margins optimized for clean printout
• Force-black-ink: ensures the QR code and code text print clearly even on greyscale printers
• On-page controls hidden on print: the copy, print, and wallet buttons don't appear in the printout (the standalone gift-card layout has no header or footer)
• Watermark stronger in print: when the watermark is enabled, it prints at a higher opacity than it shows on screen
• QR code prints at full canvas resolution

Recommend to recipients: Use Chrome or Edge for the best print output. Firefox may render the QR code at a slightly different scale. The QR code should scan at typical arm's length on A4 output — test one print before distributing.

Gift card states

The gift-card landing page renders a different visual treatment based on the gift-card's state:

State	CSS class	Visual	When
Active	.gift-card-page--state-active	Balance in the scheme's foreground colour	Balance > 0, card not expired or deactivated
Expired	.gift-card-page--state-expired	Grey muted treatment + "Expired" badge	Card has expired or been deactivated
Depleted	.gift-card-page--state-depleted	Grey muted treatment + "This card has been used" badge, $0.00 balance	Balance is 0, card not expired or deactivated

The state class is applied to the .gift-card-page wrapper element and drives all CSS visual changes via descendant selectors. No merchant configuration is required — the state is derived automatically from the card's expiry, enabled status, and balance.

Merchant support: If a customer reports their gift card shows "Expired" or "Depleted" unexpectedly:

• Shopify admin → Gift cards → find the card by code → check its expiry date, whether it has been deactivated, and its balance
• Expiry dates are set at creation time and cannot be extended in the Shopify admin (requires a third-party app)

Theme editor preview

When the gift-card section is opened in the theme editor (where gift_card == nil), the section renders with placeholder values:

• Balance: $50.00
• Code: XXXX-XXXX-XXXX-XXXX
• QR code: a real, scannable QR code encoding the placeholder text preview
• No expiry line renders in the preview

This allows you to preview and configure the gift-card layout without needing a real gift card code. Actual gift-card data overrides these placeholders at runtime.

SEO — gift card pages are not indexed

The gift-card landing page emits <meta name="robots" content="noindex,nofollow"> from layout/gift-card.liquid. Shopify's platform also emits an x-robots-tag: noindex, nofollow HTTP header on gift-card URLs.

Gift-card URLs contain unique redemption codes. Indexing these URLs would expose customer gift-card codes to search engines and potentially allow code enumeration. This is platform-standard behavior.

No merchant configuration is required — the noindex emission is hardcoded.

Locale-aware dates

The gift-card expiry date renders using Shopify's time_tag filter with the visitor's locale. On a French store, an April date becomes "29 avril 2027". On an Arabic store, the date renders in Arabic numerals per the locale's format.

Demo gift-card codes (dev stores only)

The following demo gift-card codes are available for testing on the 5 dev stores:

Preset	Store URL	Demo code	Initial value	State
Uisce	uisce.sionnach.solutions	From tests/e2e/fixtures/gift-cards.json	$50.00	Active
Gaoth	gaoth.sionnach.solutions	From tests/e2e/fixtures/gift-cards.json	$50.00	Active
Talamh	talamh.sionnach.solutions	From tests/e2e/fixtures/gift-cards.json	$50.00	Active
Tine	tine.sionnach.solutions	From tests/e2e/fixtures/gift-cards.json	$50.00	Active
Neart	neart.sionnach.solutions	From tests/e2e/fixtures/gift-cards.json	$50.00	Active

Additional test codes for the Expired and Depleted states are available in tests/e2e/fixtures/gift-cards.json for the Uisce demo store only.

Settings reference

Setting key	Type	Default	Controls
color_scheme	color_scheme	(none)	Color scheme
show_brand_watermark	checkbox	true	Show brand watermark
watermark_image	image_picker	(none — fallback to settings.logo)	Custom watermark image
google_wallet_url_template	text	""	Google Wallet button URL template
padding_top	range	36	Section top padding
padding_bottom	range	36	Section bottom padding

Related guides

• Gift card support
• Theme settings
• Color schemes