# 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)  
1.x page: https://docs.smootify.io/docs/ecommerce/products/gift-cards  
URL: https://www.smootify.io/docs/build/gift-cards  
Updated: 2026-10-01

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/start/shopify-store)) and synced to the **Products** collection.

## 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/build/product-page). Each amount is a variant, so a picker such as `variant-swatches` lets the buyer choose it.

## 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**, a setting of the field in Webflow, not a custom attribute:

| Name | Webflow element | What it is for |
|---|---|---|
| `Recipient email` | a Text field with the Type set to **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` | a Text field | the recipient's name |
| `Message` | a Text area | a message sent with the card |
| `Send on` | a Custom element with the tag `input` | the day the card is sent |

`Send on` needs a date field, which a Webflow Text field does not offer. Add a Custom element with the tag `input` and two custom attributes: `type` set to `date`, and `name` set to `Send on`. The browser then shows a date picker, and Smootify sets its earliest day to today.

```html
<smootify-add-to-cart>
  <div class="w-form">
    <form>
      <input type="email" name="Recipient email">
      <input name="Recipient name">
      <textarea name="Message"></textarea>
      <input type="date" name="Send on">
      <input type="submit" value="Add to cart" data-wait="Adding…">
    </form>
    <div class="w-form-done"><div>Added</div></div>
    <div class="w-form-fail"><div>Something went wrong</div></div>
  </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/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 the **Products** collection, add a Switch field named **Is Gift card?**. The sync turns it on for gift card products: see [CMS collections and sync](https://www.smootify.io/docs/start/cms).
2. Put the recipient fields in a Div block, and give it Webflow conditional visibility: visible when **Is Gift card?** is on.

On the other products, Smootify removes the hidden fields from the form, so they are never sent.

## Before you publish

> [!STUCK]
> - **The card does not reach the recipient.** The field's Name is not exactly `Recipient email`. Webflow adds a number to field names when you paste a form, such as `Recipient email 2`: 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.** Add conditional visibility on the `cms:Is Gift card?` field, as in step 3.
> - **Send on accepts any text.** It is a Text field. Use a Custom element with the tag `input` and `type` set to `date`.