Personalize Your Templates

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.

1. Go to Settings.

   

2. Select Account Settings.

   

3. Select Templates.

   

4. Select the template you wish to edit. Then click Edit.

   

   Next, we will look for the default message within the code on the left side of the screen. Here's how:

5. Click anywhere inside of the code editor. Then, open the search bar by pressing CTRL + F (Windows) or CMD + F (Mac).

   The Find bar opens at the bottom of the code editor.

   

6. 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:

        Thank you for your business.
        {% if order.store.address.email %}
          Questions? Contact us at <strong>{{ order.store.address.email }}</strong>
        {% endif %}

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.

        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 %}

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…

 We appreciate your order. We are always here to help! Give us a call at 800-555-555x.

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 an 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

  We appreciate your order. We are always here to help! Give us a call at <b>800-555-555x</b>.

And it looks like this:

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.

1. Go to Settings.

   

2. Select Account Settings.

   

3. Select Templates.

   

4. Select the template you wish to edit. Then click Edit.

   

5. Click anywhere inside of the code editor. Then, open the search bar by pressing CTRL + F (Windows) or CMD + F (Mac).

   The Find bar opens at the bottom of the code editor.

   

Next, we will use the Find and Replace options to locate and replace all of the HEX color codes that control the background colors.

6. Enter #fafafa into the Find field and your HEX color code into the Replace field, then click replace all.

   

   You will see the preview update to display the correct color in the background of most sections in the template.

   

   Notice that the Order Items table header is a slightly different color. Let's update that, too.

7. 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.

8. Open the Find bar 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 editor.

   

9. 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!

Here's the default message in the Order Shipped Notification Email template:

Great news! Your order is on its way. Click any tracking number below to see when it will arrive. 😊

Want to add your own, personalized message? Here's how:

1. Go to Settings.

   

2. Select Account Settings.

   

3. Select Templates.

   

4. Select the template you wish to edit. Then click Edit.

   

   Next, we will look for the default message within the code on the left side of the screen. Here's how:

5. Click anywhere inside of the code editor. Then, open the search bar by pressing CTRL + F (Windows) or CMD + F (Mac).

   The Find bar opens at the bottom of the code editor.

   

6. Type Main Message into the Find field 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>
   <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>

   Your order is on its way to you! Easily track your order by clicking your
   tracking number below. 😊

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>
  <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>

  Your order is on its way to you! Easily track your order by clicking your
  tracking number below. ✅

It looks like this in the email:

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:

1. Go to Settings.

   

2. Select Account Settings.

   

3. Select Templates.

   

4. Select the template you wish to edit. Then click Edit.

   

   Next, we will look for the default footer within the code on the left side of the screen. Here's how:

5. Click anywhere inside of the code editor. Then, open the search bar by pressing CTRL + F (Windows) or CMD + F (Mac).

   The Find bar opens at the bottom of the code editor.

   

6. Type Footer into the Find field 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>
    <h3 style="margin: 0 0 12px 0; font-size: 13px; font-weight: 600; color:
    #1a202c;">We are Here to Help</h3>

    Questions about your order? Reach out at

    800-555-555x or email us at
         <a
           href="mailto:{{order.store.address.email}}"

          >
            {{- order.store.address.email -}}
         </a>

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>

        Questions about your order❓

         Give us a call at 800-555-555x ☎

     </td>
   </tr>
</table>

And it looks like this:

Postsale's templates include a light gray background for sections such as Order Number, Order Date, Address, and so on.

But what if you'd like to change that color to be in line with your branding? Let's dive in:

1. Go to Settings.

   

2. Select Account Settings.

   

3. Select Templates.

   

4. Select the template you wish to edit. Then click Edit.

   

5. Click anywhere inside of the code editor. Then, open the search bar by pressing CTRL + F (Windows) or CMD + F (Mac).

   The Find bar opens at the bottom of the code editor.

   

Next, we will use the Find and Replace options to locate and replace all of the HEX color codes that control the background colors.

6. Enter #fafafa into the Find field and your HEX color code into the Replace field, then click replace all.

   

   You will see the preview update to display the correct color in the background of most sections in the template.

   

   Notice that the Order Items table header is a slightly different color. Let's update that, too.

7. 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 to look like this.

   

   

   You can also update the overall background color of the entire email.

8. Use the Find option again. Enter Email Container into the Find field and click next.

   

   The Email Container code will be shown.

   

9. Update the style="background-color: #f5f5f5;" 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.