The Voucher Design is applied via the Voucher Content field of the Design tab of a Voucher Product’s settings. It is most often applied via HTML content with a background image.

Merge Tags are utilised to bring through the details of the:

  • Voucher Product Name: {$ProductName}
  • Expiry Date: {$ExpiryDate}
  • Voucher Code: {$Code}


Upload background image

To apply a Voucher Design, you will need to first upload the background image that you want to use.

This is done by going into the Page Editor > Files > Uploads:


Once you are in the Uploads folder, you can then use the Upload button to upload your background image:

 


Once the background image has been uploaded, you can then apply the design to the Voucher Product.


Apply design to Voucher Product

This is done by going to Settings > Products > [Find your voucher product] > Design:


When you are in the Design Tab, click on the “HTML” button of the Voucher Content field:


Apply the necessary HTML code into the pop-up that you are given, then click “Update”:


You will then see your voucher design in the Voucher Content field, which will now be attached to all confirmation emails for this voucher product.


Voucher Templates

Template 1

<div style="position: relative; width: 600px;">
    <img title="" src="assets/Uploads/voucher-template-1.png" alt="" width="600" />
    <div style="position: absolute; top: 113px; left: 1px;">
<table style="width: 324px; font-size: 20px; font-family: sans-serif;">
<tbody>
<tr>
<td style="font-weight: bold; color: white; font-size: 20px;">{$ProductName}</td>
</tr>
<tr>
<td style="padding-left: 15px; padding-top: 61px;">{$Code}</td>
</tr>
<tr>
<td style="padding-left: 15px; padding-top: 11px;">
<strong>Expires:</strong> {$ExpiryDate}
</td>
</tr>
</tbody>
</table>
    </div>
</div>


Template 2

<div style="font-size: 1.1rem; color: black; font-family: sans-serif;">
    <img title="" src="assets/Uploads/voucher-template-2.png" alt="" />
    <div style="position: absolute; top: 240px; left: 90px;">&amp;nbsp;</div>
    <div style="position: absolute; top: 260px; left: 410px; width: 170px; height: 40px; word-wrap: break-word;">{$ProductName}</div>
    <div style="position: absolute; top: 323px; left: 487px;">{$ExpiryDate}</div>
    <div style="position: absolute; top: 333px; left: 620px;">{$Code}</div>
</div>


Template 3

<div style="position: relative; width: 600px;">
    <img title="" src="assets/Uploads/voucher-template-3.png" alt="" width="600" />
    <div style="position: absolute; top: 115px; left: 115px; height: 220px; width: 370px;">
<table style="height: 60px; width: 370px; /* border: 1px solid #000;">
<tbody>
<tr>
<td style="text-align: right; padding-left: 80px; font-size: 12px; padding-top: 11px;">
<p>{$Code}</p>
</td>
</tr>
<tr>
<td style="width: 129px; font-size: 12px; text-align: right; padding-top: 6px;">&amp;nbsp;</td>
<td style="width: 129px; font-size: 12px; text-align: right; padding-top: 6px;">{$ExpiryDate}</td>
</tr>
<tr>
<td style="padding-left: 83px; font-size: 12px; padding-top: 5px; text-align: right;">{$ProductName}</td>
<td>&amp;nbsp;</td>
</tr>
</tbody>
</table>
    </div>
</div>