Gift card balance

With a gift card balance form, a visitor types the code of a gift card and reads what is left on it, without adding anything to the cart. Smootify asks Shopify for the balance and writes it in the form’s Success message. The visitor’s cart is never touched. A “Check your balance” page, a block in the footer or the cart, next to the gift card field, are the usual places for it.

1. Add the form

Add a Custom element with the tag gift-card-balance, and put a Form Block inside it. The Form must be inside the element: without one, Smootify removes the element.

Inside the Form, add:

• a Text field for the code. Set its Name, a setting of the field in Webflow, not a custom attribute, to Gift Card. Smootify also reads Code, gift-card, gift_card, giftcard, giftcardcode and Gift card code, in any case;
• a Form Button. Its Waiting text setting, such as “Checking…”, shows while Smootify asks Shopify.

The visitor can type the code however they like: with or without capital letters, and with or without spaces or dashes between its groups (ABCD EFGH IJKL MNOP, ABCD-EFGH-IJKL-MNOP).

Labels, the placeholder, the layout and where the form goes are up to your design. Leave the form’s Redirect URL setting empty: with one, the visitor leaves the page before reading the balance.

2. Show the balance

Smootify writes two values. Put them in the Success message, which shows when the code is found:

• gift-card="balance": what is left on the card. When the card is in the currency of the visitor’s market, it uses the site’s price format. When it is in another currency, such as a card in euros read on a Swiss franc market, it shows in the card’s own currency.
• gift-card="code": the end of the code, such as ”•••• 4F2A”, so the page never repeats the whole code.

Each one goes on a Text block, or on a span inside a Text block, as in “Balance: €25.00 on •••• 4F2A”. Both are optional: use only the ones your design needs. The Success message replaces the Form, as in any Webflow form. To check another card, the visitor reloads the page.

A card used up. Shopify does not apply a card with nothing left on it, and answers as it does for an unknown code. So the visitor sees the Error message, not a balance of 0: write the error to cover both (see step 3).

3. The error

When Shopify does not find the code, the Error message shows. Shopify does not say why: the code can be wrong, or the card disabled, expired or used up. So there is one message for all four, and it is worth saying so, such as “Code not found or already used”. A link to buy a gift card fits next to it.

Smootify writes the message in the Text block inside the Error message, in place of the text you type there. It is “Gift card not found” unless you write your own in the custom attribute data-error-not-found on gift-card-balance, such as data-error-not-found="Code not found or already used". Use it to write the message in your site’s language. A form sent without a code shows the same message.

Where to put it

• A “Check your balance” page, linked from the footer or from the gift card’s product page.
• The footer, in a Component every page uses.
• In the cart, next to the gift card field, so the visitor checks a card before applying it. The cart keeps the two forms apart: the balance form never applies the card, and the cart’s own field does that (see Discounts, notes and progress bars).

Before you publish