# Gift cards

> Sell Shopify gift cards on the product page, with the optional fields that send the card to someone else by email, on a chosen day, with a message.

Status: Ready (Smootify 2.0)  
URL: https://www.smootify.io/docs/astro/build/gift-cards  
Updated: 2026-10-21

In Shopify, a gift card is a product: it has a page, one variant per amount, and an add-to-cart form. Smootify sells it like any other product. Four optional fields in the form let the buyer send the card to someone else by email, on a chosen day, with a message. This page adds those fields and shows them only on gift cards.

> [!NOTE]
> Gift cards must be turned on in Shopify (**Products › Gift cards**) before you can create a gift card product. Like any product, it must be published to the sales channel Smootify reads (see [Set up the Shopify store](https://www.smootify.io/docs/astro/start/shopify-store)).

## 1. Sell the gift card

A gift card uses your product template page like any other product. Build the page as in [Build the product page](https://www.smootify.io/docs/astro/build/product-page). Each amount is a variant, so a picker such as `variant-swatches` lets the buyer choose it.

To let visitors check what is left on a card, see [Gift card balance](https://www.smootify.io/docs/astro/features/gift-card-balance).

## 2. Add the recipient fields

Add these fields inside the `<form>` of `smootify-add-to-cart`. Each one is optional. Smootify reads each field by its `name`:

| Name | Element | What it is for |
|---|---|---|
| `Recipient email` | an `input` with `type="email"` | the address that receives the card: when it is filled in, Shopify sends the card there; without it, the card is not sent to a recipient |
| `Recipient name` | an `input` | the recipient’s name |
| `Message` | a `textarea` | a message sent with the card |
| `Send on` | an `input` with `type="date"` | the day the card is sent |

`Send on` is an `<input type="date" name="Send on">`. The browser then shows a date picker, and Smootify sets its earliest day to today.

```html
<smootify-add-to-cart>
  <form>
    <input type="email" name="Recipient email">
    <input name="Recipient name">
    <textarea name="Message"></textarea>
    <input type="date" name="Send on">
    <button type="submit">
      <span data-state="default">Add to cart</span>
      <span data-state="loading">Adding…</span>
    </button>
  </form>
  <div form-done hidden>Added</div>
  <div form-fail hidden>Something went wrong</div>
</smootify-add-to-cart>
```

What happens with the fields:

- **Saved on the cart line.** The four fields are saved on the cart line like any extra field of the form. The buyer sees them in the cart and at checkout, as “Name: value”. To list them in your cart, see [Build the cart](https://www.smootify.io/docs/astro/build/cart).
- **Empty fields** are not sent.

Labels, placeholders, the order of the fields and their layout are up to your design.

## 3. Show the fields only on gift cards

When one template page serves every product, hide the fields on the products that are not gift cards:

1. In your content, the product’s `isGiftCard` field is `true` for gift card products: see [Content from Shopify](https://www.smootify.io/docs/astro/start/content).
2. Render the recipient fields only when `isGiftCard` is `true`, so the other products never get them.

## Before you publish

> [!STUCK]
> - **The card does not reach the recipient.** The field's `name` is not exactly `Recipient email`: check each `name`.
> - **You cannot create a gift card product in Shopify.** Turn on gift cards in **Products › Gift cards** first.
> - **The recipient fields show on every product.** Render the fields only when `isGiftCard` is `true`, as in step 3.
> - **Send on accepts any text.** It is a text `input`. Use `type="date"`.