SmartBlocks are HTML blocks that use real-time data to personalize content. They can be inserted into emails, websites, or apps to provide a dynamic and engaging experience for your audience.

You can use Countdown SmartBlocks for:

Limited-time sales
Promote flash sales or time-limited discounts to create a sense of urgency, encouraging visitors to make faster decisions and purchase before the sale ends.

Pre-order campaigns
Create anticipation for upcoming product launches or pre-order campaigns, encouraging shoppers to place their orders before the product becomes available.

Event promotions
Promote events like product launches, webinars, or workshops, generating excitement and encouraging shoppers to sign up before the event starts.

Shipping deadlines
Highlight shipping deadlines for holidays or special events, urging shoppers to place their orders in time to receive their items by a specific date.

Holiday moods
Add a countdown to holidays or special occasions such as Christmas, Valentine's Day, or Cyber Monday to tap into the festive spirit and boost sales.

Recurring events
Clearly display deadlines for recurring events, such as next-day shipping, to inform shoppers of cut-off times to ensure timely delivery.

Before you start

Things you need to know:

You should be familiar with how to create a new SmartBlock.
Learn more in Create and edit a SmartBlock.

Countdown placement

When creating a Countdown SmartBlock, the available tactics and layouts depend on whether the Countdown SmartBlock is designed for placement on a website or email.

Countdown tactics

We display a selection of tactic options to help you create the perfect Countdown SmartBlock. These allow you to choose the countdown shape and size that best suits your needs, and whether you require a one-stage or two-stage countdown. Based on your selection, we present you with the suitable layout options.

When you create a Countdown SmartBlock, the following tactics are available:

One-Off Event: creates a one-off countdown to an event, for example, to the start or end date for a sale, promotional offers, product launches, and more.
Repeating Event: creates a repeating countdown, for example, a daily countdown to the free delivery cut-off point.
Personalized: create a countdown to a customer's personalized event, for example, their birthday, start of holiday, and more.

You can set each tactic for either a single date or two dates in the future - the start and end of the sale. If you choose two dates, your countdown has three stages, each with its own message and destination URL:

Before the event starts
During the event
After the event

If you choose a tactic with a single date, the countdown only has two states: before and after the event.

The different stages are decided by the period leading up to the first date, between the two dates (if two are set), and after the final date has passed. To set up these stages, enter the start and end dates on the Behavior tab.

Email recipients who use newer Apple devices need some consideration, and you might want to show them alternative content.

Learn more in Email Privacy Protection.

Countdown layouts

Layouts decide how your SmartBlock appears and functions.

There's a choice of default layouts available for each tactic, including Standard (large countdown widget) and Slimline (inline countdown) templates.

Once the SmartBlock is saved, select the Design tab to customize the settings for your SmartBlock.

For more advanced editing options, see the section Advanced: Layout creation or editing.

Create a Countdown SmartBlock

Go to Content > SmartBlocks, then select the Countdown tab.
Select CREATE SMARTBLOCK.
On the creation wizard, for Placement, choose the Website or Email placement of your Countdown SmartBlock.
For Tactic, choose either One-off event, Repeating events, or Personalized.
The Tactic sets the data sources and product filters your SmartBlock uses. You can change these later.
Choose One Date, or Two Dates if you want to enter both a start and end date.
For Layout, choose a layout for your Countdown SmartBlock.
For Name and Save, enter a name for your SmartBlock, then choose a folder to store it in.
Select SAVE.

Personalized countdowns

In addition to selecting a particular date or time to count down to, the date picker fields also offer Jinja support. This lets you use person field values or Jinja calculations to create a countdown tailored to the person for whom the SmartBlock is being rendered.

For example, if the person is going on a holiday and their departure date is stored in a person.extend field, you could use the code below to merge in and count down to their specific departure date:

{{ person.extend.departure_date }}

or, if the value is stored as text:

