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.
On the Post Purchase page, it must be added as a standalone widget. A separate article has been made for the widget on the post purchase page.. The current article will not address the widget as it exists on the post purchase page. You may also notice slight differences in default settings or available options depending on the page as we release new features.
The timer widget can be added:-
as a standalone widget
or as a block within another widget
Each timer widget is made up of four blocks:
Timer - main settings governing the widget (covered in detail below)
Text - lets you add a custom message around the widget
Clock - settings relating to the digits of the timer itself
Progress bar - optional visual timer
Depending on the page you are on, the blocks of the widget may be in a different order, but you can easily drag and drop these using the left-hand menu's drag and drop functionality.
This block controls the main behavior of the timer itself.
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
🔁 Important note:
If settings on different timers conflict, instructions are followed chronologically.
Example:
Timer A is set to 6 mins and is set to apply to all widgets, removing them all
Timer B is set to 10 mins and is set to only apply to itself and to do nothing upon expiry
→ Result: Timer A activates first after 6 mins, removing all widgets from display. Therefore, Timer B is overridden and any settings therein are disregarded.
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)
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
This is particularly useful for seasonal offers like Boxing Day, Black Friday, Cyber Monday, etc.
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
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
Borders are more visible on your live site than shown in the preview panel
Border radius (Thank You / Order Status pages only) - controls how rounded the timer’s border appears.
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.
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)
Shopify Plus users with 3rd-party apps may have advanced options to change these colors (though this is outside the scope of this support article or support in general)
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
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!
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
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
If subdued and transparent look the same in the GIF, it's due to your theme being gray
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
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
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.
Note:- If you selected the timer style above to be a simple timer then you will not be able to add a progress bar
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
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.
📢 Check out our YouTube channel for tutorials, walkthroughs, and new feature demos - Subscribe here
🙏 Love ReConvert? It means the world to us if you leave a review on the Shopify app store
📧 Found a bug or typo in this guide? Let us know at care@stilyoapps.com
On the Post Purchase page, it must be added as a standalone widget. A separate article has been made for the widget on the post purchase page.. The current article will not address the widget as it exists on the post purchase page. You may also notice slight differences in default settings or available options depending on the page as we release new features.
The timer widget can be added:-
as a standalone widget
or as a block within another widget
Default blocks of the widget
Each timer widget is made up of four blocks:
Timer - main settings governing the widget (covered in detail below)
Text - lets you add a custom message around the widget
Clock - settings relating to the digits of the timer itself
Progress bar - optional visual timer
Depending on the page you are on, the blocks of the widget may be in a different order, but you can easily drag and drop these using the left-hand menu's drag and drop functionality.
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
🔁 Important note:
If settings on different timers conflict, instructions are followed chronologically.
Example:
Timer A is set to 6 mins and is set to apply to all widgets, removing them all
Timer B is set to 10 mins and is set to only apply to itself and to do nothing upon expiry
→ Result: Timer A activates first after 6 mins, removing all widgets from display. Therefore, Timer B is overridden and any settings therein are disregarded.
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
This is particularly useful for seasonal offers like Boxing Day, Black Friday, Cyber Monday, etc.
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
Borders are more visible on your live site than shown in the preview panel
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)
Shopify Plus users with 3rd-party apps may have advanced options to change these colors (though this is outside the scope of this support article or support in general)
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
If subdued and transparent look the same in the GIF, it's due to your theme being gray
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.
Note:- If you selected the timer style above to be a simple timer then you will not be able to add a progress bar
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.
📢 Check out our YouTube channel for tutorials, walkthroughs, and new feature demos - Subscribe here
🙏 Love ReConvert? It means the world to us if you leave a review on the Shopify app store
📧 Found a bug or typo in this guide? Let us know at care@stilyoapps.com
Updated on: 01/06/2025
Thank you!