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.

v2.0 beta

Open .md

On this page

1. Sell the gift card
2. Add the recipient fields
3. Show the fields only on gift cards
Before you publish

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).

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. 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.

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.

<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.
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:

In your content, the product’s isGiftCard field is true for gift card products: see Content from Shopify.
Render the recipient fields only when isGiftCard is true, so the other products never get them.

Before you publish

Check these first

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".