Build an HTML Countdown Action for a Cart Page

Recent updates to Safari Intelligent Tracking Prevention (ITP) block third-party cookies on your site. This update means that Preview Mode and the Monetate Inspector browser plug-in may not work in Safari. Monetate has developed an alternative approach to delivering preview mode to the site. To have this option enabled for your account, submit a support ticket using the Monetate Technical Support portal (support.monetate.com).

No workaround is available at this time for the Monetate Inspector tool. Monetate recommends using a different browser such as Chrome if you need to use Monetate Inspector.

An HTML Countdown action on the cart page of your site can help you to increase your overall conversion rate by creating a sense of urgency in an experience. Ultimately, if you minimize the number of people who leave your site on the cart page, then you're more likely to get them to convert (or complete their purchase) for what is already in the cart.

For the purpose of this example, the experience targets all site visitors with a promotion for free shipping that expires at the end of the day on Black Friday. The HTML Countdown action counts down the remaining time until the promotion expires.

This example uses the HTML version of this action instead of the image-based version because it tends to be more compatible with both desktop and mobile devices. If you decide to use an image-based countdown action, ensure that your creative is mobile-friendly to avoid any rendering issues.

Building the Countdown Timer Action

Follow these steps to build the action.

  1. Click COMPONENTS in the top navigation bar and then select Actions.

    Callout of the Actions option in the COMPONENTS menu

  2. Click CREATE ACTION.

    Callout of the CREATE ACTION button on the Actions list page

  3. After Action Builder loads on your site, navigate to the cart page. In Action Builder click the Countdown Timers tab, and then click HTML Countdown.

    View of the Countdown Timers tab in Action Builder

  4. Use Element Selector to identify where on the page you want to insert the HTML Countdown action. For the purpose of this example, the action should be inserted below the sticky navigation. This animation demonstrates how Element Selector works in Action Builder. See Element Selectors for more information.

    Animated demonstration of a user selecting the sticky navigation on the cart page of a retailer's site

  5. On the Details tab, select After from Insert Method.

    Callout of the Insert Method selector on the Details tab of Action Builder

  6. Use the calendar to configure the action to count down until the end of the day on Black Friday.

    Callout of the End Time calendar and time selector on the Details tab of Action Builder

  7. Leave Countdown mode set to GMT - one deadline, toggle Show zero values to NO, and then leave Hide banner if expired set to YES.

    View of the Details tab in Action Builder, with the 'Countdown mode' selector set to 'GMT - One Deadline,' the 'Show zero values' toggle set to 'NO,' and the 'Hide banner if expired' toggle set to 'YES'

  8. Toggle Re-check for elements to YES, and leave Pad single digits set to NO.

    View of the Details tab in Action Builder, with the 'Re-check for elements' toggle set to 'YES' and the 'Pad single digits' toggle set to 'NO'

  9. Click the HTML tab and, if necessary, click Source in the editor to revise the countdown banner text. The following HTML code is specific to this example. 
    <section class="mt-cat-banner">
  <div class="mt-cat-banner__countdown">
    <p class="mt-cat-banner__pre-header">Time is running out!</p>
    {{DAYS} day[s],} :{{HOURS} HOUR[S]} <span class="mt_colon">:</span> {{MINUTES} MINUTE[S]}
    <span class="mt_colon">:</span> {{SECONDS} SECOND[S]}
  </div>
  <h3 class="mt-cat-banner__heading">Free Shipping On All Orders</h3>
  <h3 class="mt-cat-banner__subcopy"><span class="mt-cat-banner__code">OVERSIZED ITEMS EXCLUDED | CODE: <strong class="promo-code">BLACKFRIDAY</strong></span></h3>
</section>

    The HTML tab of Action Builder, with the WYSIWYG view of the default countdown text and a callout of the Source button in the HTML editor

  10. Click the Styles tab to add the following code to the CSS editor.

    You can style the HTML Countdown action to suit the look and feel of your site. The CSS code here is just an example of what you can do.

    .mt_countdown {
  display: block;
  margin-left: -10px;
  margin-right: -10px;
  position: relative;
  z-index: 1;
  text-align: center;
  color: black;
  padding-top: 20px;
  padding-bottom: 20px;
}

@media screen and (min-width: 768px) {
  .mt_countdown {
    margin-left: auto;
    margin-right: auto;
  }
}

/*Hides the plural parameter on any suffixes when counting down.*/

.mt_countdown .mt_hide_plural {
  display: none;
}

