If you are familiar with HTML, you can customize your email campaigns using the HTML Item.
Contents
Use of HTML Item
Allowed HTML tags and supported CSS elements
Use case
Steps in case of inaccurate results
Use of HTML Item
Like any Omnisend Email Builder Item, you can drag and drop HTML code to your preferred place.
The difference from other items is the element's content - it allows you to add an HTML code of any custom solution you like (for example, countdown timers). As we assume you know what you are doing, please write executable HTML code and send a test campaign before sending it to your customers.
Some fundamental principles of email HTML and differences from web HTML can be found in our article Basics of Email HTML.
Allowed HTML tags and supported CSS elements
To be sure that your emails sent through Omnisend look fantastic and are compatible with major email clients, not all HTML tags and attributes are available with an HTML item. Below you will find a complete list of tags and attributes and CSS elements that you can use to help you in your emails.
CSS Background Properties
CSS Box and Border Properties
CSS Media Queries
CSS Text Properties
CSS Table Properties
HTML
Link Element
Style Element
HTML tags
Note! HTML item supports only the <body> part of the email, and the <head> should be left out.
Use case
Countdown timers in the Email message (Campaigns)
If you wish to have a timer in your campaign, you can add it by using the HTML item:
Drag and drop the HTML item to the template
Go to https://www.sendtric.com and create a countdown timer. Remember that this service requires a subscription to a paid plan to turn on a countdown timer.
Click generate and copy the code.
Paste the code to the HTML on Omnisend and click Save
To have it centered, use the following settings:
find style=" display: block;"
replace with style="display: block; margin-left: auto; margin-right: auto; width: 50%"
Please go ahead with the following steps to generate the timer from when the email is sent.
Add [[ current_date | date: "%s" | plus: 86400 ]] This function takes the current date/time > converts to seconds -> additionally adds 86400 seconds (1 day) to the current timing. The final centric example should look like this example:
<img src="http://gen.sendtric.com/countdown/vtkfdyi20u?to=[[ current_date | date: '%s' | plus: 86400]]" style="display: block;" />
You can change the number of seconds to any you like; to explain, 86400 seconds = 1 day.
Note! Several alternatives offer countdown timers. For example, you may try going with https://niftyimages.com/CountdownTimers. This one allows generating the dynamic timer for free.
Countdown timers in the Email message (Automations)
For automations, you need a dynamic timer to function properly whenever the email is sent to a user. Please be aware that the app mentioned above - Sendtric, only allows building dynamic timers on paid plans. It's up to you to decide if you want to use it.
However, we have found a free option for you, and you can do that on a free plan with Nifty images https://niftyimages.com/CountdownTimers.
First, you'll need to create a free account and timer. In the editor, you'll see a hyperlink called "Want to use the dynamic date" → this will give you instructions on accessing the Dynamic timers guide.
Note! To make a countdown timer dynamic, make sure to check the 'Email merge tag' checkbox.
We advise watching this guide to familiarize you with dynamic timers and how they work. Please note you'll need to know HTML to proceed with further steps.
Let's add our timer based on a specific use case: imagine you want a dynamic timer that expires at the end of the sale (using a discount item).
Step 1. Create your automation in Omnisend → open Email Builder and add a discount block for your sale. Set the expiration date for your discount, which will be the same as expire date for your timer.
The critical thing to mention here on Shopify is that the discount code expires at 12:00 AM on the date you select in Omnisend. So we need to adjust the countdown timer to match that expiration date.
Step 2. Add an HTML code here with a countdown timer showing when the discount code expires. Copy the Year-Month-Day and Timezone Offset HTML from Nifty images and add it to the HTML Item in Omnisend.
Now you need to change the date format to Omnisend date format. Find the date in your code. You will see there is a dash between each personalization tag, which you will replace with Omnisend dynamic date tags.
Remove the date part from the code and insert Omnisend personalization tags:[[current_date | date:'%Y']]-[[current_date | date:'%m']]-[[current_date | date:'%d']].
Once replaced, the date will show zeros, but when the email will be sent out, an actual date will be shown here because we added personalization tags.
Step 3. Adjust the timezone. You will see a time zone in personalization - set to Greenwich time. You need to change it to the timezone of your account. As shown in the screenshot below, change "T00:00:00-07" to "T00:00:00+2" etc., based on your timezone.
Step 4. So now your timer is set to today's date, but you also want it to count dynamically till the end of your sale (discount expiry is set to 2 days).
For example, if your discount code expires in 2 days, you need your timer to run dynamically for 72 (it doesn't count today, so you need to add 24h to 2 days).
For this, go to Niftyimages, copy this code, return to the HTML item in Omnisend, and place it right after the format tag. Please note that the number of hours should be adjusted based on your sale duration. If your discount expires in 10 days, you must put 264 (240h+24h).
Here's the code pasted in Omnisend:
That's it; you've set the timer to run till the end of your promotion. Please remember that you can only test automation by triggering it yourself.
Steps in case of inaccurate results
If you feel confident about coding or have a developer, you can design custom HTML elements. However, we don't recommend it because of limited email client support. Remember that the Omnisend support team won't be able to help you with custom code issues. If the custom element does not look as it should, consider contacting the particular code snippet provider.