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 are and how they can be replaced with the emails you design in Omnisend.
Contents
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 }}
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 builder for the Thank you message by clicking 'GET HTML' button. Even though we create an Order Confirmation email to access this builder, you don't need to enable it and may delete it as soon as you copy the HTML code after you export the HTML by clicking a button. Once you access the builder, you may choose one of the templates or create your own 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 a 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; you can always check the Preview and restore the default settings if something goes wrong.
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, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;">
<td class="button__cell" style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 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.
The customer account invite message allows one to add 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 builder:
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 [email protected].