.mt-cat-banner {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #f4f4f4;
  background-image: url("{{BKG_URL}}");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: #000;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  height: 160px;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin: 0 auto;
  max-width: 1240px;
  position: relative;
  text-align: center;
  width: 100%;
}

body.cms-home section.mt-cat-banner {
  max-width: 100% !important;
}

@media screen and (min-width: 768px) {
  .mt-cat-banner {
    height: 200px;
  }
}

.mt-cat-banner__countdown {
  display: block;
  position: relative;
}

.mt-cat-banner__countdown::before,
.mt-cat-banner__countdown::after {
  border: 1px solid black;
  content: "";
  display: block;
  height: 90%;
  position: absolute;
  top: 55%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  width: 8px;
}

@media screen and (min-width: 768px) {
  .mt-cat-banner__countdown::before,
	.mt-cat-banner__countdown::after {
    height: 80%;
  }
}

.mt-cat-banner__countdown::before {
  border-right: none;
  right: 105%;
}

.mt-cat-banner__countdown::after {
  border-left: none;
  left: 105%;
}

.mt-cat-banner__countdown .mt_time {
  font-family: 'MaisonNeueBook';
  font-size: 22px;
  font-weight: 400;
  position: relative;
}

@media screen and (min-width: 768px) {
  .mt-cat-banner__countdown .mt_time {
    font-size: 26px;
  }
}

.mt-cat-banner__countdown .mt_tickerElem {
  display: inline-block;
  min-width: 28px;
  position: relative;
  text-align: center;
}

@media screen and (min-width: 768px) {
  .mt-cat-banner__countdown .mt_tickerElem {
    min-width: 34px;
  }
}

