Gift Cards are a great selling tool that encourages your clients to return to your Proofing and ECommerce for future purchases. This guide will walk you through the steps of using the gift card block on your Zibster website.
Please Note: Gift cards are used to purchase items on your website or proofing. Sales Tax is not charged when a client purchases a gift card on your website. Sales tax is applied to the sub-total on your client order and then the gift card amount is deducted from the remaining balance.
STEP ONE
Log into your Zibster account and click on the WEBSITE option in the left side menu.
STEP TWO
Click on the page name or add a new page you want to use a Gift Card block on.
There are two ways to have an active Gift Card block on your page:
On the right-hand side of your screen, you can click the Gift Card icon and the Gift Card block will appear at the very bottom of your page.
The second option is to hover your mouse over the Gift Card icon, left click and hold, then drag the block to your preferred location. When a teal-colored line appears where you want the block, let go of the mouse button and the block will drop in that location. To move it, simply drag it up or down.
STEP THREE
To add options to your Gift Card block, simply click inside the block or on the pencil icon at the top right and choose Advanced. The menu will open on the right side of your control panel.
STEP FOUR
From here, you can click the manage gift cards button to be directed to the gift card settings. You can sell gift card amounts in the following formats:
Range: Any price between the minimum and maximum amount can be selected.
Increments: Only amounts you select will be able to be purchased.
STYLING OPTIONS FOR YOUR GIFT CARDS BLOCK STYLING
The Gift Card styling section gives you more control over how your Gift Cards are displayed within the layout you've selected. By default, this section will use the styling and spacing settings in the global styling section of your website. You can override the global settings for your Gift Card block within this area. The settings in this section can include any of the following items:
- Space Below Blocks: Controls the amount of space before the next block begins.
- Space Inside Blocks: Controls the amount of space at the top and bottom of a block.
COLORS
The button color section includes seven color options. These colors will override the colors for the button that have been picked in the global color picker section under the DESIGN tab. Click on the color square or enter the HEX color code to customize the color for the following sections:
- Form Field Color
- Form Field Text Color
- Text Color
- Button Text Color
- Button Background Color
- Background Color
- Icon Color
The customized flag will appear next to any color you've selected to override the global color picker for your website.
Click on save changes at the bottom to apply your color updates.
BACKGROUND
You can add a background image to display behind your Gift Card block by adding a background image. You can choose between:
- No Background
- Custom Background
- Background Library
If you use a background, you can customize how the background image is displayed under the Background Settings. Background Settings let you select from the following 4 different options:
- Tile: Will tile your image to fill the background
- Top Left: Will align your image to the top left
- Centered: Will align your image at the center of the available space
- Cover: Will scale your image to be as large as possible to completely cover the background
Click on Save Changes to apply your changes to the background settings.
FONTS
You can easily customize the fonts you're using on your gift card blocks to override your global font settings. You can change the font, font size, letter spacing (kerning), and line height for any of the following items in your gift card block:
- TEXT FORM FIELD
- TEXT BUTTON
- TEXT
Click on Save Changes at the bottom of the control panel menu to apply your changes.
ANIMATIONS
You can choose between the 5 following options for Button Hover Animations:
- NONE
- FILL
- OVERLAY
- SCALE
- ARROWS
Click on SAVE CHANGES to apply your selection for your Button Hover Animation.
