> ## 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 Cart Page Timer work in the Countdown Timers in the ToastiBar app?

## Platform Availability

The **Cart Page Timer** feature is available for **Shopify and Shopline** merchants. If your store runs on either platform, you can create, customize, and display timers directly on the Cart page.

**Shopify**

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

**Shopline**

[![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/1/a/b31a5d0521d31800/04-cart-page-timer-shopline_1xqv61v.png)](https://storage.crisp.chat/users/helpdesk/website/-/b/3/1/a/b31a5d0521d31800/04-cart-page-timer-shopline_1xqv61v.png)

The **Cart Page Timer** is designed to add urgency during the final stage of your shopper’s journey, the cart. By displaying a countdown on the cart page, you create a sense of scarcity and encourage faster checkouts, which can help reduce cart abandonment and increase conversion rates.

Whether you're promoting a limited-time offer, holding items for a short period, or creating FOMO-driven urgency, the Cart Page Timer helps nudge buyers toward completing their purchase.

**Key Benefits:**
* Flash sales or time-sensitive discounts
* Reserve cart features ("We’re holding this for 10 minutes!")
* Countdown to shipping cutoffs or next-day delivery eligibility

From content to design to placement, the Cart Page Timer gives you complete control over how and where the timer appears, helping you drive results when it matters most.

## Content

### Status

[![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/1/a/b31a5d0521d31800/02-cart-page-status_17bn5qh.png)](https://storage.crisp.chat/users/helpdesk/website/-/b/3/1/a/b31a5d0521d31800/02-cart-page-status_17bn5qh.png)

The **Status** option allows you to **publish** or **unpublish** the Cart Page Timer on the Cart page.

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

[![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/1/a/b31a5d0521d31800/03-cart-page-timer-settings_1tiywfc.png)](https://storage.crisp.chat/users/helpdesk/website/-/b/3/1/a/b31a5d0521d31800/03-cart-page-timer-settings_1tiywfc.png)

This section lets you configure the foundational elements of your **Cart Page Timer**, including the internal name and how the countdown is displayed within your title.

#### Timer Name

Used for **internal reference** only. This name is not visible to your store visitors but helps you identify and manage your timers easily within the app.

#### Title

This is the **main text shown** on the cart page along with the countdown timer. You can use dynamic placement with: `{{ timer }}`. This placeholder will automatically be **replaced by the live countdown timer** wherever you place it in the title.

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 titles that capture attention and strengthen your message effortlessly.

### Timer Behaviour

Control how long the countdown runs for each visitor on the cart page. This section allows you to define the **duration of urgency** based on a session-specific countdown.

#### Countdown Duration

[![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/1/a/b31a5d0521d31800/04-cart-page-countdown-duratio_m2wso7.png)](https://storage.crisp.chat/users/helpdesk/website/-/b/3/1/a/b31a5d0521d31800/04-cart-page-countdown-duratio_m2wso7.png)

Set how many **minutes** the timer should run **per visitor session** on the cart page.

##### Minutes

Enter the number of minutes you'd like the timer to run. If you set **Countdown Duration = 15**, each visitor will see a **15-minute countdown** when they land on the cart page. The timer starts immediately and is **unique to each visitor’s session**.

#### Action After Timer Ends

[![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/1/a/b31a5d0521d31800/05-cart-page-action-after-time_1abqugb.png)](https://storage.crisp.chat/users/helpdesk/website/-/b/3/1/a/b31a5d0521d31800/05-cart-page-action-after-time_1abqugb.png)

Decide what happens when the countdown **reaches zero**. This feature is essential for creating urgency and encouraging customers to complete their purchase within a set time.

* **Hide timer for the buyer**
Once the countdown ends, the timer simply **disappears** from the cart page. The cart remains unaffected, and the buyer can continue shopping or checkout at their own pace.

* **Reset Timer**
Automatically **restart the countdown** for that session. This is useful if you want to keep the urgency visible at all times without interrupting the shopper's experience.

* **Remove All Cart Items**
This is the most aggressive option, when the timer ends, all items are **removed from the buyer’s cart**. Ideal for limited-time reserve offers or high-demand sales events where urgency is critical.

## Design

### Background Settings

#### Background Color

[![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/1/a/b31a5d0521d31800/06-cart-page-background-color_11104gx.png)](https://storage.crisp.chat/users/helpdesk/website/-/b/3/1/a/b31a5d0521d31800/06-cart-page-background-color_11104gx.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/07-cart-page-card-design_f8ugcn.png)](https://storage.crisp.chat/users/helpdesk/website/-/b/3/1/a/b31a5d0521d31800/07-cart-page-card-design_f8ugcn.png)

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

[![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/1/a/b31a5d0521d31800/08-cart-page-inside-spacing_1hgvwpc.png)](https://storage.crisp.chat/users/helpdesk/website/-/b/3/1/a/b31a5d0521d31800/08-cart-page-inside-spacing_1hgvwpc.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.

### Outside Spacing

[![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/1/a/b31a5d0521d31800/09-cart-page-outside-spacing_iposow.png)](https://storage.crisp.chat/users/helpdesk/website/-/b/3/1/a/b31a5d0521d31800/09-cart-page-outside-spacing_iposow.png)

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

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

### Typography Settings

#### Title Size and Color

[![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/1/a/b31a5d0521d31800/10-cart-page-title-size-color_1b4duz2.png)](https://storage.crisp.chat/users/helpdesk/website/-/b/3/1/a/b31a5d0521d31800/10-cart-page-title-size-color_1b4duz2.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.

#### Timer Size and Color

[![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/1/a/b31a5d0521d31800/11-cart-page-timer-size-color_z2rp4q.png)](https://storage.crisp.chat/users/helpdesk/website/-/b/3/1/a/b31a5d0521d31800/11-cart-page-timer-size-color_z2rp4q.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.

## Placement

### Select Position

[![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/1/a/b31a5d0521d31800/12-cart-page-select-position_yjyx4v.png)](https://storage.crisp.chat/users/helpdesk/website/-/b/3/1/a/b31a5d0521d31800/12-cart-page-select-position_yjyx4v.png)

Choose where the **Cart Page Timer** should appear within your cart page layout. This gives you control over how prominently the countdown is displayed to shoppers.

#### Display on Top of Cart

Automatically places the timer **at the top of your cart page**, no coding or configuration needed. This is the most visible and recommended option to maximize urgency.

#### Custom Integration Options

##### Custom Position

[![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/1/a/b31a5d0521d31800/13-cart-page-custom-integratio_12i7gpy.png)](https://storage.crisp.chat/users/helpdesk/website/-/b/3/1/a/b31a5d0521d31800/13-cart-page-custom-integratio_12i7gpy.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/14-cart-page-timer-code_izsj89.png)](https://storage.crisp.chat/users/helpdesk/website/-/b/3/1/a/b31a5d0521d31800/14-cart-page-timer-code_izsj89.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.
* Perfect for developers or advanced users who want total placement flexibility.