With VaocherApp Voucher Builder, you can create your own gift vouchers design by just "drag & drop". It's easy to use and you will be able to create your own unique voucher design for you business in just a few minutes. We've prepared many different built-in elements which you can drag and drop into the desired position. Our gift voucher design tool also gives you the option of customising the layout of your voucher such as fonts, colours, as well as uploading your business's logo or image.
This article is for "Advanced Editor Mode". Visit this one for how to use "Simple Editor Mode".
If you haven't created a gift voucher design (also called PDF artwork), you can visit How to create and upload a gift voucher design help article to create one.
To start designing your gift voucher or gift card, navigate to https://vaocher.app/settings/pdf/ and select the template you want to edit.
When first created, you will see something like the above screenshot, where:
(left hand side) is the sidebar where you can customise your design (will get into details below)
- there is also navigation tab on top of the sidebar where you can switch between different tools/settings
- (right hand side) is the preview panel
The "Layout" tab
You can configure the design layout from here:
- Logo: upload logo or any images
- Background image: upload the wallpaper(*)
- Text colour: change text colour
- Font family: change the text font (powered by Google Fonts)
- Font size: change the text size
- Line height: change the height of the text
- Text alignment: align your text left, right or center
(*): The difference between uploading a logo image vs background image is:
- logo: you can upload any images (e.g. logo or hero image) to the voucher design and reposition them by drag & drop
- background image: if you have a A4 format design of your gift voucher (like a frame or wallpaper), upload it here. This image will sit at the very back of your design, and all other elements (including the logo image above) will sit on top of it
The "Element" tab
From this tab, you can:
- create or add new element into your design
- edit element attributes
An element is a small piece of code, indicated by brackets like
[this], that represents an actual value when the design is being generated. For example:
[recipient]element will be replaced by the real recipient's name (e.g. John Doe)
- or the
[item]element will be replaced the menu item name which the purchaser selected during checkout.
Here is the full list of elements and what they represent:
||message from the purchaser|
||current remaining balance (e.g. $100)|
||voucher reference code as text|
||voucher expiry date|
||voucher created/issued date|
||menu item name|
||menu item description|
||menu item terms & conditions|
||your business name|
||your business address|
||your business email|
||your business phone|
||your business website|
Also there are some special elements:
|Scannable code||voucher reference code as an image (e.g. QR-Code or barcode)|
|Static text||add any texts of your choice (e.g. redeem instruction, or T&C...)|
|Logo or image||upload your logo or image|
The "Settings" tab
Here is where you can change:
- the design name and description (these info are just for internal reference only, they won't be showed to your customers)
- Highlight colour: change the highlighting colours while editing template
- Download preview: download a preview of your design in PDF format
💡 Note: the "highlight colour" takes into effect in building mode only. When printing the ultimate voucher design (the one to send to recipients), this colour will be hidden (not visible). It helps you to differentiate elements and the space they occupy so you can estimate and design better.
Whenever you've made a change, the preview panel will auto reflect so you can see how your design looks like.
How to edit an existing element
On the preview panel, you can right-click on any elements to show the context menu where you can:
- edit the element attributes
- move element forward (in front of other elements)
- move element backward (behind other elements)
- remove element
Note: editing element attributes require basic knowledge of design, including HTML and CSS.