A gift card is a special type of product. Its value can be used as payment toward future orders from your online store.
You can use gift cards in any of the following ways:
- Sell them in an online store like any other product.
- Share links to gift card products on social media.
- Issue a gift card to a customer for free as a reward or incentive.
When you fulfill an order with a gift card, the customer receives an email that contains a unique gift card code that they can use at checkout to redeem its value.
There is a special page in Shopify where your customer can view the status of it’s gift card. This page is accessible only by an email link, and can be created in Webflow just by creating a page in Webflow with slug gift-card.
In this page you can add all the following elements:
Initial Balance
It’s the original balance of the Gift Card, can be added on any text element using the attribute:
ICU3QiUyMjB0eXBl4YCnJSQzQeKApjQwdyBlYmZsb3cgJTJGWHNjQHBEYXRh4oC+JDJD4YGLcGF5UGxvYWTlgY7jgZ5Abm9kZXPlgZ9ENULkgLRfaeaBgyAyMjYxYzQgZGMwZC1mIDcyMy00ZCA0Yi1kOGYgOC1hM2RlIGI0YjMxMiRiZueCgHRhZzHngqpkaXbngphjMGxhc3Pqgoc1IkTlgLloaWxkWHJlbuiCoe+Cku+CklAxMmMw4oSQ5oGkIeuEoEJsb2NrLeeEkGTlhJ3mhI10ZSR4dOSFi3RydSfhhZXvg5Tpg5R4YXQkdHLthLluYW0h6IaLZ2lmdC04Y2Fy44Wv44W/dixhbOKBtuWGq2luIGl0aWFsLSBiYWxhbmNZ44eDN0TihJrhgKbhgKlf4Yax74aN74aN74aN5ISb5IaNJ++DreGCoueIqTMwMCAlRTIlODI8JUHiiJrlgpvjiKZzWHR5bO+GreGJqeKHhEZ074eF4YOpeDHvh5on4YC14Ym06ImnaW50IGVyYWN0aSRvbu+IhzIyZVh2ZW7vgbrigpLjgZE4TGlz7YKX54WCMigybWXsh6N1biBsaW5rZWQgU3ltYm9sUENvdW7lh7LhiLQh44iTcm9wcGU8ZEzhgYXli7fmgLl5IG5CaW5kUiBlbW92ZWQ/74GZ4oGA4oKp74GE6oG9cEBhZ2luYeKEhSfvgafhgqDjh7g=
Balance
It’s the current balance of the Gift Card, can be added on any text element using the attribute:
ICU3QiUyMjB0eXBl4YCnJSQzQeKApjQwdyBlYmZsb3cgJTJGWHNjQHBEYXRh4oC+JDJD4YGLcGF5UGxvYWTlgY7jgZ5Abm9kZXPlgZ9ENULkgLRfaeaBgyAyMjQzMDMgNGZiNy1kIGY0YS0zNSA3MC03ZjEgYy00NGY5IDE0OTZmZiQyNOeCgHRhZzHngqpkaXbngphjMGxhc3Pqgoc1IkTlgLloaWxkWHJlbuiCoe+Cku+Ckj3hgpI14oSQ5oGk64SgQjBsb2Nr54SQZCPlhJ3mhI10ZXh0UeSFi3RydeGFle+DlCHpg5R4YXR0cjHthLluYW3ohotnIGlmdC1jYSZy44Wv44W/dmFsI+KBtuWGq2JhbGFEbmPjhrs3ROKEkl/hgKbhgKnhhqnvhoXvhoXvhoU/5IST5IaF74Ol4YKa54ihMyAwMCVFMiVQODIlQeKIkuWCm0HjiJ5zdHls74alK+GJoeKGvHTvhr0yMlhpeDHvh5LhgLXhiawh6ImfaW50ZXIgYWN0aW9uIe+HvzIyZXZlLm7vgbrigpLjgZFMaSZz7YKX54WCMjJtImXsh5t1bmxpIG5rZWRTeSBtYm9sQ280dW7lh6ow5YiLciBvcHBlZEwn4YGF5Yuv5oC5eW5CIGluZFJlbVBvdmVk74GZ4oGAJ+KCqe+BhOqBvXBhZ1hpbmHihIXvgafhgqAh44e4
Expiration Date
It’s the expiration date of the gift card, can be added on any link using the attribute:
ICU3QiUyMjB0eXBl4YCnJSQzQeKApjQwdyBlYmZsb3cgJTJGWHNjQHBEYXRh4oC+JDJD4YGLcGF5UGxvYWTlgY7jgZ5Abm9kZXPlgZ9ENULkgLRfaeaBgyAyMjNlODkgYWI3ZC05IDM5ZC1jYSAwMi0wOGEgZS00MjYxIDZmMTFmNSRkZueCgHRhZzHngqpkaXbngphjMGxhc3Pqgoc1IkTlgLloaWxkWHJlbuiCoe+Cku+CklBmNWUw4oSQ5oGkIeuEoEJsb2NrLeeEkGTlhJ3mhI10ZSR4dOSFi3RydSfhhZXvg5Tpg5R4YXQkdHLthLluYW1B6IaLZ2lmdOGEsSZy44Wv44W/dmFsI+KBtuWGq2V4cGkgcmF0aW9uRi3hgqjjh4M3ROKEml/hgKbhgKnhhrHvho3vho3vho0/5ISb5IaN74Ot4YKi54ipMiHhhYQwRGVjZUhtYmXhg6cw4YCiJ+GIpeaCo+OIrnN0eU5s74a14Ymx4oeMdO+HjUAyMml4Me+HoifhgLXjgbfmia9pbnRQZXJhY+KElu+Ij1HhhLN2ZW7vgbrigpJR44GRTGlz7YKX54WKMDIybWXsh6t1IG5saW5rZSBkU3ltYm9AbENvdW7lh7oj4Yi844ibcm9wcFhlZEzhgYXli7/mgLkgeW5CaW5kIFJlbW92ZV5k74GZ4oGA4oKp74GE6oG9QHBhZ2lu44e7J++Bp+GCoOOIgA==
Code
It’s the code of the Gift Card, can be added on a Text element using the attribute:
ICU3QiUyMjB0eXBl4YCnJSQzQeKApjQwdyBlYmZsb3cgJTJGWHNjQHBEYXRh4oC+JDJD4YGLcGF5UGxvYWTlgY7jgZ5Abm9kZXPlgZ9ENULkgLRfaeaBgyAyMmM0MTMgYjI1YS1iIDk0NC03NiA1Mi1mNWEgOS1lYTQ5IDE4ODQwYSRjNueCgHRhZzHngqpkaXbngphjMGxhc3Pqgoc1IkTlgLloaWxkWHJlbuiCoe+Cku+Ckj3hgpI34oSQ5oGk64SgQjBsb2Nr54SQZCPlhJ3mhI10ZXh0UeSFi3RydeGFle+DlCHpg5R4YXR0cjHthLluYW3ohotnIGlmdC1jYSZy44Wv44W/dmFsL+KBtuaFmuGFuuKGuDdEX+KEj+GApuGAqeGGpu+Ggu+Ggl/vhoLkhJDkhoLvg6LhgpfniJ4gQ09ERTEyLDM06IKX44iXc3Q8eWzvhp7hiZrihrV0Ie+GtjIyaXgxL++Hi+GAteGJpeiJmGluIHRlcmFjdChpb27vh7gyMlBldmVu74G64oKSUeOBkUxpc+2Cl+eEvjAyMm1l7IeUdSBubGlua2UgZFN5bWJvQGxDb3Vu5YejIjDliIRyb3BwWGVkTOGBheWLqOaAuSB5bkJpbmQgUmVtb3ZlXmTvgZnigYDigqnvgYTqgb0gcGFnaW5hL+KEhe+Bp+GCoOOHtA==
QR Code
This is the qr code of the gift card, you can add it on a div using the custom attribute
ICU3QiUyMjB0eXBl4YCnJSQzQeKApjQwdyBlYmZsb3cgJTJGWHNjQHBEYXRh4oC+JDJD4YGLcGF5UGxvYWTlgY7jgZ5Abm9kZXPlgZ9ENULkgLRfaeaBgyAyMjMyZTQgMzNjMS1kIDk1Ny1jNiAwZC02OWMgNi0zZDA2IGU2MWUxNCRiNueCgHRhZzHngqpkaXbngphjMGxhc3Pqgoc1IkTlgLloaWxkOHJlbu+AuuyDtkIwbG9ja+eDpmQv5YOz5oOj74KW5YSOeGEodHRy7YO7bmEibeiFjWdpZnRQLWNhcuOEseOFgTB2YWx16IWtcThyLWPhhL/ihb03PkTig5ThgKbkgKnjha5zWHR5bO+DteGGseKEjCJ074SNMjJpeD4x74Si4YC14Ya86IavaSBudGVyYWMwdGlvbu+FjzJAMmV2ZW7vgbpD4oKS44GRTGlz7YKXM+SDkOOIm21l7IWVdSBubGlua2UgZFN5bWJvIGxDb3VudCXkiaUw5YaFcm9wUHBlZEzhgYXliL8h5oC5eW5CaW4gZFJlbW92XGVk74GZ4oGA4oKp74GEIeqBvXBhZ2luPmHihIXvgafhgqDjhoY=
Apple Wallet
This is a link to add the gift card to the apple wallet, this element is kinda strange in configuration, so just clone it from below.
ICU3QiUyMjB0eXBl4YCnJSQzQeKApjQwdyBlYmZsb3cgJTJGWHNjQHBEYXRh4oC+JDJD4YGLcGF5UGxvYWTlgY7jgZ5Abm9kZXPlgZ9ENULkgLRfaeaBgyAyMjQwZGUgNGRjZC1iIDk4Ny04ZiA5ZC1hOGQgOS1iNjJkIGRiYzU2ZSZi44Ke44KAdGFnI+eCquiClmNsYXMyc+qChTVE5YC5aCBpbGRyZW4h6IKfMjJiMDMgN2QzNGUtIDgyNmUtNCBkMGItYzAgOTktZmNhIDZlOTVlNVhiYzPihI7mgaTrhJ4wTGlua+eEjWQj5YSa5oSKYmxvYyPjgL7jhYlpbmxpPm7og5rhgK3mgLzjhbVtI+GEt+eFtWV4dGUwcm5hbOeFqHU2cuOArOSGkjLjgrA3IeWDtHhhdHRyMe2FsG5hbeiHgmcgaWZ0LWNhJnLjhqbjhrZ2YWwideiHomFwcGwgZS13YWxsXGV05YG54YWQ4YG/5IKCP++Hge+Fke+FkeSFke+HgWlebeOHje+Hg++Hg+yHg++GmUHiipdJbWFn6IinJ+6GmumEs+OLknNyYyHni5FodHRwcyXji5xG4YuSZDNlIDU0djEwMyBqOHFiYi4gY2xvdWRmIHJvbnQubiHihK5GcGx1ZyRpbuGLkEZCYTRzaeGBpkbiibt0IeKAsXBsYWNlIGhvbGRlciAuNjBmOWIgMTg0MGMuLHN26ISG4oycaW5B6IuDbGF6eeeMvEB3aWR0aOSNqCgxMjDkjZBoZShpZ2jjhqYzQVw0MOeIhOWFmuaNo+mNjl/vg4Dvg4Djg4DlgrXkh7XkiIFB44+Ac3R5bO+NiSfijazlhIXujaFpeDFP74224YC14ZCO6YK+buGLnUBhY3Rpb+KFmEHujqNldmVu74G6Q+KPnuOBkUxpc+2Cl0vniqjhjYNl7I6AdeKNsiBrZWRTeW0gYm9sQ291Jm7lhZrlha1kcm9QcHBlZOKPhOWSkSHmgLl5bkJpbiBkUmVtb3ZcZWTvgZnigYDigqnvgYRJ6oG9cGHhiLhh4oSFJ++Bp+GCoOONng==
Image
This is the gift card image, that is an image provided by Shopify itself, it can be added on any image using the attribute:
Since it’s just a simple image you can always use a better one of your choice on your own without any attribute!
ICU3QiUyMjB0eXBl4YCnJSQzQeKApjQwdyBlYmZsb3cgJTJGWHNjQHBEYXRh4oC+JDJD4YGLcGF5UGxvYWTlgY7jgZ5Abm9kZXPlgZ9ENULkgLRfaeaBgyAyMjA4YWEgNDlmMi0xIGNlMy01NyBhNC1mMzIgMS03YzI1IGNiMzY5NiYy44Ke44KAdGFnOeeCqmlt44Cs44KYYzBsYXNz6oKHNSJE5YC5aGlsZDhyZW7vgLrsg7ZJSG1hZ+iChmTlg7NB5oOjYXR0cuqDsyhzcmPnhLBodEh0cHPjhLtG4YSxIGQzZTU0diAxMDNqOHEgYmIuY2xvIHVkZnJvbkB0Lm5ldOGFkSBwbHVnaW4h4YSvRkJhc2k14YGmRuKDmHTigLFwIGxhY2VobyBsZGVyLjYgMGY5YjE4IDQwYy5zdjPohIbihbtpbuiEomwoYXp554abd2koZHRo54eHYXUkdG/nhrZoZWlMZ2jhgp/tgLw35YWEX+WFqeaHkemGvO+Dj++Dj+ODjzvlg4TmgbB46YWQ5oiSbiRhbeiJpGdpZkB0LWNhcuOJiEHjiZh2YWx16IqEXmnmhq7hg4Lhh6nhg4jkgKlB44qDc3R5bO+Iiifih4XlhanuiKJpeDEv74i34YC14YuR6YSTbnQgZXJhY3RpJm/ihrzuiaRldmUubu+BuuKIt+OBkUxpLnPtgpfkg5DjjLBtZSHsiap1bmxpbiBrZWRTeW0gYm9sQ291Km7lhrcw5Yqacm9AcHBlZEzhgYUj5Y2U5oC5eW5CaSBuZFJlbW9YdmVk74GZ4oGA4oKpM++BhOqBvXBh4YqcYS/ihIXvgafhgqDjhoY=
