> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://support.makeprosimp.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# How does the Top/Bottom Bar Timer work in the Countdown Timers in the ToastiBar app?

## Platform Availability

The **Top/Bottom Bar** Timer feature is available for **Shopify, Wix, and Shopline** merchants. If your store runs on any of these platforms, you can create, customize, and display a countdown bar at the top or bottom of your site.

**Shopify**

[![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/1/a/b31a5d0521d31800/01-top-bottom-bar_12bldm9.png)](https://storage.crisp.chat/users/helpdesk/website/-/b/3/1/a/b31a5d0521d31800/01-top-bottom-bar_12bldm9.png)

**Wix**

[![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/1/a/b31a5d0521d31800/01-top-bottom-barwix_5dylpt.png)](https://storage.crisp.chat/users/helpdesk/website/-/b/3/1/a/b31a5d0521d31800/01-top-bottom-barwix_5dylpt.png)

**Shopline**

[![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/1/a/b31a5d0521d31800/02-top-bottom-bar-timer-shopli_5udvx4.png)](https://storage.crisp.chat/users/helpdesk/website/-/b/3/1/a/b31a5d0521d31800/02-top-bottom-bar-timer-shopli_5udvx4.png)

The **Top/Bottom Bar Timer** is a floating announcement bar with a live countdown timer that appears at the **top** or **bottom** of your store. It’s designed to instantly grab customer attention and create urgency for ongoing offers, limited-time deals, or flash sales.

You can fully customize the **content, appearance, behavior, and display rules** of the timer bar to match your brand and goals. Whether you want to keep it minimal or bold, this timer bar helps drive conversions by creating a sense of urgency right from the moment a shopper enters your store.

**Key Benefits:**
* Highlight storewide promotions or seasonal sales
* Encourage quick action by showing a live countdown
* Keep messaging visible across product, collection, and home pages

In this guide, we’ll walk you through how to enable, configure, and make the most of your Top/Bottom Bar Timer to boost sales and enhance customer experience.

## Content

### Status

[![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/1/a/b31a5d0521d31800/02-top-bottom-bar-status_a186ud.png)](https://storage.crisp.chat/users/helpdesk/website/-/b/3/1/a/b31a5d0521d31800/02-top-bottom-bar-status_a186ud.png)

The **Status** option allows you to **publish** or **unpublish** the Top/Bottom Bar Timer on your website.

* **Published:** The timer will be visible on the website 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

[![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/1/a/b31a5d0521d31800/03-top-bottom-bar-timer-settin_f1hr8d.png)](https://storage.crisp.chat/users/helpdesk/website/-/b/3/1/a/b31a5d0521d31800/03-top-bottom-bar-timer-settin_f1hr8d.png)

The **Timer Settings** section allows you to define the core content that appears along with the countdown timer on your website. 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 **to the left of the timer** on your website. Use this space to grab the shopper’s attention and highlight the urgency. For example, “Hurry up!”.

You can instantly generate compelling Titles with a single click on the “**Generate with AI**” button. This feature uses advanced **AI** to create clear, engaging headings that capture attention and enhance your message effortlessly.

#### Subheading

You can add an optional **subheading below the title and left of the timer** to provide more context or a supporting message. For example, “Offer ends in”.

### Action Configuration

[![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/1/a/b31a5d0521d31800/04-top-bottom-bar-action-confi_1c369d2.png)](https://storage.crisp.chat/users/helpdesk/website/-/b/3/1/a/b31a5d0521d31800/04-top-bottom-bar-action-confi_1c369d2.png)

Define how your **Top/Bottom Bar Timer** behaves when customers interact with it. You can keep it as a simple countdown or make it interactive with buttons and links.

#### Action Type

Choose what happens when a shopper interacts with the timer bar.

* **Disable Action** – The bar only displays the countdown and message. No clickable actions.
* **Show Button** – Displays a button on the bar that users can click.
* **Clickable Full Bar** – Makes the entire bar clickable, redirecting customers to your specified link.

#### Display Text [Associated With Show Button]

Enter the **button label** text.

* Example: “Shop Now”, “Grab Deal”, or “View Offer”.
* Keep it short and action-oriented.

#### Destination URL [Associated With Show Button & Clickable Full Bar]

Add the **link** where you want customers to be taken.

* Can be a product, collection, discount, or any page URL.
* Starts with `https://` or a relative link like `/collections/sale`.

#### Show Close Option

Enable a small **“X” icon** to let users **close the timer** bar manually.

* Helpful for user experience if you don’t want the timer to feel intrusive.
* Once closed, the bar will not reappear during their current session or visit. However, the bar will reappear when they return to the site later.

### Timer Labels

[![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/1/a/b31a5d0521d31800/05-top-bottom-bar-timer-labels_1ihxjf8.png)](https://storage.crisp.chat/users/helpdesk/website/-/b/3/1/a/b31a5d0521d31800/05-top-bottom-bar-timer-labels_1ihxjf8.png)

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

[![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/1/a/b31a5d0521d31800/06-top-bottom-bar-timer-type_katdq3.png)](https://storage.crisp.chat/users/helpdesk/website/-/b/3/1/a/b31a5d0521d31800/06-top-bottom-bar-timer-type_katdq3.png)

The **Timer Type** setting lets you choose how your countdown behaves on the website. 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 website.

### 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

[![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/1/a/b31a5d0521d31800/07-top-bottom-bar-timer-starts_gv95ns.png)](https://storage.crisp.chat/users/helpdesk/website/-/b/3/1/a/b31a5d0521d31800/07-top-bottom-bar-timer-starts_gv95ns.png)

##### 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

[![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/1/a/b31a5d0521d31800/08-top-bottom-bar-timer-schedu_b5dxor.png)](https://storage.crisp.chat/users/helpdesk/website/-/b/3/1/a/b31a5d0521d31800/08-top-bottom-bar-timer-schedu_b5dxor.png)

##### 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

[![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/1/a/b31a5d0521d31800/09-top-bottom-bar-countdown-du_auy9r2.png)](https://storage.crisp.chat/users/helpdesk/website/-/b/3/1/a/b31a5d0521d31800/09-top-bottom-bar-countdown-du_auy9r2.png)

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 website.

#### Action After Timer Ends

[![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/1/a/b31a5d0521d31800/10-top-bottom-bar-action-after_13wame5.png)](https://storage.crisp.chat/users/helpdesk/website/-/b/3/1/a/b31a5d0521d31800/10-top-bottom-bar-action-after_13wame5.png)

Decide what should happen when the countdown reaches zero.

* **Hide timer for the buyer:**
The timer will disappear from the website once it ends.

* **Reset Timer [Associated 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

[![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/1/a/b31a5d0521d31800/11-top-bottom-bar-background-c_m5ncqg.png)](https://storage.crisp.chat/users/helpdesk/website/-/b/3/1/a/b31a5d0521d31800/11-top-bottom-bar-background-c_m5ncqg.png)

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

[![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/1/a/b31a5d0521d31800/12-top-bottom-bar-card-design_nme0vs.png)](https://storage.crisp.chat/users/helpdesk/website/-/b/3/1/a/b31a5d0521d31800/12-top-bottom-bar-card-design_nme0vs.png)

##### 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

[![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/1/a/b31a5d0521d31800/13-top-bottom-bar-inside-spaci_zjoxgb.png)](https://storage.crisp.chat/users/helpdesk/website/-/b/3/1/a/b31a5d0521d31800/13-top-bottom-bar-inside-spaci_zjoxgb.png)

##### 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.

### Typography Settings

#### Title Size and Color

[![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/1/a/b31a5d0521d31800/14-top-bottom-bar-title-size-c_10nqj57.png)](https://storage.crisp.chat/users/helpdesk/website/-/b/3/1/a/b31a5d0521d31800/14-top-bottom-bar-title-size-c_10nqj57.png)

##### 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

[![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/1/a/b31a5d0521d31800/15-top-bottom-bar-subheading-s_orwd99.png)](https://storage.crisp.chat/users/helpdesk/website/-/b/3/1/a/b31a5d0521d31800/15-top-bottom-bar-subheading-s_orwd99.png)

##### 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

[![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/1/a/b31a5d0521d31800/16-top-bottom-bar-timer-size-c_4xcet7.png)](https://storage.crisp.chat/users/helpdesk/website/-/b/3/1/a/b31a5d0521d31800/16-top-bottom-bar-timer-size-c_4xcet7.png)

##### 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

[![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/1/a/b31a5d0521d31800/17-top-bottom-bar-legend-size-_dtsz6f.png)](https://storage.crisp.chat/users/helpdesk/website/-/b/3/1/a/b31a5d0521d31800/17-top-bottom-bar-legend-size-_dtsz6f.png)

##### 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.

### Button Appearance

[![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/1/a/b31a5d0521d31800/18-top-bottom-bar-button-appea_7d8sd1.png)](https://storage.crisp.chat/users/helpdesk/website/-/b/3/1/a/b31a5d0521d31800/18-top-bottom-bar-button-appea_7d8sd1.png)

Customize how the **action button** looks on your Top/Bottom Bar Timer to match your store’s branding and attract customer attention.

#### Primary Color

Set the **background color** of the button.

* Choose a bold color that stands out against your bar background.
* Use your store’s theme color for brand consistency.

#### Text Size

Adjust the **font size** of the button label.

* Make sure it’s readable but not overpowering.
* Recommended sizes:
1. **Small:** 12–14px
2. **Medium:** 15–16px *(default)*
3. **Large:** 17–18px
|| Tip: Choose a size that matches your store’s theme typography for a consistent look.

#### Font Color

Choose the **text color** of the button label.

* Ensure good contrast with the primary button color for readability.
* Example: White text on a black button.

#### Rounded Edges

Toggle to apply **rounded corners** to the button.

* A higher value creates more rounded corners.
* Example: `0px` = square corners, `12px` = softly rounded corners.

### Icon Styling

[![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/1/a/b31a5d0521d31800/19-top-bottom-bar-icon-styling_vxye4q.png)](https://storage.crisp.chat/users/helpdesk/website/-/b/3/1/a/b31a5d0521d31800/19-top-bottom-bar-icon-styling_vxye4q.png)

Customize the look of the **dismiss (close) icon** on your timer bar to ensure it matches your store's design and remains visible to customers.

#### Dismiss Icon Color

Choose the **color of the “X” icon** that allows users to close the timer bar manually.

* Make sure it contrasts well with the bar background for visibility.
* Example: Use white on a dark bar or black on a light bar.

### Placement & Visibility

[![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/1/a/b31a5d0521d31800/20-top-bottom-bar-placement-an_1fr436s.png)](https://storage.crisp.chat/users/helpdesk/website/-/b/3/1/a/b31a5d0521d31800/20-top-bottom-bar-placement-an_1fr436s.png)

Control where the **Top/Bottom Bar Timer** appears on your storefront and how it behaves when shoppers scroll.

#### Element Position

Choose the **vertical position** of the timer bar on your store:

* **Top** – Displays the timer bar at the **top** of the page.
* **Bottom** – Displays the timer bar at the **bottom** of the page.

#### Sticky Display [Associated with Top]

Enable this option to **keep the timer bar fixed** at the top of the screen even when customers scroll.

* Makes the bar always visible, increasing visibility and engagement.
* Recommended for important or time-sensitive offers.

#### Bar z-index Position (Optional)

Set the **z-index** value of the timer bar if it overlaps incorrectly with other elements on your site.

* Higher values bring the bar in front of other content (e.g., 9999).
* Useful if other elements (like headers or popups) are hiding the bar.

## Placement

### Select Pages

Choose exactly **where** you’d like your Top/Bottom Bar Timer to appear across your store, either globally or on selected pages. If you prefer full control over placement, the custom snippet option is available exclusively for Shopify & Shopline merchants.

#### Store-wide Display Options

[![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/1/a/b31a5d0521d31800/21-top-bottom-bar-store-wide-d_fzlm3k.png)](https://storage.crisp.chat/users/helpdesk/website/-/b/3/1/a/b31a5d0521d31800/21-top-bottom-bar-store-wide-d_fzlm3k.png)

##### Display Everywhere

Shows the timer bar on **all pages** of your store, including the homepage, product, collection, cart, and more.

##### Display Only on Homepage

It limits the timer bar to **only the homepage**, which is ideal for announcing general promotions.

#### Product Page Display Options

[![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/1/a/b31a5d0521d31800/22-top-bottom-bar-product-page_13ws06e.png)](https://storage.crisp.chat/users/helpdesk/website/-/b/3/1/a/b31a5d0521d31800/22-top-bottom-bar-product-page_13ws06e.png)

##### Display on All Product Pages

Shows the timer bar on **every product page** in your store.

##### Display on Specific Products

Allows you to select **individual products** where the timer bar should be displayed.

#### Collection Page Display Options [Currently available on Shopify & Shopline]

[![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/1/a/b31a5d0521d31800/23-top-bottom-bar-collection-p_3k747q.png)](https://storage.crisp.chat/users/helpdesk/website/-/b/3/1/a/b31a5d0521d31800/23-top-bottom-bar-collection-p_3k747q.png)

##### Display on All Collection Pages

Shows the timer bar on **all your collection pages**.

##### Display on Specific Collections

Lets you choose **specific collections** where the timer bar should appear.

#### Custom Integration Options [Currently available on Shopify & Shopline]

##### Custom Position

[![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/1/a/b31a5d0521d31800/24-top-bottom-bar-custom-integ_ymg0wf.png)](https://storage.crisp.chat/users/helpdesk/website/-/b/3/1/a/b31a5d0521d31800/24-top-bottom-bar-custom-integ_ymg0wf.png)

If you want complete control, you can add the timer **manually** using:

* **App Blocks**
**Shopify:** if your theme supports Online Store 2.0
**Shopline:** if your theme supports Online Store 3.0

* **Code Snippet** provided in the app settings

#### Timer Code

[![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/1/a/b31a5d0521d31800/25-top-bottom-bar-timer-code_1civbod.png)](https://storage.crisp.chat/users/helpdesk/website/-/b/3/1/a/b31a5d0521d31800/25-top-bottom-bar-timer-code_1civbod.png)

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/Shopline 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/Shopline 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.