Gift card recipient flow

Mercer’s gift card PDPs include an opt-in recipient flow: the buyer can have the gift card emailed directly to a recipient on a chosen date with a personal message. This guide explains how the flow works from both the merchant and customer side, and how to configure it.

At a glance

When a customer is on a gift card PDP, the buy box shows a checkbox:

Send as a gift

When the customer checks the box, four fields appear:

• Recipient email
• Recipient name
• Message (up to 200 characters)
• Send on date (today through 90 days out)

Shopify handles delivery after the gift card order is fulfilled. For scheduled gifts, Shopify currently describes an approximate 4–10 a.m. delivery window in the buyer’s timezone. See Shopify’s recipient and notification guidance .

If the box is left unchecked (default), the gift card email goes to the buyer when the gift card order is fulfilled.

How it works under the hood

Mercer uses Shopify’s canonical line-item-property convention for gift card recipients:

Shopify reads these properties to process the recipient and delivery date. Mercer populates __shopify_offset from new Date().getTimezoneOffset() in the buyer’s browser so Shopify can interpret the scheduled date in that timezone.

Merchant setup

There’s nothing to enable. The recipient form is automatically present on every PDP for products where product.gift_card? == true.

To add a gift card product:

1. In Shopify admin, open Products → Gift cards.
2. Click Add a gift card product.
3. Enter the product details, adjust denominations such as $25, $50, and $100, and make the product available to the Online Store.
4. Click Save gift card product.

Follow Shopify’s gift card product instructions  for currency, catalog, and publishing options. The ordinary Product type field is an organizational label; entering “Gift card” there does not create a gift card product.

Mercer’s PDP checks product.gift_card? and renders the recipient form inside the available variant’s buy box. Gift cards route to the PDP for purchase; the collection’s quick-add picker and Quick View purchase flow do not appear for them.

Optional: Apple Wallet pass

If your gift card is configured to issue an Apple Wallet pass (Shopify exposes gift_card.pass_url on the gift_card template), Mercer’s gift card receipt template renders a Add to Apple Wallet button. No merchant action required; the button only appears when pass_url is non-blank.

Customer-facing flow

From the customer’s perspective:

1. Land on the gift card PDP.
2. Pick a denomination from the variant picker.
3. Optionally check Send as a gift.
4. Fill in recipient email, name, message, and send-on date.
5. Add to cart.

In the cart drawer, the line lists each stored line-item property verbatim as key: value pairs (the property keys are rendered as-is, not relabeled or quoted):

Gift card · $50
Recipient email: alex@example.com
Recipient name: Alex Rivera
Message: Happy graduation!
Send on: 2026-12-15

Underscore-prefixed properties (__shopify_send_gift_card_to_recipient, __shopify_offset) and any blank-valued properties are hidden from this display.

The customer can edit or remove the line just like any other.

In the checkout, Shopify renders the same recipient line-item properties on the order summary. The buyer pays as usual.

After fulfillment, Shopify sends the gift card according to the recipient and send-on information. The recipient receives the New gift card notification; the purchaser receives a Gift card receipt confirming delivery. These are Shopify notification templates, separate from the order confirmation. Review customized templates to make sure they include the recipient fields and gift card details.

Validation behavior

With JavaScript enabled, Mercer uses native browser constraint validation before adding to cart. When the toggle is on, the recipient email field is marked required (gift-card-recipient.js toggles required in lockstep with the toggle), so the browser blocks add-to-cart and points at the empty field before anything is sent. Name, message, and send-on stay optional.

With JavaScript, add-to-cart uses AJAX without a full-page reload. The initial recipient markup is empty and unchecked; value preservation across a variant change is handled in JavaScript. The form does not render a server-side recipient error banner. A failed cart request is handled by the theme’s cart error messaging.

Without JavaScript, the native product form submits normally. The recipient fields stay visible, the disclosure checkbox stays disabled, and a hidden if_present property lets Shopify process entered recipient details. The date bounds use the shop’s date as a fallback; the browser-local date and timezone offset are supplied only when JavaScript runs.

The stored recipient values are HTML-escaped when they’re displayed — not on the form, but on the cart line, where each property value is output through {{ ... | escape }} (see cart-drawer-line.liquid and cart-line.liquid).

Common gift card pitfalls

”The recipient form doesn’t appear on my gift card PDP”

Three things to check:

1. Was the product created with Products → Gift cards → Add a gift card product? Mercer reads product.gift_card?; changing a normal product’s Product type label does not enable this flow.
2. Is the variant available (in stock, available to the active market)? An unavailable variant hides the buy box, including the recipient form.
3. Is templates/product.json the active template? If you’ve customized to use a different template for gift cards, you may have removed the recipient form.

”Quick add says ‘Choose options’ on my gift card”

That’s intentional. Quick-add is gated on gift cards because the recipient form requires a full PDP, so the quick-add control renders as a Choose options link (the products.product.quick_add_options locale string) to the PDP instead of an instant add button. Buyers click through to the PDP to fill in the recipient info.

”The send-on date prevents adding to cart”

Mercer’s date input accepts today through 90 days ahead. A date outside that range fails browser validation and blocks submission; Mercer does not automatically change it to today. Choose a date within the range or leave this optional field empty.

”The recipient gets the email at the wrong time”

Mercer auto-populates __shopify_offset from the buyer’s browser timezone. Shopify interprets a scheduled gift using the buyer’s timezone and controls the delivery window.

If the recipient is in a different timezone, they may receive it at an unexpected local time on their end. This is by design — the buyer picks “send on this date in my timezone”.

”The buyer’s gift card email arrives empty”

Review Settings → Notifications → Customer notifications → Gift cards in Shopify admin. Check both New gift card and Gift card receipt, including any customized translations. Mercer supplies the line-item properties; Shopify’s notification templates produce the emails. See Shopify’s notification checks .

What’s next

• Read FAQ for more gotchas.
• Read Section reference → Product and collection sections for general PDP composition.
• For changes to the gift card flow itself, contact support.