Custom Gift Card Template

Creating Custom Gift Card Templates

VBO provides several default gift card templates, but you can also create your own custom designs using HTML. This allows you to control the layout, branding, and placement of gift card details.

Access Gift Card Templates

  1. Go to Set Up → Merchandise → Gift Card Templates.

  2. You’ll see a list of existing default templates provided by VBO.

Add a New Gift Card Template

  1. Click Add GC Template

  2. Enter a Template Name.

Upload Images

You will need two images:

  • Preview Image

    This is the thumbnail shown in the template list

  • Template Background Image

    This is the main image that your gift card text will display on top of.

700px × 439px

Using this size helps ensure proper alignment and display.

Add Your HTML Code

  1. In the HTML editor box, paste your template code.

  2. You can start with the provided code below

HTML

<table height="430" width="700" border="0" cellpadding="0" cellspacing="0" {BGDIMAGE}>
	<tr>
		<td style="padding: 20px 0 0 40px; font-family: Arial; font-size: 36px; color: #ffffff;">{AMOUNT} GIFT CARD</td>
	</tr>
	<tr>
		<td height="280"></td>
	</tr>
	<tr>
		<td height="60">
			<table border="0" cellpadding="0" cellspacing="0" width="100%">
				<tr>
					<td>
						<table border="0" cellpadding="0" cellspacing="0" width="100%">
							<tr>
								<td width="100" align="right" style="padding: 0 10px 0 0; font-family: Arial; color: #ffffff; font-size: 16px;">From:</td>
								<td style="font-family: Arial; color: #ffffff;">{BILLNAME}</td>
							</tr>
							<tr>
								<td width="100" align="right" style="padding: 0 10px 0 0; font-family: Arial; font-size: 16px; color: #ffffff;">To:</td>
								<td style="font-family: Arial; color: #ffffff;">{RECIPIENT}</td>
							</tr>
						</table>
					</td>
					<td style="padding: 10px 30px 10px 20px; font-family: Arial; font-size: 26px; color: #ffffff; text-align: right;">CODE: {GIFTCARDCODE}</td>
				</tr>
			</table>
		</td>
	</tr>
</table>

  1. The available placeholders (such as gift card value, code, and recipient details) can be inserted into your HTML. These placeholders will dynamically populate when the gift card is generated.

Save the Template

  • Click Add Template.

  • The new template will appear in the list with the other gift card templates.

Preview and Adjust

  1. Click Manage next to your template.

  2. Select Preview Template.

  3. Review how the HTML content overlays the background image.

  4. If needed, edit the HTML to:
    Move text
    Adjust spacing
    Better align content with your image design

Using the Template

Once saved, your custom gift card template will be available as a selectable option when setting up gift card merchandise.