Making sure your referral program invite emails look nice, like your welcome emails, is integral in the success of the program.

We put together a simple template to help you get started and make these notifications (which will often be first-impressions!) look amazing.

Here's a preview of what the notification will look like (before you customize it):

First up, open your "Referral Notification" in the notification list view. For more information on where to find your notifications, checkout this help article: Customize Notifications. Copy & paste the following HTML snippet into the notification body:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

		<style type="text/css">
			@import url(http://fonts.googleapis.com/css?family=Open+Sans:400, 300);
		</style>
	</head>

	<body style="margin: 0;">
		<table cellpadding="0" cellspacing="0" width="100%" style="margin: 0; padding: 0; background-color: #F1F1F1; text-align: center;">
			<tr>
				<td>
					<table border="0" cellpadding="0" cellspacing="0" width="450" style="margin: 0 auto 100px; background-color: #ffffff; border-collapse: collapse;">
						<tr>
							<td>
								<div style="padding-bottom: 15px; border-bottom: 1px solid #E0E0E0; width: 90%; margin: 5px auto;">
									<img src="https://s3.amazonaws.com/cratejoy_vendor_images/b6e96f83efe04b53addae78810bf0274.png" style="text-align: center;" alt="Your Store Name`"/>
								</div>
							</td>
						</tr>

						<tr>
							<td>
								<h1 style="font-family: OpenSans, sans-serif; font-weight: 400; font-size: 50px; color: #343030; line-height: 61px; margin-top: 25px; margin-bottom: 25px;">Hi {{ first_name }}!</h1>

								<h2 style="font-family: OpenSans, sans-serif; font-size: 18px; color: #B0B0B0; line-height: 22px; width: 370px; margin: 0 auto 20px;">{{ ref_token.customer.name }} just invited you to join {{ store.name }}</h2>

								<img src="https://s3.amazonaws.com/cratejoy_vendor_images/275dc7c47aab4456adb2cb52d12cab2d.png" alt="An example box!"/>

								<p style="font-family: OpenSans-Light, sans-serif; font-size: 13px; color: #343030; line-height: 22px; margin: 30px 20px 35px;">
								This is a great place to have a little introduction about your product
								</p>

								<div style="height: 45px; margin-bottom: 20px;">
									<a href="{{ referral_url }}" style="margin: 0 auto; width: 225px; background-color: #343030; border-radius: 3px; font-family: OpenSans, sans-serif; font-size: 13px; color: #FFFFFF; letter-spacing: 2px; line-height: 17px; padding: 13px 32px 15px; text-decoration: initial;">Accept Invitation</a>
								</div>
							</td>
						</tr>
					</table>
				</td>
			</tr>
		</table>
	</body>

</html>

Customize Images

To start customizing, you'll probably want to replace the image placeholders: the logo placeholder and the sample box placeholder. To edit the logo, take a look at line 20 in the source code. You'll want to swap out the URL used there with your own logo.

If your logo is already hosted somewhere, replace the URL in the img "src" with a URL to your logo.

If your logo is not hosted somewhere already, you can add an image from your theme, right click on the uploaded image and select "Copy Image URL." For more information on how to upload your images, take a look at this help doc.

Make sure to also change the "Your Store Name" text as well. Sometimes, mail clients decide not to show images and will fallback to alt text. If you don't have alt text specified, your customers won't see anything.

Next, you'll want to change out the image of your sample box. Line 31 is where you can add the URL for your sample box image. The recommend size of the image here is 400x280 pixels.

Customize Color

Now you'll want to customize the colors of your email a bit.

While customizing colors, I'm going to refer to colors in hex. Here are some helpful resources for hex colors:

On line 13 is where you can change the color of your background color. In the default, the background-color property is set to grey (#F1F1F1). Change this to whatever color you'd like!

In the header of the email, there are four places where we change colors:

  • Line 16
  • Line 27
  • Line 29
  • Line 33
  • Line 38

Customize Copy

Of course, you'll want to adjust the copy around your email to make sure it's specific to your store.

Some places where you'll specifically want to change copy:

  • Line 29
  • Line 34

Conclusion

Make sure to send out some test emails to make sure everything looks as expected! Different email clients might display the email different so it's a great idea to test on different devices/apps.