--- title: Add a gift card recipient form description: Learn how to add a recipient form to your gift card product page. source_url: html: https://shopify.dev/docs/storefronts/themes/product-merchandising/gift-cards md: https://shopify.dev/docs/storefronts/themes/product-merchandising/gift-cards.md --- ExpandOn this page * [Resources](https://shopify.dev/docs/storefronts/themes/product-merchandising/gift-cards#resources) * [Implementing the recipient form](https://shopify.dev/docs/storefronts/themes/product-merchandising/gift-cards#implementing-the-recipient-form) * [Create a form to collect recipient information](https://shopify.dev/docs/storefronts/themes/product-merchandising/gift-cards#create-a-form-to-collect-recipient-information) * [Add the recipient form to your product form](https://shopify.dev/docs/storefronts/themes/product-merchandising/gift-cards#add-the-recipient-form-to-your-product-form) * [Displaying the recipient properties in the cart](https://shopify.dev/docs/storefronts/themes/product-merchandising/gift-cards#displaying-the-recipient-properties-in-the-cart) * [Limitations](https://shopify.dev/docs/storefronts/themes/product-merchandising/gift-cards#limitations) # Add a gift card recipient form In this tutorial, you'll learn how to add a recipient form to your gift card product page. *** ## Resources To implement the recipient feature, you'll use the following objects: * The [`product`](https://shopify.dev/docs/api/liquid/objects#product) object * The [`form`](https://shopify.dev/docs/api/liquid/objects#form) object * The [`section`](https://shopify.dev/docs/api/liquid/objects#section) object *** ## Implementing the recipient form To support the gift card recipient functionality, you need to complete the following tasks: * Add a form to collect recipient information * Add the recipient form to your product form * Display the recipient properties in the cart The full implementation varies depending on your theme and what you want the display to look like. You can refer to the following files in Dawn for an example of a complete solution: * [Gift card recipient form](https://github.com/Shopify/dawn/blob/1f794f509903e3e333a808b0b108b4e35ef683d1/snippets/gift-card-recipient-form.liquid) * [Buy buttons](https://github.com/Shopify/dawn/blob/1f794f509903e3e333a808b0b108b4e35ef683d1/snippets/buy-buttons.liquid#L59), which is rendered in the product form * [JS](https://github.com/Shopify/dawn/blob/1f794f509903e3e333a808b0b108b4e35ef683d1/assets/recipient-form.js) * [CSS](https://github.com/Shopify/dawn/blob/1f794f509903e3e333a808b0b108b4e35ef683d1/assets/section-main-product.css#L1471) *** ## Create a form to collect recipient information The recipient information is added to your gift card using [line item properties](https://shopify.dev/docs/storefronts/themes/architecture/templates/product#line-item-properties). Inside your recipient form, you can use the following line item property names: * `Recipient email`: The email address that the gift card will be sent to. * `Recipient name`: Optional. The name that the gift card will be addressed to. * `Message`: Optional. A message that can be included in the gift card email. * `Send on`: Optional. The date that's used to schedule sending a gift card. The date uses [ISO 8601 format](https://en.wikipedia.org/wiki/ISO_8601), with an expected format of `yyyy-mm-dd`. If you don't specify a date, then the gift card is sent immediately. * `__shopify_send_gift_card_to_recipient`: A property that needs to be included with the value `true` to validate and process recipient information. You can refer to the [gift card recipient form](https://github.com/Shopify/dawn/blob/1f794f509903e3e333a808b0b108b4e35ef683d1/snippets/gift-card-recipient-form.liquid) in Dawn for a complete example of the properties in context. Tip Your form should surface errors returned by the form submission to allow the customer to fix any issues with their form input. *** ## Add the recipient form to your product form You need to include the recipient form that you created in your [`product`](https://shopify.dev/docs/api/liquid/tags/form#form-product) form, so that it renders on the gift card product page. The example implementation in Dawn requires you to pass in a [product object](https://shopify.dev/docs/api/liquid/objects#product), [`form`](https://shopify.dev/docs/api/liquid/objects#form) object, and [`section`](https://shopify.dev/docs/api/liquid/objects#section) object. ```liquid {% form 'product' %} {%- if product.gift_card? -%} {%- render 'gift-card-recipient-form', product: product, form: form, section: section -%} {%- endif -%} {% endform %} ``` Note The recipient form validation doesn't support [accelerated checkout buttons](https://help.shopify.com/manual/online-store/accelerated-checkout). The form should be used only with the **Add to Cart** button. *** ## Displaying the recipient properties in the cart To learn about displaying any line item properties that are collected in the cart, refer to the cart template for [line item properties](https://shopify.dev/docs/storefronts/themes/architecture/templates/cart#display-line-item-properties). *** ## Limitations * The gift card recipient name can't be longer than 255 characters. * The gift card message can't be longer than 200 characters. * You can only schedule a gift card to be sent up to 90 days in the future. *** * [Resources](https://shopify.dev/docs/storefronts/themes/product-merchandising/gift-cards#resources) * [Implementing the recipient form](https://shopify.dev/docs/storefronts/themes/product-merchandising/gift-cards#implementing-the-recipient-form) * [Create a form to collect recipient information](https://shopify.dev/docs/storefronts/themes/product-merchandising/gift-cards#create-a-form-to-collect-recipient-information) * [Add the recipient form to your product form](https://shopify.dev/docs/storefronts/themes/product-merchandising/gift-cards#add-the-recipient-form-to-your-product-form) * [Displaying the recipient properties in the cart](https://shopify.dev/docs/storefronts/themes/product-merchandising/gift-cards#displaying-the-recipient-properties-in-the-cart) * [Limitations](https://shopify.dev/docs/storefronts/themes/product-merchandising/gift-cards#limitations)