Counter Properties

The Counter content block lets you add a countdown timer to your campaign. A counter can display values such as hours, minutes, and seconds, helping create urgency around a promotion, offer, or deadline.

The Counter has two levels of customization:

  • Counter Properties — control the overall counter.
  • Counter Item Properties — customize the individual numbers and labels displayed in the counter.

For an overview of adding and managing components, see Working with Components.

Counter Properties

To configure the counter, select the Counter element on the canvas.

Visibility

Choose where the counter should appear:

  • Desktop
  • Mobile

You can enable or disable each option independently.

For more information about component visibility, see Popup Design Settings.

Actions

Use Actions to define what happens when a visitor interacts with the counter.

Available actions include:

  • Do Nothing
  • Change step
  • Go to URL
  • Go to URL and show this step's sticker
  • Show this step's sticker
  • Reopen this step from sticker
  • End this campaign

For more information about configuring interactions, see Configuring Element Actions.

Text Styling

You can customize the overall counter text using:

  • Color
  • Font
  • Weight
  • Style
  • Text alignment

For more information about typography, see Typography and Text Styling.

Background

Use Solid Color to add a background color to the counter.

For additional background customization, see Background and Visual Styling.

Borders

Customize the counter border with:

  • Radius
  • Width
  • Style
  • Color

Available border styles include:

  • None
  • Solid
  • Dashed
  • Dotted
  • Double

For more information about visual styling, see Background and Visual Styling.

Size

Adjust the counter's:

  • Height
  • Width

You can also use:

  • Full height
  • Adjust height to content
  • Full width
  • Adjust width to content

For more information about layout and sizing, see Managing Rows and Layout.

Layout

Use the layout settings to control how the counter is arranged.

You can adjust:

  • Order
  • Vertical alignment
  • Horizontal alignment

These settings help position the counter content within its available space.

For more information, see Managing Rows and Layout.

Counter Item Properties

Each part of the counter can be customized individually. For example, the number and its label can have different styles.

To edit an individual counter item:

  1. Select the Counter on the canvas.
  2. Click the specific counter item, such as Seconds.
  3. The Counter Item Properties panel opens.
  4. Adjust the item's typography, appearance, and size.
Navigating Counter Item Properties

Edit the Number

Select the number displayed in the counter to customize its appearance.

For example, you can select 08 in a seconds counter and adjust:

  • Color
  • Font
  • Weight
  • Style
  • Size
  • Spacing
  • Line Height
  • Text alignment

This allows the countdown numbers to stand out from their labels.

Navigating Counter Item

Edit the Label

You can also select the text label below each number, such as:

  • Hours
  • Minutes
  • Seconds

Edit the label's typography independently from the number.

For example, you can make the number large and bold while keeping the Seconds label smaller and lighter.

Counter Label Properties

Item Background and Borders

Individual counter items can also have their own visual styling.

You can configure:

  • Background color
  • Border radius
  • Border width
  • Border style
  • Border color
  • Shadow

This allows you to create separate visual blocks for each counter value if desired.

For more styling options, see Background and Visual Styling.

Item Size

Adjust the Height and Width of individual counter items.

Available options include:

  • Full height
  • Adjust height to content
  • Full width
  • Adjust width to content

Use these settings to control the amount of space each counter item occupies.

For general layout controls, see Managing Rows and Layout.

Example

Example

A countdown can be structured like this:

09 : 04 : 32

hours · minutes · seconds

You can customize the 09, 04, and 32 separately from the hours, minutes, and seconds labels.

Tip: Use a larger font size and stronger weight for the countdown numbers, while keeping the labels smaller. This creates a clear visual hierarchy and makes the remaining time easy to understand.

Best Practices

When using a counter in your campaign:

  • Make the remaining time easy to read.
  • Use a clear visual hierarchy between numbers and labels.
  • Choose colors that provide sufficient contrast.
  • Avoid making the counter too large for smaller screens.
  • Check the counter on both desktop and mobile.
  • Use countdowns for genuine deadlines or time-sensitive offers.
  • Combine counters with clear promotional messaging and calls to action.

For promotional campaigns, see Promote Products & Special Offers.

Frequently Asked Questions

What is the Counter component used for?

  • The Counter component adds a countdown timer to your campaign. It can be used to create urgency around promotions, sales, events, or other deadlines.

How do I configure the countdown?

  • Select the Counter on the canvas and configure its countdown settings in the Counter Properties panel.

Can I customize the numbers and labels separately?

  • Yes. You can select individual counter items and customize their typography, size, spacing, background, borders, and other available settings.

Can I show the counter only on mobile or desktop?

  • Yes. The visibility settings allow you to enable or disable the counter for Desktop and Mobile.

Can I add an action to the Counter?

  • Yes. You can configure available Actions for the counter, such as changing a campaign step, opening a URL, showing a sticker, or ending the campaign. For more information, see Configuring Element Actions.

Related Articles

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.