Omnisend doesn't replace any of the automated notifications you are sending. If you wish to design your Order Confirmation, Shipping Confirmation, Abandoned Cart emails, etc. you will need to create and enable them in Omnisend. The automatic responses sent by Shopify should be disabled or replaced. 

In this article, we'll explain what responses and how they can be replaced with the emails you design in Omnisend.

Contents

Pre-set automation workflows
Replacing Default notifications

Pre-set automation workflows

The list of the default automations that can be designed and sent by Omnisend includes:

If you want to avoid sending duplicated emails, you need to disable the default notifications in your Shopify account settings. Follow the instruction from Shopify Help Center

Note, it is not possible to disable the Order Confirmation email sent by Shopify. Therefore we suggest replacing it with the Thank you note and sending this email through Omnisend. Find the instruction in the dedicated article.

However, apart from the pre-set automation workflows, you may also replace some of them by selecting the appropriate statuses in the automation trigger. For example, Order refund notification sent by Shopify can be replaced with the automation whose trigger is set to Order status change -> Order status is Refunded

Important! When using the Order is Placed trigger, you need to select the original status for the order. If the initial status of the Order is Authorized and it changes to Paid later, the main trigger should be set to Order Status Change.

All of the orders with the statuses presented in the table can be designed in Omnisend. Once you enable them, you should also disable corresponding notifications in your Shopify admin.

Replacing Default notifications

As you may understand, the list of the automation workflows offered by Shopify is extensive. Unfortunately, not all of them can be designed and sent to your customers by Omnisend. Nevertheless, there is a workaround that allows replacing the design of the default notification. 

Important! We will only present a few examples for notifications with a single call to action button. If you wish to re-design the automation that is not presented in the article, check it with your store developer.

Customer Account notifications

By subscribing to the Sign-up form, your customer opts-in to receive your marketing. When creating an account in your store, the customer is not getting Allowed marketing status that is required to start sending promotional messages. Omnisend is not able to send notifications related to the customers' accounts, nevertheless, you can replace its design.

As you may see from the screenshot, the most critical parameter in this message is the URL for the password reset. 

To find the anchor attached to the button, you may search with the name of the button.

Later this anchor should be added to the code for the button designed in Omnisend.

  • Customer account welcome: {{ shop.url }}
  • Customer account password reset: {{ customer.reset_password_url }}
  • Customer account invite: {{ customer.account_activation_url }}

Simple notifications

Among all of the notifications, we've selected those having a simple design. 

  • Return label instruction: {{ return_label.public_file_url }}
  • Payment error: {{ url }}
  • Gift card created: {{ gift_card.url }}

Personalized anchors

  • Customer Name: {{ customer.first_name }}
  • Order Name: {{ order_name }}
  • Order Number: {{ order_number }}

Check Shopify Help Center for other Notification variables reference.

Replacing the design in Shopify

There is no way to export the HTML code of the Email message, but it can be accessed in the editor for the Thank you message. Even though we create Order Confirmation email to access this editor, you don't need to enable it and may delete as soon as you copy the HTML code.

Once you access the editor, you may choose one of the templates or create your own design. The editor for the automation is way more simple than the one for the rest of the workflows. Only Title, Text or Image blocks can be added to the message. Therefore, we suggest to create a simple email in Omnisend and then create a button by adding the code provided below. Keep your design simple, remove menus, and use 1 column design. 

When happy with the email message design, you should click on the GET HTML button and go to your Shopify Notifications settings

As you may see from the HTML code, each of the message blocks starts with the new line. Therefore when adding the code for the button, you can easily understand where exactly this code should be placed. 

In the example presented above, I have the pre-header, Image (cb-1), Title (cb-2), Text (cb-3), Footer (cb-4) and Badge (cb-5). If I want to place the button below the image, the code should be added below cb-1 element.

Don't be afraid to experiment; if something goes wrong, you can always check the Preview and restore the default settings.


Before one of the line starting with </div><div class the code for the button should be added to the template:

</div><div class="cb cb-2 cb-title"><table border="0" cellspacing="0" cellpadding="0" width="100%"><tr>
<td style="background-color:#fff;" bgcolor="#fff"><table border="0" cellspacing="10" cellpadding="0" width="100%"><tr>
<td style="padding-bottom:25px;padding-left:150px;padding-right:150px;padding-top:25px;"><div class="cbvariant cbvariant-center"><table border="0" cellpadding="0" cellspacing="0" width="100%"><tr>
<td style="background-color:#fff;" bgcolor="#fff" class="actions__cell" style="font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, &quot;Roboto&quot;, &quot;Oxygen&quot;, &quot;Ubuntu&quot;, &quot;Cantarell&quot;, &quot;Fira Sans&quot;, &quot;Droid Sans&quot;, &quot;Helvetica Neue&quot;, sans-serif;">
<td class="button__cell" style="font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, &quot;Roboto&quot;, &quot;Oxygen&quot;, &quot;Ubuntu&quot;, &quot;Cantarell&quot;, &quot;Fira Sans&quot;, &quot;Droid Sans&quot;, &quot;Helvetica Neue&quot;, sans-serif; border-radius: 4px;" align="center" bgcolor="#2CA6A1"><a href="{{ customer.reset_password_url }}" class="button__text" style="font-size: 16px; text-decoration: none; display: block; color: #fff; padding: 5px 5px;">Reset your password</a></td></tr></table></div></td></tr></table></td></tr></table>


For each of the notification, the anchor assigned to the href= attribute, and the title of the button should be replaced. For example, for the Password reset we have:

href="{{ customer.reset_password_url }}"
>Reset your password<
  • If you change the color of the template, you need to change it for bgcolor and background-color elements, except for the one within the button settings. 
  • To change the width of the button, you should change the padding-left:150px and padding-right:150px.
  • To change the size of the block with the button, you should change padding-bottom:25px and padding-top:25px.


Customer account invite message allows ones to add the custom text for each of the customers individually. To support this option in the replaced HTML code, the following code should be added to the HTML code.

This code should be added to the element with the default text before </p> tag. 

<h2>{{ email_title }}</h2>
{% if custom_message != blank %}
<p>{{ custom_message }}</p>
{% else %}
<p>{{ email_body }}</p>
{% endif %}
<table class="row actions">

Here is the screenshot from the editor:

As you may see from the code presented above, we have also added a personalization to insert customers' first names to the content of the email message. 

Have more questions? Feel free to contact us at support@omnisend.com.

Did this answer your question?