How to Customize Your Shopify Notification Emails

A simple how-to-guide to using the Spently Template Builder

Shopify’s Notification emails are a great place to connect with your customers and extend your customer experience after an interaction with your store. Once you have installed the Spently app from the Shopify App Store you can easily customize your Order Confirmations, Shipping Confirmations, e-Receipts, Abandoned Checkout, Customer Account Welcome emails, and more into beautiful responsive html templates.

Getting a feel for Spently

When you first install the app and sign in you will come across the Spently Dashboard. The dashboard is a snapshot of all of your email activity. Here you can see how many people are engaging with your emails and which of your links are performing best — your social links or a particular landing page for example.

Dashboard

Selecting a Template

When you select “Notifications” from the left navigation bar, you will see a drop down of the various email types we support. A great place to start is your Order Confirmation, but all of your notification emails are important in their own right and should have a consistent look and feel.

Once you select an email type, you have the opportunity to select a template theme. All of Spently’s email templates are responsive so whichever you choose will look great on a desktop or on mobile.

Customizing your Template — Working from the top down.

When customizing your email template you will want to keep the design simple and effective. A good way to not miss anything is to take a top down approach. For this reason I suggest starting with the pretext of the email and working your way down the template.

Order Conf

Pre-Text

The pretext of the template is very important. This is the text that will show up after the subject and will give your customer a preview of what the email contains. The preview text also allows email clients to understand your email better giving you the advantage of landing in a greater number of inboxes and out of your customers spam filters. A simple message like “This is a “email type” from “your store name.” Thank you for your purchase.” will suffice.

Email Header

The header image of your email is what will grab your customers attention, as well as allow your customers to visually recognize who the email is from. For this reason using images that include your branding or clearly represent your brands identity are important. To upload a header or a logo select the place holder image and select “Upload” found in the Selection Settings on the right side of the template editor screen.

Our builder was made with ease of use in mind so whatever image you upload should automatically look great regardless of the size. If you want to further edit the image you can do so using our image editor that pops up. Using the image editor you can resize, crop, enhance, and even add text overlays to the image.

It’s important to note that most emails are typically 600px wide. If the image you upload is larger, our builder will automatically resize your image to 600px in width so that it fits onto the email template.

Quill

Using Text

Including some text on your template is never a bad idea. Spently now offers a variety of Text components — Text, Bordered Text, Text|Text, Image|Text, and as mentioned above, you can even add text over images using the text option found in the image editor. Adding a simple message in larger font to catch your customers attention, thank them, or inform them can go a long way.

Our templates come pre-populated with Text boxes that you can edit or delete. To edit a text box simply click on it, and use the text editor on the right hand side. The text editor has all the standard options of any common text editor so editing and adding text should be relatively simple. One great new option of our text editor is the ability to view the the source html, so if you know how to code you can further customize each text component.

Email Body

On to the body of the templates. Spently’s templates are all pre-populated with html and shopify variables in order to pull the correct information from your store and transaction data. All of the email body components are all really just text components so if you know how to code or would like to include any new shopify variables you can do so by selecting view source from within the text editor on the right side for that particular component. Beware though, if you do not know how to use Shopify variables or code we suggest not playing around with the source option or the stuff in curly brackets. ex.{% for taxline in taxlines %}. If you have made changes it’s always a good idea to send yourself a test email once you have pasted the html we provide for you into your Shopify store.

From there you can pull accent colours to style the rest of your email with. For example you can grab a primary or secondary colour from your header and use the same colour for you “Order Information” box or “Order #”. These little details can make a really big visual impact and give your business the look and feel it deserves.

Tip — If you want to use a consistent colour in various parts of your template you can do so by using the hex colour code #. Ex. To make your text a particular colour highlight the desired text, select the font colour option (the underlined A) from the text editor, select more colours, and paste the hex # into the empty box.

Second Look

Using Images with a Call to Action

Each template comes standard with 2 image components, a header image and a second image on the lower portion of the template. We suggest using the second image as a way to grab your customers attention and get them to take some type of action. This is a great place to reward your customers with a discount code, use a call to action to view a specific product, or even follow you on a specific social site so you can build a relationship with them over time.

As mentioned above we have tried to make our image editor very flexible, so any size image will work. The editor will automatically resize and place your image, but if you would like your image to be a specific size simply use the “Edit Image” button found in the Image Settings on the right side of the template editor.

It is important to assign a URL to your image so that it points to your website or a particular product or discount page. This will drive customers back to your site and increase chances of a repeat purchase. You can do this by adding a URL in the “link” box found on the right above the thumbnail of the image you have uploaded. It is also important to add Alt text so that email clients can better understand your email and get them into the inbox, as well as explain to the reader what the image was if they are opening your email with out displaying images.

Feel free to add as many images to your templates as you would like, but a general rule of thumb is to keep promotional related images to 1/3rd of the email. This way the intended use of the notification email is not lost and you do not abuse your customers trust.

See New

Including Social Links

Social media is an excellent way to build a relationship with your customers and get them coming back to your store. Because of this fact we have included our social media component on the bottom of each template.

To edit your social links simply click on the component and use the Social Links Settings on the right of the template editor. Selecting “Edit Social Links” will allow you to point the social icons to your desired urls. Using the check boxes will allow you to toggle which social icons are displayed to your customers.

Finishing with the Footer

By law you must include your contact information, including a physical mailing address on all promotional and transactional emails. The footer of your email is a great place to do just that. Adding your email address and phone number is also a good idea. The more ways you give your customers a means of contacting you the better.

The footer is also a great place to include things like links to your return policy, warranty, or legal information.

Need help getting set up? Don’t hesitate to contact us at >em class="markup--em markup--p-em">. We’re here to help :)

To install the Spently app for your Shopify store click here.


Check out some other blog posts