7. Add the Check Balance Widget
Add the Check balance block so customers can see what's left on a gift card: one click from Settings → Gift Cards, or place it yourself on a product or cart page.
Written By Giftnote Admin
Last updated About 20 hours ago
On the free plan? This feature needs the Core or Professional plan. Start a 30-day free trial from Settings > Subscription in the app, or email support@giftnote.com and we'll help you choose. Which plan do I need?
The Check balance block lets customers enter a gift card code and see how much is left on it. You add it in the Shopify theme editor (the screen where you customise your theme's pages), on a product page, the cart page, or both.
Quick way to add it
In the Giftnote app, go to Settings > Gift Cards > Overview & widget. Next to Check balance · Any page, select Open in Shopify. Your theme editor opens. Check where the block sits, then select Save. The Check balance · Any page row in Giftnote shows Not detected until the block is on your theme. Select Guide on that row for help.
To place the block yourself on a product page or the cart page, follow the steps below.
Product page installation
1. In your Shopify admin, go to Online Store > Themes and select Customize.
2. In the page selector at the top of the screen (it starts on Home page), choose Products, then the template your products use. This is usually Default product.
3. In the left sidebar, under Product information, select Add block. Open the Apps tab and choose Check balance.
4. To move the block, drag it up or down in the left sidebar.
5. Select Save at the top right to make it live.
Cart page installation
1. In the page selector at the top of the theme editor, choose Cart.
2. In the left sidebar, under Subtotal, select Add block. Open the Apps tab and choose Check balance.
On some themes the block only shows when there's something in the cart. Add a product to your cart to preview it.
3. To move the block, drag it up or down in the left sidebar.
4. Select Save at the top right.
Customisation options
To change how the block looks, select it in the left sidebar. Its settings open on the right. If you added it to both the product and cart pages, style each one separately.
Text options
- Check balance label: the heading text.
- Font family: the font for the whole block.
- Font colour: the colour of the heading and the result. Use the colour picker or type a hex code.
Block design options
Under the style settings, set the block's colour and corner radius. Use the colour picker or a hex code for the colour. The radius goes from 2 to 50 px.
Button size and placement options
Desktop and mobile have separate settings for alignment and width. Set the width in px, or turn on the maximum width toggle to make the block fill its section. Mobile also has a breakpoint width: on screens narrower than this, the mobile settings apply.
Coding options
To change anything else, add your own CSS in the box at the very bottom of the block's settings, under the configuration section.
Related articles
Still need help? Share an idea