Want your invoices, packing slips, and emails to reflect your brand and speak to your customers in your voice? With Postsale’s template editor, you can add your logos, customize colors, add personalized messages, and more to make each invoice, packing slip or email feel like your own.
There are times when you may want to make a few changes to your templates so that they better communicate your branding and messaging. The sections in this article show some simple-to-follow guides on how to modify each of the templates to make them your own.
Before you begin editing, here are a couple of helpful suggestions:
1 - Make Copies Before You Begin Editing
Before making changes, it’s a good idea to start by duplicating the default template so that you can work in the copy. That way, the original stays intact and you’ve got a clean version to go back to if needed.
You can also create as many copies as you like, which is handy for testing out different designs or saving versions for different use cases.
To make a copy:
Go to Settings > Account Settings.
Select Templates.
Select the template.
Click the Copy button.
The copy opens in the template editor.
About Template Syncing
By default, templates are synced with the latest Postsale version and can’t be edited. This is helpful if you want to:
Keep the template exactly as designed
Automatically receive updates or improvements from Postsale
However, since you will need to edit the copy you just made and you don't wish for Postsale to overwrite your changes, you'll want to turn syncing off.
Click the Turn Sync Off button. This allows you to make edits to the template.
Select Settings.
Give the template a unique name.
Click Save to save the template.
The copy of the template is saved and ready to be edited.
2 - Mistakes Happen: Revert to the Default Version
Mistakes happen. When they do, sometimes it's best to just start from the beginning. Here's how you can revert the template back to the original, default version:
Select Settings.
Check the Sync with Built In Template checkbox.
Click Sync to confirm that you wish to overwrite any changes you have made to the template and to revert to the latest default version of the template.
The template is now reverted back to the default version.
Step-By-Step Guides
Below, you’ll find sections for each template type, with step-by-step guides for some of the most common ways to customize and brand them.
These aren’t the only changes you can make, just a starting point. Our goal is to give you the tools and confidence to make your templates work for your business, however you need them to.
Let's get started:
Personalize Your Invoice and Packing Slip Templates
Here are some edits that you can make to brand and customize the Packing Slip or Invoice templates:
Add Your Own Custom Message
Postsale's default invoice and packing slip templates include a thank you message. It says:
Thank you for your business. Questions? Contact us at [your email address]
You can update this message to make it your own. Here's how: The steps below can be used to update the invoice and/or the packing slip template.
Next, we will look for the default message within the code on the left side of the screen. Here's how:
Click anywhere inside of the code window. Then, open the search dialog by pressing CTRL + F (Windows) or CMD + F (Mac).
The Find dialog opens at the bottom of the Code window.
Type Thank you for your business into the Find field and click next.
When you click next, you will jump to the code for the default message. It will look like this:
<p>
Thank you for your business.
{% if order.store.address.email %}
Questions? Contact us at <strong>{{ order.store.address.email }}</strong>
{% endif %}
</p>
If you're not used to looking at code, this might look a little intimidating, but don't worry. Let's walk through it:
What this code is doing is saying “Hey template. If there is an email address associated with the store, display it in the message, like this…”
“Otherwise, just display the first sentence, like this….”
Examples
You can change anything in between the <p> and </p>. Just be sure to leave the <p> and </p> in place.
Example 1
Here's an example that leaves the code to include the email address if there is one associated with the store, but changes the message itself.
<p>
We appreciate your order.
{% if order.store.address.email %}
We are always here to help! Reach out at <strong>{{ order.store.address.email }}</strong>
{% endif %}
</p>
It looks like this on the packing slip or invoice:
Example 2
You can also type in your message between the <p> and </p>. This would remove the code for the email and just display the message you type. Like this…
<p> We appreciate your order. We are always here to help! Give us a call at 800-555-555x.</p>
It looks like this on the packing slip or invoice.
Example 3
You can make portions of your message stand out by making it bold or italicized. Here's and example where we make the phone number in our message both.
Notice that the phone number is now wrapped in:
<b> </b> for Bold text
<i> </i> for Italicized text
<p> We appreciate your order. We are always here to help! Give us a call at <b><i>800-555-555x</i></b>.</p>
And it looks like this:
Change the Colors
Postsale's templates include a light gray background for the different sections, like the Order Number, Order Date, Address section, and so on.
But what if you'd like to change that color to be in line with your branding? Let's dive in: The steps below can be used to update the invoice and/or the packing slip template.
A Little About Colors in Templates
In Postsale templates, colors are defined using HEX color codes. These are simple color labels that tell the template exactly which color to use. This is helpful when you want everything to match your brand colors exactly.
So, what’s a HEX color code? It’s just a six-character code (like #fafafa) that represents a specific color.
By default, Postsale uses #fafafa for the template background. In the next steps, we’ll show you how to change that color to your brand color for all sections in the template.
This section assumes that you have the HEX color code for your brand color.
Click anywhere inside of the code window. Then, open the search dialog by pressing CTRL + F (Windows) or CMD + F (Mac).
The Find dialog opens at the bottom of the Code window.
Next, we will use the Find and Replace options to locate and replace all of the HEX color codes that control the background colors.
Enter #fafafa into the Find field and your Hex color code into the Replace field.
You will see the preview update to display the correct color in the background of most sections in the template.
Notice that the rder Items table header is a slightly different color. Let's update that, too.
Use the Find and Replace options again. This time enter #f9fafb into the Find field and your Hex color code into the Replace field. Click Replace All. The Order Items section will update with your color.
You can also change the colors of the Order Notes section. The notes section has two colors, one for the background color and another for the left border.
Open the Find dialog again. This time, enter .note-item into the Find field and click Next. The section that controls the look of the Order Notes will be shown in the code screen.
Update both the background: and the border-left: lines with your Hex color code(s). The Order Notes background will update.
You have now updated all of the background colors in the template!
Personalize Your Shipment Notification Email Template
Did you know that you can send an email to your customer letting them know that their order has shipped? You sure can! Postsale has a default email template for that.
The default template is ready to go just the way it is, but let's look at a couple of ways to edit the default template so that it better matches your brand.
Next, we will look for the default message within the code on the left side of the screen. Here's how:
Click anywhere inside of the code window. Then, open the search dialog by pressing CTRL + F (Windows) or CMD + F (Mac).
The Find dialog opens at the bottom of the Code window.
Type Main Message into the Find fields and click Next.
You will jump to the section of code for the main message. It looks like this: The text that displays in the email is highlighted for you. This is what you would update with your own message. Notice that the first highlighted line includes some code. The code simply tells Postsale to include the First Name associated with the order. You can leave that code, or completely remove it. It's up to you. The same is true of the emojis. 😁
Here are 2 examples of an updated message.
Example 1
This example leaves the code to include the recipient's first name, but changes the message.
<tr>
<td style="padding: 32px 30px;">
<h1 style="margin: 0 0 12px 0; font-size: 24px; font-weight: 600; color:
#1a202c; line-height: 1.3;">
Hey {{ order.ship_address.name | first_name }}, keep an eye out for your order! 📦
</h1>
<p style="margin: 0 0 24px 0; font-size: 14px; color: #374151; line-height:
1.6;">
Your order is on its way to you! Easily track your order by clicking your
tracking number below. 😊
</p>
It looks like this in the email:
Example 2
In this example, the code to include the name is removed and the emojis have been changed.
<tr>
<td style="padding: 32px 30px;">
<h1 style="margin: 0 0 12px 0; font-size: 24px; font-weight: 600; color:
#1a202c; line-height: 1.3;">
Keep an eye out for your order! 🚚
</h1>
<p style="margin: 0 0 24px 0; font-size: 14px; color: #374151; line-height:
1.6;">
Your order is on its way to you! Easily track your order by clicking your
tracking number below. ✅
</p>
It looks like this in the email:
Change the Email Footer
Here's the information included in the footer of the default email template:
Here's how to update the information included in the email's footer:
Next, we will look for the default footer within the code on the left side of the screen. Here's how:
Click anywhere inside of the code window. Then, open the search dialog by pressing CTRL + F (Windows) or CMD + F (Mac).
The Find dialog opens at the bottom of the Code window.
Type Footer into the Find fields and click Next.
You will jump to the section of code for the Footer. It looks like this: The text that displays in the email is highlighted for you. This is what you would update with your own information.
Notice that the last highlighted section includes some code. The code simply tells Postsale to include your store's email address. You can leave that code, or completely remove it. It's up to you.
Example 1
Here is an example that still includes the email address:
<td style="padding: 28px 30px 24px 30px; background-color: #fafafa; border-top: 1px solid #e5e7eb; text-align: center;">
<h3 style="margin: 0 0 12px 0; font-size: 13px; font-weight: 600; color:
#1a202c;">We are Here to Help</h3>
<p style="margin: 0 0 4px 0; font-size: 12px; color: #64748b; line-height:
1.6;">
Questions about your order? Reach out at
</p>
<p style="margin: 0; font-size: 12px; color: #64748b;">
800-555-555x or email us at
<a
href="mailto:{{order.store.address.email}}"
style="color: #1a202c; text-decoration: none; font-weight: 600;"
>
{{- order.store.address.email -}}
</a>
</p>
It looks like this:
Example 2
This code removes the email address code, and adds emojis:
<tr>
<td style="padding: 28px 30px 24px 30px; background-color: #fafafa; border-top:
1px solid #e5e7eb; text-align: center;">
<h3 style="margin: 0 0 12px 0; font-size: 13px; font-weight: 600; color:
#1a202c;">Thank you! We are Here to Help.</h3>
<p style="margin: 0 0 4px 0; font-size: 12px; color: #64748b; line-height:
1.6;">
Questions about your order❓
</p>
<p style="margin: 0; font-size: 12px; color: #64748b;">
Give us a call at 800-555-555x ☎
</p>
</td>
</tr>
</table>
And it looks like this:
Change the Colors
Postsale's templates include a light gray background for the different sections, like the Order Number, Order Date, Address section, and so on.
But what if you'd like to change that color to be in line with your branding? Let's dive in:
A Little About Colors in Templates
In Postsale templates, colors are defined using HEX color codes. These are simple color labels that tell the template exactly which color to use. This is helpful when you want everything to match your brand colors exactly.
So, what’s a HEX color code? It’s just a six-character code (like #fafafa) that represents a specific color.
By default, Postsale uses #fafafa for the template background. In the next steps, we’ll show you how to change that color to your brand color for all sections in the template.
This section assumes that you have the HEX color code for your brand color.
Click anywhere inside of the code window. Then, open the search dialog by pressing CTRL + F (Windows) or CMD + F (Mac).
The Find dialog opens at the bottom of the Code window.
Next, we will use the Find and Replace options to locate and replace all of the HEX color codes that control the background colors.
Enter #fafafa into the Find field and your Hex color code into the Replace field.
You will see the preview update to display the correct color in the background of most sections in the template.
Notice that the rder Items table header is a slightly different color. Let's update that, too.
Use the Find and Replace options again. This time enter #f9fafb into the Find field and your Hex color code into the Replace field. Click Replace All. Order Items section will update to look like this.
You can also update the overall background color of the entire email.
Use the Find option again. Enter Email Container into the Find field and click Next.
The Email Container code will shown.
Update the style=background-color: #fafafa line with the Hex code for the color you want the email background to be.
The colors of your email template have now been updated.
