How to Add and Customize a Gift Cards Block on Your Zibster Website
Overview
The Gift Cards Block lets you sell Gift Cards directly from your Zibster website. Visitors can purchase a Gift Card, send it to a recipient, or check the balance of an existing Gift Card from your website.
You can choose whether customers enter a Gift Card amount within a range or select from specific amounts you define. You can also customize the block's colors, fonts, spacing, background, and button animations to match your website's design.
Gift Cards can be redeemed through ECommerce and Scheduler. This guide explains how to add a Gift Cards Block, customize its appearance, and manage it within your Website Builder.
For an overview of setting up and managing Gift Cards, see the Zibster Gift Cards Quick Start Guide.
Before You Begin
Gift Cards must be enabled in your Zibster ECommerce settings before customers can purchase them from your website.
If you haven't enabled Gift Cards yet, follow How to Enable or Disable Gift Cards.
Important Information About Zibster Gift Cards
Before adding a Gift Cards Block to your website, keep the following in mind:
-
Gift Cards can be redeemed at checkout in ECommerce and Scheduler.
-
Gift Cards cannot be redeemed through Forms or Quotes & Invoices.
-
If a Gift Card has a remaining balance after a purchase, the customer can use that balance toward another eligible purchase.
-
If the Gift Card balance does not cover the full order, the customer can pay the difference using an available payment method.
-
Customers can use one Gift Card per order.
-
Sales tax is not charged when a customer purchases a Gift Card.
-
Applicable sales tax is calculated when the Gift Card is redeemed, based on the order subtotal before the Gift Card is applied.
For additional information about supported transactions, redemption requirements, and restrictions, see Gift Card Rules & Limitations.
STEP ONE
Log in to your Zibster account and click WEBSITE in the left-side menu.
This opens the Zibster Website Builder, where you can manage your website pages, content, and design.
STEP TWO
Open the website page where you want customers to purchase Gift Cards.
To add a Gift Cards Block to the bottom of the page, click the GIFT CARDS Block icon on the right side of the Website Builder.
To place the block in a specific location, click and hold the GIFT CARDS Block icon, drag it to the desired position on the page, and release it when the placement indicator appears.
You can move the Gift Cards Block later if you want to change its position.
STEP THREE
The SELECT GIFT CARDS BLOCK panel opens and displays four available designs:
BLANK: Starts with a blank block that uses your website's existing design settings.
GIFT CARD 1: A pre-designed block with a light background and a simple, two-column layout.
GIFT CARD 2: A pre-designed block with a muted green background and a two-column layout.
GIFT CARD 3: A pre-designed block with a dark blue-gray background and a two-column layout.
Each design includes sections for purchasing Gift Cards and checking existing Gift Card balances.
Click SELECT beneath the design you want to add to your page.
You can customize the colors, fonts, spacing, background, and button animations after adding the block.
STEP FOUR
Open the Gift Cards Block settings and click GIFT CARDS to access the EDIT GIFT CARDS panel.
The panel displays a MANAGE GIFT CARDS button and explains that Gift Card settings are managed through ECommerce.
Click MANAGE GIFT CARDS to access your Gift Card settings in the ECommerce Dashboard.
From ECommerce, you can configure how customers select their Gift Card amounts.
Zibster offers two purchasing formats:
RANGE: Lets customers enter an amount within the minimum and maximum values you define.
INCREMENTS: Lets customers select from specific Gift Card amounts, such as $25, $50, or $100.
These purchasing settings are managed in ECommerce rather than through the Gift Cards Block design settings.
For complete instructions, see How to Set Gift Card Values.
FINAL STEP
Return to the Website Builder and review your Gift Cards Block.
Confirm that the purchasing fields, Gift Card amount options, and balance-checking section appear the way you expect.
Any changes you save in the Website Builder automatically take effect on your live website. You do not need to publish your website separately.
Your visitors can now purchase Gift Cards and check existing Gift Card balances directly from your website.
Customizing Your Gift Cards Block
The Gift Cards Block includes design settings that let you customize its appearance without changing the rest of your website.
Open the Gift Cards Block editor to access the available settings, including STYLING, COLORS, BACKGROUND, FONTS, and ANIMATION.
Customizing an individual setting overrides the corresponding global website setting for that Gift Cards Block.
Understanding Customized Block Settings
Your Gift Cards Block uses your website's global design settings unless you customize an individual setting.
When you change a setting specifically for your Gift Cards Block, a CUSTOMIZED label appears beside it. This indicates that the setting overrides the corresponding global website setting.
To return a customized setting to your website's global default, click the X beside CUSTOMIZED.
This applies to supported settings such as spacing, colors, and fonts.
Removing an individual customization does not change your global website settings or affect other blocks.
Styling
Click STYLING to control spacing within and around your Gift Cards Block.
The following settings are available:
-
SPACE BELOW BLOCKS: Controls the amount of space below the Gift Cards Block.
-
SPACE INSIDE BLOCKS: Controls the spacing inside the top and bottom of the block.
Each setting includes five spacing options:
-
NONE
-
ULTRA THIN
-
THIN
-
MEDIUM
-
THICK
Select the spacing options you want to use and click SAVE CHANGES.
These settings let you adjust the spacing around your Gift Cards Block without changing other blocks on your website.
Colors
Click COLORS to customize the colors used throughout your Gift Cards Block.
Depending on the selected design, available color settings include:
-
FORM FIELD COLOR: Controls the background color of Gift Card form fields.
-
FORM FIELD TEXT COLOR: Controls the text color inside form fields.
-
TEXT COLOR: Controls the general text color within the Gift Cards Block.
-
BACKGROUND COLOR: Controls the background color of the block.
-
ICON COLOR: Controls the color of the Gift Card and balance-check icons.
-
BUTTON TEXT COLOR: Controls the text displayed on buttons.
-
BUTTON BORDER COLOR: Controls the border color around buttons.
-
BUTTON CONTRAST COLOR: Controls the contrasting color used by supported button styles and effects.
To change a color, click the color swatch to choose a color or enter a HEX color code in the corresponding field.
Click SAVE CHANGES when you are finished.
Colors customized within the Gift Cards Block override the corresponding global website colors for that block only.
Background
Click BACKGROUND to customize the background image displayed behind your Gift Cards Block.
Under BACKGROUND IMAGE, you can select from three options:
-
NO BACKGROUND: Displays the block without a background image.
-
CUSTOM BACKGROUND: Lets you upload your own background image.
-
BACKGROUND LIBRARY: Lets you choose an image from the Zibster Background Library.
If you select CUSTOM BACKGROUND, click ADD FILES or drag and drop an image into the upload area.
Custom background images must be in JPG or PNG format. The maximum image dimensions are 3000 pixels wide by 1730 pixels high.
Under BACKGROUND SETTINGS, choose how the image appears:
-
TILE: Repeats the image to fill the background.
-
TOP LEFT: Positions the image in the upper-left corner.
-
CENTERED: Centers the image within the available background space.
-
COVER: Scales the image to cover the entire background area.
Click SAVE CHANGES to apply your background settings.
Your background customization applies only to the Gift Cards Block and does not change backgrounds elsewhere on your website.
Fonts
Click FONTS to customize typography within your Gift Cards Block without changing your website's global font settings.
The Gift Cards Block includes three separate font groups:
-
TEXT: Controls the main text displayed within the Gift Cards Block.
-
FORM FIELD TEXT: Controls the text shown inside Gift Card form fields, including the Gift Card amount, recipient email, custom message, and Gift Card number fields.
-
BUTTON TEXT: Controls the text displayed on buttons, such as ADD TO CART and CHECK BALANCE.
Available font settings include the font family, size, letter spacing, and line height.
Changes made to these settings apply only to that Gift Cards Block and override the corresponding global website font settings.
For detailed instructions, see How to Change Fonts on Gift Cards Blocks.
Animations
Click ANIMATION to customize how buttons respond when visitors hover over them in your Gift Cards Block.
Under BUTTON HOVER ANIMATION, five effects are available:
-
NONE: Disables the button hover animation.
-
FILL: Adds a filling effect when visitors hover over a button.
-
OVERLAY: Applies an overlay effect when visitors hover over a button.
-
SCALE: Changes the button's size when visitors hover over it.
-
ARROWS: Adds an arrow-style hover effect to the button.
Select the animation you want to use and click SAVE CHANGES.
Your selected animation applies to buttons within this Gift Cards Block without changing button hover animations elsewhere on your website.
Global vs. Individual Button Animations
Zibster also lets you set a global button hover animation for your website.
The ANIMATION settings within your Gift Cards Block let you override that global animation without affecting buttons elsewhere on your website.
If you want to change the default button hover animation across your website, you can update your global button animation settings in the Website Builder.
Changes to button hover animations primarily affect visitors using a mouse or trackpad. Hover effects may behave differently on touchscreen devices.
Managing Your Gift Cards Block
The Gift Cards Block includes a management menu that allows you to move, rename, customize, or delete the block.
To access these options, click the pencil icon in the upper-right corner of your Gift Cards Block.
The following options are available:
-
MOVE: Moves the Gift Cards Block to another website page or repositions it on the current page. For detailed instructions, see How to Use the Move Function With Blocks.
-
RENAME: Changes the internal name of the Gift Cards Block to make it easier to identify in the Website Builder. Block names can also help identify destinations when creating anchor links. For detailed instructions, see How to Rename Blocks and Add Anchor Links.
-
ADVANCED: Opens the Gift Cards Block editor, where you can access Gift Card settings and customize styling, colors, backgrounds, fonts, and animations.
-
DELETE: Opens the confirmation panel for permanently removing the Gift Cards Block from your website page.
You can also reposition the Gift Cards Block by dragging it to another location on the page.
If you want to display Gift Cards on another page, add a new Gift Cards Block using the normal block selection process.
Deleting Your Gift Cards Block
If you no longer want to display Gift Cards on a particular website page, you can delete the Gift Cards Block without deleting any Gift Cards stored in your Zibster account.
To delete the block, click the pencil icon in the upper-right corner of the Gift Cards Block and select DELETE.
The DELETE BLOCK confirmation panel opens and asks you to confirm the deletion.
You have two options:
-
YES, DELETE IT: Permanently removes the Gift Cards Block from your website page. The deleted block cannot be recovered.
-
CANCEL: Closes the confirmation panel without deleting the block.
Important: Deleting a Gift Cards Block does not delete previously purchased or manually created Gift Cards, change their remaining balances, or prevent customers from redeeming them through supported Zibster checkout tools.
You can continue managing existing Gift Cards through your ECommerce Dashboard.
If you want to sell Gift Cards from your website again, you can add a new Gift Cards Block to any website page.
Using DuoBuild With a Gift Cards Block
The Gift Cards Block does not support DuoBuild.
DuoBuild is a Website Builder feature that places two supported blocks side by side. Because Gift Cards Blocks are not supported, they cannot be paired with another block using DuoBuild.
If you want to customize the appearance of your Gift Cards Block, use its available design settings.
What Your Clients See
When visitors open a page containing your Gift Cards Block, they can purchase a new Gift Card or check the balance of an existing Gift Card.
Purchasing a Gift Card
The Gift Cards Block provides a purchasing section where customers can:
-
Enter or select a Gift Card amount based on your ECommerce settings.
-
Enter the recipient's email address.
-
Include a custom message.
-
Click ADD TO CART to purchase the Gift Card.
The available amount options depend on whether you configured Gift Cards to use a range or fixed increments.
Customers complete their purchase through your website's checkout process.
Checking a Gift Card Balance
The Gift Cards Block also provides a balance-checking section.
Customers can enter an existing Gift Card number and click CHECK BALANCE to view the remaining balance.
This allows customers to check their available credit without contacting you directly.
Redeeming a Gift Card
Customers can redeem Gift Cards during eligible checkouts in ECommerce and Scheduler.
If a Gift Card does not cover the full order total, customers can pay the difference using an available payment method.
If a Gift Card has a remaining balance, it can be used toward another eligible purchase.
Gift Cards cannot be redeemed through Mood Boards, Forms, or Quotes & Invoices.
For complete information about eligible purchases and redemption restrictions, see Gift Card Rules & Limitations.
Helpful Notes
Managing Gift Cards in ECommerce
The Gift Cards Block provides a way for customers to purchase and check Gift Cards on your website, but Gift Card records and purchasing preferences are managed through your ECommerce Dashboard.
You can also create Gift Cards manually for promotions, prepaid services, customer credits, or other business needs.
For instructions on configuring Gift Cards and managing purchases, see the Zibster Gift Cards Quick Start Guide.
Gift Cards and Website Block Limits
The Gift Cards Block does not count toward the combined 30-block limit that applies to certain block types in the Website Builder.
This means adding a Gift Cards Block does not reduce the number of Images, Banner, List, Blog, Products, Services, Scheduler, or Mood Boards Blocks you can use on the page.
Global Design Settings
If you want your Gift Cards Block to match the rest of your website, leave its individual design settings at their defaults so it continues using your global website styling.
Customizing individual colors, fonts, spacing, backgrounds, or animations overrides the corresponding global setting for that Gift Cards Block.
These changes do not affect other blocks on your website.
Need Help?
Zibster Support Hours: Monday–Friday, 9am–6pm EST
Phone: 844.353.3412
Channels: Phone, Live Chat, Support Ticket
