How to use the timer widget | Shopify

The timer widget is available on all pages in ReConvert. Its behavior may vary slightly based on where and how it is added.

The timer widget can be added:-

• as a standalone widget

• or as a block within another widget* (not available on the Post Purchase pages)

Default blocks of the widget

Each timer widget is made up of four blocks, each will be covered in detail, so you can skip to the section of this helpdesk article that you are interested in learning more about:

1. Timer - main settings governing the widget (covered in detail below)
2. Text - lets you add a custom message around the widget
3. Clock - settings relating to the digits of the timer itself
4. Progress bar - optional visual timer

1. Timer block settings

This block controls the main behavior of the timer itself.

Timer settings

Start timer - here you choose when you wish the timer's clock to begin

• Once per session/order - will be shown once per session (if on checkout) / once per order (if on Thank You or Order Status pages)
• Once per customer - even if the customer comes back and reaches this page again after meeting a Flow Builder condition, since they've already been shown the timer, they won't be shown it again (this can be useful for new customer offers for example)
• Restart on every impression - e.g. a refresh of the page will regenerate the offer

Timer affects - here you choose whether you want the settings you are inputting to apply to all widgets on the page or whether only to apply to the specific widget(s) you specify.

• All widgets on the page

• Specific widgets → opens a checkbox where you can choose one or more specific widgets to which this timer setting will apply on the page

When timer runs out - choose what happens to widgets, discounts, buttons, and customer progress when the timer expires

• Remove widgets - this will completely remove the widget (either the entire widget that the timer is part of if it is a block within a widget, or if it is a standalone widget, the timer itself will disappear)

• Remove discount - this will simply not allow the customer to purchase the item at the discount. However, they will still be able to proceed with the purchase without the discount

• Disable all buttons - this will block the customer from being able to add the product to cart

• Do nothing - this will simply expire the timer and allow progression to the next stage (including allowing any offer/discount to be accepted even post-expiry)

Duration

Count type - here you select your chosen method of counting, whether time remaining or to a specific time and date

• Time remaining (e.g. 5 mins left).

If you select time remaining a new dropdown will display. here you will enter the specified expiry date in days, hours, minutes and seconds

On the Thank You and Order Status pages, you’ll see an additional option to set when the countdown starts:

i) from the first page impression; or

ii) from the time the order was completed

• To a specific time and date

If you prefer, you can select a specific time and date that the offer will expire

Selecting this option will reveal a calendar field where you can select the exact date, month, year, hour and minute that the offer will expire

Design options

The design section of the timer contains aspects relating to how your timer will appear to your customers.

Timer style - here you have the option to select the style of the timer out of:- i) promotional, ii) banner, or iii) simple

• Promotional - the default and most widely used timer option. This will allow you to add text within the block (see below)

• Banner - similar to promotional but with an added element of an exclamation mark and slightly more subtle

• Simple - a scaled-back version of our timer widget

Layout - here you have the option to orient your timer in horizontal (landscape, default) or vertical (portrait).

Background options - here you are able to select the background of the timer widget

• Subdued (default) - subdued gives a blended color
• Transparent - transparent shows theme background
• Base - base pulls the theme’s base color

Border style - this will allow you to decide how the border of the timer widget appears

• none
• base
• dashed
• dotted

Border radius (Thank You / Order Status pages only) - controls how rounded the timer’s border appears.

Timer expired settings

Timer expired settings allow you to preview how the widget will look when expired. You can toggle between previewing the active offer and previewing what is displayed when the offer expires.

2. Clock block

Settings

This block styles the timer digits.

Clock background - this is where you set the background for the clock element itself.

• Subdued (default) - subdued gives a blended color
• Transparent - transparent shows background of the layer behind (e.g. here, the main widget colour that you set in Timer Block settings (Design section) above)
• Base - base pulls the theme’s base color

Digit color - this is where you set the color of the digits within the clock element itself

• Set your preferred color. You can choose between:-

i) info (by default, black)

ii) subdued (by default, grey)

iii) accent (by default, blue)

iv) critical (by default, red)

v) success (by default, green)

vi) warning (by default, brown)

Clock title - this is a toggle on/off to show a label above the clock. Full formatting is available.

Clock frame - here you can decide how to frame your clock's digits

• individual frames (one per unit)
• single frame (around whole clock)
• none - no frame around the clock

Frame border - here you can decide the style of the border's frame

• none - the digits will exist without a frame
• base - a standard border frame
• dashed - a dashed border frame
• dotted - a dotted border frame

Frame border radius - here you can select differences in the curvature of the frame. (None, base, small, and large are based on varying degrees of softness of a square frame, whereas fully rounded is a circular frame entirely)

• none - standard square frame(s) will apply
• base - a slight curve will soften the edges of your clock's frame(s)
• small - a slightly more 'pulled-in' curve than base to further soften the edge of your clock's frame(s)
• large - a slightly more pulled-in curve than small to further soften the edge of your clock's frame(s)
• fully rounded - full rounded frames instead of square frames

Show time separator -> toggle to show : between units

Show time unit labels -> toggle to show unit labels (e.g. days, hours, mins and secs). If this is toggled on a new option with settings will appear called time unit labels

Time unit labels

• Labels - Here you can amend the text that is shown for days hours minutes and seconds
• Unit labels' position - choose whether these labels appear above or below

• **Show unit labels inside or outside frame - a toggle to move the unit labels within the digits' frame

💡 Top tip: This is a really simple way to communicate with your customers in an alternative language - simply change the unit labels to your desired language!

Timer expired settings

Here you choose what happens to the timer once it expires

When timer ends:

• Replace clock with custom text

• Keep expired clock visible (e.g. 00:00)

• Remove the clock entirely

• You can preview your changes by clicking the preview active offer / preview expired offer button

3. Text block settings

Text - This is a text box where you can add messaging around the timer, with formatting options.

Background - select the background you wish for this element of the widget

• Subdued (default) - subdued gives a blended color
• Transparent - transparent shows background of the layer behind (e.g. here, the main widget colour that you set in Timer Block settings
• Base - base pulls the theme’s base color

Text in frame - Toggle on/off to frame/unframe the text

If you toggle on, the following additional options will appear:-

Frame border - here you can decide the style of the border's frame

• none - the text will exist without a frame
• base - a standard border frame
• dashed - a dashed border frame
• dotted - a dotted border frame

Frame border radius - here you can select differences in the curvature of the frame of the text. (None, base, small, and large are based on varying degrees of softness of a square frame, whereas fully rounded is a circular frame entirely)

• none - a standard square frame will apply
• base - a slight curve will soften the edges of your text's frame
• small - a slightly more 'pulled-in' curve than base to further soften the edge of your text's frame
• large - a slightly more pulled-in curve than small to further soften the edge of your text's frame
• fully rounded - a full rounded frame instead of a square frame

Timer expired settings

• Toggle on 'replace text when timer runs out' opens a second editable text field to replace original text after expiry
• You can preview the expired text and toggle back

4. Progress bar block

This gives your customers a visual aid underneath the digits so they can see how much time they have left before the offer expires. This can create an additional sense of urgency among your customers.

Show progress bar - Toggle to display

Progress bar color - here you can set the color of the progress bar:-

• Auto (usually blue)
• Critical (usually red)

Timer expired settings

When timer runs out:

• Keep bar visible (full)
• Change color (auto ↔ critical) → dropdown appears
• Remove progress bar entirely

• You can preview the expired text and toggle back

Need more help?

If you get stuck, our support team is here for you 24/7. Just click the chat icon in the bottom right of this page.

Updated on: 15/07/2025