.mt-cat-banner__countdown .mt_suffix {
  bottom: -4px;
  display: block;
  font-size: 6px;
  font-weight: 700;
  left: 50%;
  position: absolute;
  text-transform: uppercase;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

@media screen and (min-width: 768px) {
  .mt-cat-banner__countdown .mt_suffix {
    bottom: -2px;
  }
}

.mt-cat-banner__countdown .mt_colon {
  font-size: 12px;
  font-weight: 400;
  position: relative;
}

.mt-cat-banner__pre-header {
  display: block;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.5px;
  margin: 0;
  padding: 0;
  text-transform: uppercase;
  top: -5px;
  width: 100%;
  z-index: 1;
}

@media screen and (min-width: 768px) {
  .mt-cat-banner__pre-header {
    font-size: 10px;
  }
}

.mt-cat-banner__heading {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: 2.5px;
  margin: 0;
  margin-bottom: 5px;
  margin-top: 15px;
  padding: 0;
  text-transform: uppercase;
}

@media screen and (min-width: 768px) {
  .mt-cat-banner__heading {
    font-size: 48px;
  }
}

.mt-cat-banner__subcopy {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.5px;
  margin: 0;
  padding: 0;
}

@media screen and (min-width: 768px) {
  .mt-cat-banner__subcopy {
    font-size: 15px;
  }
}

.mt-cat-banner__message {
  display: inline-block;
  margin: 0;
  padding: 0;
}

.mt-cat-banner__code {
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  margin: 0;
  padding: 0;
  position: relative;
  text-transform: uppercase;
}

/*.mt-cat-banner__code::before {
  content: "|";
  display: inline-block;
  padding-left: 6px;
  padding-right: 10px;
  position: relative;
}*/

.mt-cat-banner__code .promo-code {
  font-weight: 700;
  letter-spacing: 1px;
  margin: 0;
  margin-left: 3px;
  padding: 0;
}

    View of the CSS editor on the Styles tab of Action Builder

  11. Define the conditions for when the action should fire.
    1. Use the Monetate Inspector browser plugin to verify that cart is the page type for the site's cart page.

      View of the Monetate Inspector browser plug-in, with a callout of the 'cart' value in the 'Page Type' row

    2. Click the Conditions tab in Action Builder, click ADD CONDITION, expand Page type, and then select Page type=. Type cart as the value, and then press Enter.

      The Conditions tab, with an action condition equation of 'Page type equals cart'

    3. Because the action shouldn't fire when the cart is empty, create a second action condition. Click ADD CONDITION, expand Cart Value, and then select Cart Value ≥. Type 0.01 as the value, and then press Enter.

      View of the Conditions tab, with a 'Page type equals cart' action condition and a 'Cart value is greater than or equal to one cent' action condition that are joined by AND logic

  12. Click the Inputs tab to define which action fields and settings can be configured at the experience level.

    If you create an action that has a very specific use case that you don't want someone on your team to alter, then click to deselect those fields and settings that you want locked.

    View of the Inputs tab of Action Builder

  13. Give the action a title, description, and subcategory. Click CREATE & EXIT.

    View of the final panel of Action Builder, with HTML selected as the category

Refer to Details Tab for Countdown Timer Actions in Customize an Action as well as HTML Countdown Action for more information about creating an HTML countdown in Action Builder.

Building the Experience

Follow these steps to build a Web experience to deploy the free shipping promotion countdown timer.

For this use case, the experience tests if the countdown timer has a positive impact on the conversion rate.

  1. Click EXPERIENCES in the top navigation bar, and then select Web.

    Callout of the Web option in the EXPERIENCES menu of the top navigation bar

  2. Click CREATE EXPERIENCE.

    Callout of the CREATE EXPERIENCE button on the Web Experiences list page

  3. Click WHY, select STANDARD TEST, and then click NEXT.

    Callout of the WHY settings, the STANDARD TEST option, and the NEXT button

  4. Select Conversion Rate for the goal metric and then click NEXT.

    Animated demonstration of a user selecting the 'Conversion rate' option for step 2 of the WHY settings for a Standard Test experience and then clicking the NEXT button

  5. Adjust the secondary metrics as needed and then click NEXT.

    As a best practice, collecting more data is better than collecting less data. Avoid removing secondary metrics unless there's a specific reason you don't need them. Add any custom metrics that are important to your business as well.

    Step 3 of the WHY settings for a Standard Test experience, with a callout of the NEXT button

  6. Confirm that you have configured the WHY settings as you need, and then click SAVE.

    Step 4 of the WHY settings for a Standard Test experience, with a callout of the SAVE button

  7. The experience targets all site visitors, so don't change the WHO settings.
  8. Click A of the WHAT settings, and then click ADD ACTION.

    Callout of the WHAT variant A field and of the ADD ACTION button

  9. Click HTML.

    Callout of the HTML option on the Action Type panel of the WHAT settings

  10. Click the HTML Countdown action that you created.

    Example of the HTML panel of the WHAT settings

  11. If you configured all the action settings in Action Builder specifically for the experience, then you don't need to make any experience-level changes or add any additional action conditions. Scroll to the bottom and then click CREATE.

    Callout of the CREATE button on an HTML countdown timer action template

Testing the Experience

Because the action is configured with an action condition that doesn't work as expected in Preview Mode, perform a quality assurance check to ensure the action works as expected before you configure the WHEN settings.

See Preview Mode Limitations for more information.

To circumvent the Preview Mode limitation for this experience, follow these steps to temporarily change the experience's target using the IP address option and then activate the experience to test it.

  1. Click WHO and then click ADD TARGET.

    Callout of the WHO settings and the ADD TARGET button

  2. Click Location.

    Callout of the Location option on the Target Type panel

  3. Click IP address.

    Callout of the IP address option

  4. Input your IP address into the IP Address field, leave visitors matching this target set to INCLUDE, and then click SAVE.

    The IP address must be in the IPv4 format (x.x.x.x) and cannot include wildcards. To verify your IP address, you can type What is my IP address? into Google search to obtain it.

    The IP Address WHO target, with an IP address entered in the IP Address field and a callout of the SAVE button

  5. Click ACTIVATE.

    Callout of the ACTIVATE button

After you activate the experience, open your site in a private browser window and then add one or more products to your cart.

Next, navigate to the cart page. If you configured the HTML Countdown action and the experience correctly, then you should see the countdown timer.

Callout of the HTML countdown timer on the cart page of a retailer's site

After you confirm that the action and experience fired as expected, return to the Experience Editor page in the Monetate platform, click PAUSE for the experience, and then remove the IP address target from the WHO settings.

Scheduling the Experience

Follow these steps to configure the WHEN settings to deploy the experience to all site visitors.

  1. Click WHEN and then click START AND STOP TIME.

    Callout of the WHEN settings and the START AND STOP TIME option

  2. Configure Start date and Start time so that the experience starts for as long as you want the promotion to run before it expires at the end of the day on Black Friday. Then select Specific end date.

    Callout of the 'Start Experience' settings configured to 12:01 AM on 1 November 2024 and a callout of the 'Specific end date' option

  3. Configure End date and End time for 11:59 PM on Black Friday.

    Callout of the 'End Experience' settings configured to 11:59 PM on Black Friday

  4. No day parting settings are required, so leave Time Zone Context set to NONE, and then click SAVE.

    Callout of the SAVE button for the WHEN settings

  5. Click ACTIVATE.

    Callout of the ACTIVATE button

The experience is now set to go live on the scheduled date at the scheduled time.

Related Articles