This article covers how to add a referral program to your welcome email notification.

As you're tweaking and perfecting your Referral Program configuration, it's also highly important to update your Welcome notification with your new Referral information. If your new customers aren't aware of your referral program, they won't know to use it!

First impressions are very important. To help, we've put together a new customizable Welcome notification template that you may edit as you please to incorporate your brand's touch.

Here's a preview of what the new Welcome notification looks like (prior to customization):

Editing the Welcome Notification

To begin customizing this template, find your Welcome notification under 'Settings > Notifications'. (If you're having trouble locating your notifications, check out this help article: Customize Notifications.) Once you've opened your Welcome notification, replace all of the existing HTML with the following HTML snippet. You may directly copy & paste from the below:

<!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 20px; 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" 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 {{customer.first_name}}!</h1>

                <h2 style="font-family: OpenSans, sans-serif; font-size: 18px; color: #B0B0B0; line-height: 22px; width: 370px; margin: 0 auto;">Thank you for signing up with us at {{store.name}}, we're very glad to have you!</h2>


                <p style="font-family: OpenSans-Light, sans-serif; font-size: 14px; color: #343030; line-height: 22px; margin: 30px 20px 10px;">
                  If we can help you in any way, or if you just have a question please don't hesitate to shoot us an email.
                </p>

                <img src="https://s3.amazonaws.com/cratejoy_vendor_images/275dc7c47aab4456adb2cb52d12cab2d.png" style="margin-bottom: 10px;" alt="An example box!"/>
              </td>
            </tr>
          </table>
        </td>
      </tr>
      <tr>
        <td>
          <table border="0" cellpadding="0" cellspacing="0" width="450" height="240" style="margin: 0 auto 100px; background: #ffffff url('https://s3.amazonaws.com/cratejoy_vendor_images/b95162b046744372bce5cf007ced78fd.png') no-repeat center center; border-collapse: collapse;">
            <tr>
              <td>
                <h2 style="font-family: OpenSans, sans-serif; font-size: 18px; color: #B0B0B0; line-height: 22px; width: 360px; margin: 45px auto 0;">Refer Friends For A </h2>
                <h1 style="font-family: OpenSans, sans-serif; font-weight: 400; font-size: 40px; color: #343030; line-height: 49px; margin-top: 5px; margin-bottom: 5px;">FREE BOX</h1>
              </td>
            </tr>

            <tr>
              <td>
                <div style="margin-bottom: 45px;">
                  <a href="https://{{ store | secure_domain }}/customer/refer" style="margin: 0 auto; width: 225px; background-color: #343030; font-family: OpenSans, sans-serif; font-size: 13px; color: #FFFFFF; line-height: 17px; padding: 14px 32px 15px; text-decoration: initial;">Invite Friends</a>
                </div>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </body>
</html>

Customize Images

Adding your own images to your new Welcome notification is what will make all the difference! To begin customizing, you'll want to replace the following two image placeholders: Store Logo and Main Image.

To add your Store Logo, find line 20 in the newly-pasted HTML source code. You'll want to swap out the placeholder image URL with a new URL to your Store's logo, as pictured below.

If your logo is already uploaded to your Cratejoy Store, navigate in a new tab to your Store's website and simply right-click your logo to 'Copy Image URL'. Once you've done this, you'll want to replace the 'IMG src' link on line 20 with this new copied URL.

The next thing you'll want to update is the 'Your Store Name' text, which can be found within the same IMG src bracket. This plain-text will only ever be displayed if a customer's mail client doesn't support images. Be sure to replace this, otherwise it will literally say 'Your Store Name' at the top of an imageless email!

Lastly, you'll want to give your new customers some exciting eye candy – an image of your subscription box! On Line 36, you'll need to update the placeholder URL with a new hosted URL image. You may host this image on Cratejoy by Adding an Image in the Code Editor. We recommend sizing this image at 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 32

In the footer of the email:

  • Line 44
  • Line 47
  • Line 48
  • Line 55

Customize Copy

Of course, you'll want to adjust the copy around your email to make sure it's specific to your store as well as the reward in your referral program.

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

  • Line 29
  • Line 32
  • Line 47
  • Line 48

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.

Don't forget to edit your Referral Invitation email, as well!