Gift card

The gift-card landing page (/gift_cards/{code}) 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.

The gift-card landing URL (/gift_cards/{code}) is unchanged from the Shopify default. The migration to JSON+sections architecture is purely architectural — the merchant-visible behavior is unchanged.

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 → Main 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 decimal value.

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 → Main gift card → Brand 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 uses object-fit: contain so aspect ratio is preserved regardless of the image dimensions you upload.

Send-to-recipient at purchase

Important behavior note: The gift-card recipient form (recipient name + email) is set at purchase time on the cart line-item properties — NOT on the gift-card landing page itself.

When a customer purchases a gift card, they fill in:

• properties[Recipient name] — the recipient's name
• properties[Recipient email] — the recipient's email address
• properties[Gift card message] — an optional personal message

These properties appear on the product page when the gift-card product is configured with the recipient properties (via Shopify-native product setup or apps like "Gift Card Recipient" in the App Store).

The gift-card landing page (/gift_cards/{code}) 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
• Chrome hidden on print: header, footer, and navigation are hidden
• Watermark visible in print: overrides any screen-mode hide
• 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	Green accent on balance	Balance > 0 AND not expired
Expired	.gift-card-page--state-expired	Grey muted treatment + "Expired" badge	gift_card.expired is true
Depleted	.gift-card-page--state-depleted	Grey muted treatment + "Balance: $0.00"	Balance == 0, not expired

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 gift_card.expired and gift_card.balance_cents.

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

• Shopify admin → Gift cards → find the card by code → check expiry date and 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
• Expiry date: one year from today
• QR code: a placeholder SVG frame

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 specific states are available in tests/e2e/fixtures/gift-cards.json — one per preset for Expired and Depleted states.

Store password: Each store uses the preset name as the password (for example, the password for uisce.sionnach.solutions is uisce).

Settings reference

Setting key	Type	Default	Controls
color_scheme	select	scheme_1	Color scheme
show_brand_watermark	checkbox	true	Brand watermark image
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
show_advanced	checkbox	false	Show advanced merchant settings
custom_class	text	""	Custom CSS class for merchant targeting

Related guides

• Gift card support
• Theme settings
• Color schemes