How does the Product Page Timer work in the Countdown Timers in the ToastiBar app?

The Product Page Timer is a powerful tool designed to create a sense of urgency and encourage faster purchasing decisions by displaying a countdown timer directly on your product pages. This feature is perfect for limited-time offers, flash sales, daily deals, or any promotional campaigns where time sensitivity can influence buyer behavior.
With customizable design and flexible timer settings, you can easily tailor the countdown to match your store’s style and marketing goals.
Key Benefits:
Increase urgency and drive impulse purchases
Highlight time-sensitive promotions
Customizable to fit your brand’s look and feel
Works seamlessly on all product pages
In this guide, we’ll walk you through how to enable, configure, and make the most of your Product Page Timer to boost sales and enhance customer experience.
Content
Status

The Status option allows you to publish or unpublish the Product Page Timer on your product pages.
Published: The timer will be visible on the product page based on the conditions you’ve set.
Unpublished: The timer will be hidden and won’t appear on the storefront, but your settings will be saved for future use.
Timer Settings

The Timer Settings section allows you to define the core content that appears along with the countdown timer on your product page. This is where you can set the name for internal use and customize the main heading and subheading that your customers will see.
Timer Name
This is an internal name for your reference only. It won’t be visible on your storefront. Use a descriptive name to easily identify the purpose of the timer — for example, “Black Friday Sale” or “Limited Stock Countdown.”
Title
This is the main heading displayed above the countdown timer on your product page. Use this space to grab the shopper’s attention and highlight the urgency. For example, “Hurry up!”.
Subheading
You can add an optional subheading below the title to provide more context or a supporting message. For example, “Offer ends in”.
Timer Labels

Customize the labels that appear below each time unit in your countdown timer. This helps ensure the timer aligns with your store’s tone, language, and branding.
Days Label
The label is shown below the Days section of the timer.
Example: Days, Días, D
Hours Label
The label is shown below the Hours section of the timer.
Example: Hours, Hrs, Heures
Minutes Label
The label is shown below the Minutes section of the timer.
Example: Minutes, Min, Minuten
Seconds Label
The label is shown below the Seconds section of the timer.
Example: Seconds, Sec, Segundos
Timer Type

The Timer Type setting lets you choose how your countdown behaves on the product page. You can decide whether the timer ends at a specific calendar date or runs for a fixed duration per visitor session.
Specific Date
Use this option to set a timer that counts down to a specific date and time — perfect for flash sales, holiday promotions, or any limited-time offer. For example, the Timer ends on May 31, 2025, at 11:59 PM.
Fixed Minutes
Choose this option to show a countdown based on each visitor’s session, such as a 15-minute or 30-minute timer. The timer starts fresh for every new visitor or session. For example, the Timer starts at 15 minutes and counts down once a user lands on the product page.
Timer Behaviour (For Specific Date)
The Timer Behavior settings let you control when your countdown timer starts and ends, and what happens after it finishes. This gives you full flexibility to align the timer with your promotional campaigns.
Timer Starts

RIght Now
The timer starts immediately upon activation or publishing. Great for spontaneous sales or flash deals.
Schedule Later
Set a future date and time for the timer to start. Ideal for pre-planned campaigns like product launches or holiday events.
Timer Schedule

Start Date [Associated with Schedule Later]
Choose the calendar date for the timer to begin.
Start Time [Associated with Schedule Later]
Set the specific time (in UTC) the countdown should start.
End Date
Select when the countdown ends.
End Time
Set the exact time the countdown should stop.
Timer Behaviour (For Fixed Minutes)
When you select Fixed Minutes as your Timer Type, the countdown is session-based — meaning it starts fresh for every new visitor. The behavior settings in this mode are simplified to focus on duration.
Countdown Duration

Set how long the countdown should run for each visitor session.
Minutes
Enter the number of minutes you'd like the timer to run. For example, setting this to 15 will show a 15-minute countdown every time a customer lands on the product page.
Action After Timer Ends

