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. You can control the Gift Card amounts customers can purchase and customize the block's design to match your website.
This guide explains how to add a Gift Cards Block to a page in the Zibster Website Builder, configure your available Gift Card amounts, and customize the appearance of the block.
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 used with Invoices or Forms.
- If a Gift Card has a remaining balance after a purchase, the customer can use the remaining balance toward another eligible purchase.
- If the Gift Card balance does not cover the full order, the customer can pay the remaining amount using the payment methods you have enabled.
- 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 more information about redeeming Gift Cards, see the related Zibster guide How Can My Customers Use Gift Cards?
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 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 location on the page, and release it when the placement indicator appears.
You can move the block later if you want to change its position.
STEP THREE
Choose the design you want to use for your Gift Cards Block.
You can start with a blank block that follows your website's existing design settings or choose one of the available pre-designed block styles.
Click Select under the design you want to add to your page.
STEP FOUR
Open the Gift Cards Block settings and click Manage Gift Cards.
Choose how customers can select the value of their Gift Card:
- Range: Allows customers to enter an amount within the minimum and maximum values you define.
- Increments: Allows customers to choose from specific Gift Card amounts you define, such as $25, $50, or $100.
Configure the Gift Card values you want to offer and save your settings.
FINAL STEP
Review the Gift Cards Block and confirm that the available Gift Card amounts appear as expected.
Click Save Changes after making changes to the block.
Your changes are automatically applied to your website when you save them, so there is no separate publishing step.
Customers can now use the Gift Cards Block on your website to purchase Gift Cards.
Customizing Your Gift Cards Block
The Gift Cards Block includes design settings that allow you to customize its appearance without changing the rest of your website.
When you customize an individual block setting, that setting overrides the corresponding global website setting for that specific Gift Cards Block.
Styling
Use Styling to control the spacing within and around the Gift Cards Block.
Available settings include:
- Space Below Blocks: Controls the amount of space below the block.
- Space Inside Blocks: Controls the spacing inside the top and bottom of the block.
Click Save Changes after making your adjustments.
Colors
Use Colors to customize individual colors within the Gift Cards Block.
Depending on the block design you selected, available settings may include:
- Form Field Color
- Form Field Text Color
- Text Color
- Button Text Color
- Button Background Color
- Background Color
- Icon Color
Click a color setting to choose a color or enter a HEX code.
Colors customized within the Gift Cards Block override the corresponding global website colors for that block only.
Click Save Changes when you are finished.
Background
Use Background to add an image behind the Gift Cards Block.
You can upload your own background image or choose an image from the Background Library.
Available background display options include:
- Tile: Repeats the background image.
- Top Left: Positions the image in the upper-left area of the block.
- Centered: Centers the image within the background.
- Cover: Scales the image to fill the available background area.
Click Save Changes to apply your background settings.
Fonts
Use Fonts to customize the typography within the Gift Cards Block without changing your website's global font settings.
Depending on the block design, you may be able to customize:
- Text Font
- Form Field Text
- Button Text
Font settings may include the font family, size, spacing, and line height.
Click Save Changes after making your adjustments.
Animations
Use Animations to change the hover effect used by buttons within the Gift Cards Block.
Available animation options include:
- None
- Fill
- Overlay
- Scale
- Arrows
Choose the animation you want to use and click Save Changes.
Helpful Notes
If you want the Gift Cards Block to match the rest of your Zibster website, leave its individual design settings at their defaults. The block will use your website's global design settings.
If you customize colors, fonts, spacing, backgrounds, or other settings within the Gift Cards Block, those changes apply only to that block and do not change the corresponding global settings elsewhere on your website.
If you make a design change and do not see the result you expected, confirm that you clicked Save or Save Changes for the setting you edited.
Because Gift Card balances can be used across multiple eligible purchases, customers do not have to spend the entire Gift Card amount in a single transaction.
Need Help?
Zibster Support Hours: Monday–Friday, 9am–6pm EST
Phone: 844.353.3412
Channels: Phone, Live Chat, Support Ticket