{{ parseDate(person.extend.departure_date }}

Recurring countdowns

The recurring option allows for repeating countdowns without using Jinja.

To use this option:

Select the Repeating Event tactic, or use the Recurring Countdown switch on the Behavior tab.
On the Behavior tab, select Repeat Frequency from the drop-down menu.
Choose the initial start and end date and times, and when both have passed, the system automatically calculates the next recurrence.

For example, if you set the repeat frequency to Daily and the start date to today at 5pm, the countdown counts down to that time. As soon as 5pm has passed in the set time zone, it automatically updates the countdown to 5pm tomorrow.

Although Jinja values can be used in the start and end date fields, they are not included in the recurring option and are not automatically recalculated. However, the standard Jinja filter options are available, so recurrence can still be set up using those. This means that a three-stage countdown could have either the start or end date repeated with the other date dynamically generated using Jinja.

Time zone support

When you select a time zone for the countdown, it automatically converts the selected date and time to that time zone, so there's no need for manual conversions.

For example, to set a countdown for Halloween in California, specify the time zone as America/Los Angeles and set the date and time for midnight on October 31st. The countdown automatically adjusts for daylight savings time changes.

If a Jinja value is used in the date field, the time zone you set is disregarded.

Advanced: Layout creation and editing

If your SmartBlock settings don't achieve your desired outcome, you can modify the SmartBlock code by selecting the </> icon. Alternatively, you can create a new coded template layout for future use with SmartBlocks.

Learn more in Use the SmartBlock layout editor. If you need help, contact your Account Manager or the Services team.

Field naming in Countdown layouts

When creating or editing a Countdown layout, if you're adding options that only apply to certain steps rather than the entire countdown, you should label your new fields with the corresponding step (before, during, or after) at the beginning of the name. This ensures that these options are included in the SmartBlock when it is displayed.

For example, passing through the headline text for each stage is done by creating three fields:

beforeHeadline
duringHeadline
afterHeadline

During the rendering process, we calculate the current stage and expose the appropriate value in the layout as:

options.countdown.layout.headline

So, to access the text to show the step, you might use:

options.countdown.layout.headline.text

This means you can always access it consistently within the Jinja.

If you do not add the step, then that value is not exposed for use within the options.countdown object.

Everything within the named option is passed, so if you have a toggle controlling other fields, these sub-fields are automatically included regardless of their names. For example, the foreground color of a color field (with an ID of colors here) for the headline could be accessed as:

options.countdown.layout.headline.colors.foreground

Regardless of the step, the appropriate color would be used.

Global fields (those that do not relate to a specific step) can be accessed in the usual way:

fields.optionName

Additional attributes required for Countdown layouts

In addition to the imagecontainer class that should be added to all layouts, countdown timers require two additional attributes be added to the containing element:

data-smartblock-type="countdown"
data-smartblock-countdown-type="animated"

So you end up with something like this wrapped around your content area:

<div class='imagecontainer' data-smartblock-type='countdown' data-smartblock-countdown-type='animated'>

Advanced - Scripting for Countdown SmartBlocks

It's possible to access the countdown data in various ways using Jinja2 scripting. We advise that you start from one of the template layouts and make changes to suit your needs.

{{ options.countdown.text }}
The text entered in the form.
{{ options.countdown.text_time }}
A friendly version of the time remaining (or passed), for example, in a day, in an hour, a day ago.
{{ options.countdown|digitalClock}}
Digital clock version of the time in format dd:hh:mm:ss. Each part, including the separators, has a CSS class. These can be formatted to give different effects.
{{ options.countdown|digitalClock('DHM')}}
Digital clock also allows you optionally to pass in parameters. The first parameter determines the format of the countdown.
Current Options: DHMS, DHM, DH, D, HMS, HM, H, M (D = Days, H = Hours, M = Minutes, S = Seconds)
{{ options.countdown|digitalClock('DHM',{D:['Multiple Days','One Day','Zero Days'], H:['Multiple or Zero Hours','One Hour'], M:['All Minutes'] })}}
The second parameter sets custom captions for your formatted countdown.

To use the custom captions, you must pass in an object with the matching keys followed by an array. If there is one text value in the array, then this is used for all values of the key. If there are two text values, then the first is used for values greater than one, and zero; with the second text value being used for one only, for example, one day instead of one days. Finally, if there is a third value, that isused for if the value is 0. A Spanish example is shown below:
{{ options.countdown|digitalClock('DHM', {D: ['Días','Día'], H:['Horas','Hora'], M:['Minutos','Minuto'] }) }}
{{options.countdown.values._h|zfill(2)}}:{{options.countdown.values.m|zfill(2)}}:{{options.countdown.values.s|zfill(2)}}
HH:MM:SS
{% if options.countdown.started %}
Only include the following if the promotion has started.

{% set hours_left = options.countdown.values._h %}{% set has_started = options.countdown.started %}{% if hours_left < 24 and has_started %}Less than 24 hours left!{% endif %}

Only include the text alert if the promotion has ended.

To see what data is available, add this in the layout, inside the div with class imagecontainer:

{{ options.countdown| stringify }}

Parse date

Converts any date string into a Javascript Date object: {{parseDate('Dec. 25. 2020', 'MMM. DD. YYYY')}}

Result: Fri Dec 25 2020 00:00:00 GMT+0000 (GMT)

Tokens show how the date string is formatted:

D - Day: 1, 2, 3
DD - Day: 01, 02, 03
Do - Day: 1st, 2nd, 3rd
M - Month: 1, 2, 3 .. 11, 12
Mo - Month: 1st, 2nd, 3rd ... 11th, 12th
MM - Month: 01, 02 ... 11, 12
MMM - Month: Jan, Feb ... Nov, Dec
MMMM - Month: January, February ... November, December
YYYY - Year: 2016, 2017
YY - Year: 16, 17

Examples: 07.03.2016 = 'DD.MM.YYYY' March, 10th 2020 = 'MMMM, Do YYYY'

Advanced - Merging

URL pass-through

You can allow variables to be passed through from the originating URLs, and made available inside the {{ merges }} object.

You can use this in the Text or URL fields in any of the stages of the countdown. To allow the query string value to be passed through, you must add the query string key to the Merge Parameters input.

Example

For example, you might want to include an individual offer code in both the During Promotion text, and in the URL that the customer is sent to.

The word code is just an example; you can choose any name, or use several names and pass in several values.

On the Properties tab, under Merge Parameters, add a new merge parameter of code.
On the Design tab, expand the During Event section and add {{ merges.code }} to the appropriate text field.
On the Links tab, include {{ merges.code }} in the During Event Link URL field.
You can now add the code query string parameter in any URLs used to access the SmartBlock.

Merge countdown time values from the person record

You can use values from the person record or the URL to set the dates for the countdown.

To do this, the personalization checkbox on the person record must be checked.

Example

To use a value stored in person.extend.field in the person record for the start date of a countdown, on the Properties tab, include {{ person.extend.anniversary|addDays(30) or getDate()|addDays(30)}} in the text field.

In this example, if there is no value set in the anniversary field, the countdown will default to 30 days from now.

Date/time calculations

You can manipulate the current date/time to control the start and end times of countdowns.

Get the current date

To get the current date/time, use {{ getDate() }}. This can be combined with the following manipulations:

date|addDays(days) - Add a number of days to a Date instance.
date|addHours(hours) - Add a number of hours to a Date instance.
date|addMinutes(minutes) - Add a number of minutes to a Date instance.
date|addYears(years) - Add a number of days to a Date instance.
date|setDate(days) - Set the date on the input date.
date|setHours(hours) - Set the hour on the input date.
date|setMinutes(minutes) - Set the minutes on the input date.
date|setMonth(month) - Set the month (0 = January, 1 = February, and so on) on the input date.
date|setYears(years) - Set the year on the input date.
date|isAfter(referenceDate) - Returns true if the date is after the reference date.
date|isBefore(referenceDate) - Returns true if the date is before the reference date.
date|nextTimeOfDay(time) - Returns the next date and time, matching the supplied time of day, today or tomorrow.
For example, if date is 2001-01-01 17:00 and time is 16:00, 2001-01-02 16:00 is returned.
date|timeOfDay(time) - Returns the date and time today, matching the supplied time of day, which may be in the recent past.
For example, if date is 2001-01-01 17:00 and time is 16:00, 2001-01-01 16:00 is returned.

Example: countdown to a daily delivery cutoff

This returns the next instance of 4pm; today if the current time is before 4pm, 4pm tomorrow if the current time is after 4pm. This can be used as the countdown end date.

{{ getDate()|nextTimeOfDay('16:00') }}

All times in UTC.

Opening hours Countdown SmartBlocks

Opening hours Countdown SmartBlocks count down to closing time when offices are open, or to opening time when offices are closed.

Use {{ getDate | openingHours(openHours, type, options) }} in the start date and end date to create an opening hours Countdown SmartBlock.

The filter takes the following parameters:

openHours: In the form 'HHMM-HHMM', such as '0900-1700'.
Times are processed as UTC (GMT) time.

type:
- Use start for the start date
- Use end for the end date
options: An array of optional parameters.
Available options are: includeSaturday, includeSunday, excludedDates

Example: Open on Saturdays and Sundays

Start date:
{{ getDate() | openingHours('0900-1800', 'start', {includeSaturday: true, includeSunday: true} ) }}

End date:
{{ getDate() | openingHours('0900-1800', 'end', {includeSaturday: true, includeSunday: true} ) }}

Example: Closed on several bank holidays

Start date:
{{ getDate() | openingHours('0900-1700', 'start', {excludeDates: ['2015-08-31','2015-12-25','2015-12-28']} ) }}

End date:
{{ getDate() | openingHours('0900-1700', 'end', {excludeDates: ['2015-08-31','2015-12-25','2015-12-28']} ) }}

Banner SmartBlocks

Cart and SmartBlock layout functions

Only the seconds tick down in a Countdown SmartBlock

Use the SmartBlock layout editor

Create and edit a SmartBlock