Gift cards

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.

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.

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:

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.

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:

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