Embed a Gift Certificate in Email with Virtuemart and Joomla

By default, our Gift Certificate software for VM 2 includes an email template with an embedded gift certificate.  However, you may need to change the design, specs, or otherwise modify the image dimensions to your liking.  Follow this tutorial to find out how to properly embed an image background in an email.

First, open up the Email Templates section of VM 2 Gift Certificate, and click the email template which you want to modify.

NOTE: The default template which installs with our component already has this code in it, for you to modify.  However, if you accidentally deleted this code, or need it for duplication, here it is below.  This MUST be done in HTML mode, cannot be pasted directly into the editor.  Disable the WYSIWYG editor before doing this, or if using JCE Editor, use the show/hide button.

 

<div style="background-color: #ededeb;"><center>
<table style="font-family: Arial,Helvetica,sans-serif; padding-top: 30px; padding-bottom: 30px; width: 567px;" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="background-color: #ffffff; border: 1px solid #d7d7d7; padding: 20px;">
<div style="margin: 20px auto; font-size: 13px; line-height: 18px; color: #444444;">
<p>{purchaser_first_name},</p>
<p>Included is the gift card you purchased at {store_name}. Feel free to forward this Gift Card email to anyone you wish, as a gift!</p>
<p>To redeem the gift certificate, just enter the gift card code during checkout in the coupon field, it is as easy as that.</p>
<p>Thank you for your purchase!<br />{siteurl}</p>
<p> </p>
<table style="width: 525px; height: 358px;" background="http://www.osignite.com/images/gift_card_art.jpg" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td height="255" width="50"></td>
<td height="255"></td>
</tr>
<tr>
<td height="103" width="50"></td>
<td valign="top"><!--[if gte mso 9]>
<v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style='behavior: url(#default#VML); display:block; position:absolute; height:358px; width:525px; top:-255px; left:-50px; border:0; z-index:1;' src="http://www.osignite.com/images/gift_card_art.jpg"/>
<v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display:block; position:absolute; height:103px; width:475px; top:0px; left:0px; border:0; z-index:2;'>
<![endif]-->
<p>{vouchers}</p>
<!--[if gte mso 9]>
</v:shape>
<![endif]--></td>
</tr>
</tbody>
</table>
</div>
<hr style="border: 0; color: #ededeb; background-color: #ededeb; height: 1px; width: 100%; text-align: left;" />
<div style="margin: 0px auto; font-size: 13px; line-height: 18px; color: #444444;">
<p>Purchased: {order_date}</p>
<p>{store_name}</p>
</div>
</td>
</tr>
<tr>
<td style="background-color: #e0dfdf;" height="3"></td>
</tr>
<tr>
<td style="background-color: #ededeb;" height="10"></td>
</tr>
</tbody>
</table>
</center></div>

 

What this code has done is embedded a background image using HTML that most email viewing clients will support.  However, the one exception is of course Microsoft, Outlook to be exact.  So, we have also added in outlook specific data with <v> tags to deal with this.  You will need to play with the alignment if you change our default image size, as Outlook formatting takes some trial and error.  It is very similar to absolute positioning.

Security & SSL

We take data security very seriously. Thus, your information is encrypted by a bank-grade, 256-bit SSL certificate during all secure transactions performed on our website.

Authorize.Net Certified Developer

Find Us

OS Ignite, Inc.
1 Technology Dr., Ste B113
Irvine, CA 92618