Decide what should happen when the countdown reaches zero.
Hide timer for the buyer:
The timer will disappear from the product page once it ends.
Reset Timer [Associated with Fixed Minutes]
The timer automatically restarts from the original countdown duration for each session.
Display a message:
Replace the timer with a custom message to inform customers that the promotion has ended or to guide them to another offer.
Message
Write the message that will appear after the timer ends. For example, "Oops! This offer has expired. Stay tuned for our next deal!"
Design
Background Settings
Background Color

Choose the background color for the countdown timer container to match your store's branding and style.
Use the color picker or enter a HEX code (e.g., #FF5733) to apply a specific color.
A live preview will help you visualize how the background looks in real time.
Card Design

Border Radius
Adjusts the roundness of the timer card's corners.
A higher value creates more rounded corners.
Example: 0px = square corners, 12px = softly rounded corners.
Border Size
Sets the thickness of the border around the timer card.
Enter a value in pixels (e.g., 2px).
Set to 0px if you don’t want any border.
Border Color
Choose the color of the border around the timer card.
Use the color picker or enter a HEX code (e.g., #000000 for black).
Make sure it complements your background and brand colors.
Inside Spacing

Inside Top
Sets the space above the content inside the timer card.
Measured in pixels (e.g., 10px).
Increases breathing room between the top edge and elements like the title or timer.
Inside Bottom
Sets the space below the content inside the timer card.
Also measured in pixels (e.g., 12px).
Adds space between the bottom edge and the timer or message content.
Outside Spacing

Outside Top
Sets the space above the timer card.
Measured in pixels (e.g., 15px).
Useful for adding breathing room between the timer and the section above it (like the product title or price).
Outside Bottom
Sets the space below the timer card.
Also measured in pixels (e.g., 20px).
Helps separate the timer from the content that follows (like the Add to Cart button).
Typography Settings
Title Size and Color

Size
Set the font size of the title text.
Measured in pixels (e.g., 20px).
Larger sizes make the title more prominent, ideal for drawing attention.
Color
Choose the text color for the title.
Use the color picker or enter a HEX code (e.g., #333333).
Pick a color that contrasts well with the background for better visibility.
Subheading Size and Color

Size
Set the font size of the subheading text.
Measured in pixels (e.g., 16px).
Choose a size slightly smaller than the main title for a clear visual hierarchy.
Color
Choose the text color for the subheading.
Use the color picker or input a HEX code (e.g., #777777).
Consider using a slightly muted tone to complement the main title without overpowering it.
Timer Size and Color

Size
Set the font size for the timer digits.
Measured in pixels (e.g., 24px).
Larger numbers grab more attention and emphasize urgency.
Color
Choose the color of the timer digits.
Use the color picker or enter a HEX code (e.g., #FF0000 for red).
Pick a color that stands out from the background and complements your store’s palette.
Legend Size and Color

Size
Set the font size for the legend labels.
Measured in pixels (e.g., 14px).
A slightly smaller size than the timer digits is recommended for visual balance.
Color
Choose the color of the legend text.
Use the color picker or enter a HEX code (e.g., #555555).
Make sure it’s readable and harmonizes with both the digits and background.
Placement
Select Products

Choose where you want the timer to appear in your store. This setting gives you full control over which products the timer is shown on.
All Products
Applies the timer to every product in your store automatically.
Ideal for storewide promotions or flash sales.
No need to select individual products.
Specific Products
Applies the timer only to the products you manually select.
Great for limited-time deals on certain items.
Use the product picker to choose exactly which products will display the timer.
Custom Position
Manually add the timer using app blocks or the code snippet provided below.
Perfect for advanced placement control.
Use this if you want to insert the timer at a custom spot in your theme or use Shopify’s theme editor.
Timer Code

Use this section when you want manual control over where the timer appears on your store by adding it directly to your theme.
Timer ID
Each timer has a unique Timer ID.
This ID helps you identify and manage the timer when using the Shopify theme editor or making theme customizations.
Keep this ID handy if you're using the code snippet method.
Timer Code Snippet
A ready-to-use code snippet you can insert into your Shopify theme to display the timer exactly where you want.
Copy the provided snippet and paste it into your theme files (like product.liquid, product-template.liquid, or via app blocks).
Perfect for developers or advanced users who want total placement flexibility.
Updated on: 23/05/2025
Thank you!