Hoppy Countdown Timer offers multiple countdown types so you can create urgency across different areas of your store — from product pages and cart drawers to checkout and email campaigns.

Each countdown type is designed for a specific placement area and comes with its own behavior, settings, and storefront logic. Choosing the right type helps you display timers exactly where they matter most 🎯

⚠️ Before You Begin

To explore countdown types:

→ Open the Hoppy Countdown Timer app

→ Click Create New Countdown

→ Select a countdown type from the available options

Once selected, the setup page opens with settings tailored to that specific type.

ℹ️ Not all settings appear for every type. The app dynamically shows only the fields relevant to your selected countdown.

📍 Placement-Based Countdown Types

These define where the countdown appears on your storefront.

🛍️ Product Page

• What it does: Displays a countdown block on product pages, positioned below the Add to Cart button.
• Best for: Creating urgency on individual products.

Placement Options

• All Products — Shows on every product page.
• Specific Products — Choose individual products via the Shopify resource picker.
• Products with Specific Tags — Target products matching tags you define.
• Products in Specific Collections — Target products within selected collections.
• Custom — Use the Countdown ID in your theme editor or paste a code snippet manually.

Default Behavior

• Title: "Hurry up\!"
• Subheading: "Sale ends in"
• Shows all time units: days, hours, minutes, seconds
• Progress bar is hidden by default
• No call-to-action button by default

📶 Top / Bottom Bar

• What it does: Displays a fixed or sticky countdown bar at the top or bottom of your store.
• Best for: Store-wide announcements, flash sales, or shipping deadlines.

Placement Options

• Every Page — Visible across your entire store.
• Home Page Only — Only on the homepage.
• All Product Pages — Every product page.
• Specific Products — Only on selected products.
• All Collection Pages — Every collection page.
• Specific Collections — Only selected collections.
• Custom — Manual placement using Countdown ID or code snippet.

Position & Behavior

• Position: Choose Top or Bottom.
• Sticky: When set to Top, you can enable sticky behavior so the bar stays visible while scrolling.
• Close Icon: Merchants can enable a close button. When a customer dismisses the bar, it stays hidden using browser storage.

Default Behavior

• Includes a CTA button by default
• Close icon is enabled by default
• Button links and text are configurable

🗂️ Landing Page (Collection Page)

• What it does: Displays a countdown block on collection pages.
• Best for: Collection-specific sales, seasonal campaigns, or category promotions.

Placement Options

• All Collection Pages — Every collection page.
• Specific Collections — Only selected collections.
• Custom — Manual placement using Countdown ID or code snippet.

Default Behavior

• Includes a CTA button by default
• Supports clickable entire-bar actions
• Injected before the main content area

🛒 Cart Page

• What it does: Displays a countdown on the cart page and inside the cart drawer when items are added.
• Best for: Reducing cart abandonment with checkout urgency.

Placement Options

• Top of Cart — Positioned at the top of the cart content.
• Custom — Manual placement using Countdown ID or code snippet.

Special Behavior

• Timer starts when the first item is added to cart. The app detects add-to-cart actions automatically.
• If the cart becomes empty, the countdown is removed.
• The title supports a {timer} placeholder so the live timer appears inline within your message.

Default Behavior

• Only hours, minutes, and seconds are shown (no days).
• Closable by default.
• Default title: "Hurry up sale ends in {timer}"

📄 Cart Page Standalone

• What it does: Same as Cart Page, but only on the /cart page — not in the cart drawer.
• Best for: Merchants who want countdown urgency strictly on the dedicated cart page.

Storefront Behavior

• Only renders on the /cart pathname.
• Does not attach to or appear inside the cart drawer.

🗃️ Cart Drawer

• What it does: Same as Cart Page, but only inside the cart drawer — not on the /cart page.
• Best for: Stores where customers primarily use the cart drawer instead of visiting the full cart page.

Storefront Behavior

• Only renders inside the cart drawer.
• Uses a MutationObserver to detect when the drawer opens and injects the countdown automatically.
• Does not appear on the /cart page.

💳 Checkout Page

• What it does: Displays a countdown directly on the Shopify Checkout page.
• Best for: Final-step urgency to complete the purchase.

Important Requirement

⚠️ Shopify Plus plan is required. This countdown type is only available for Shopify Plus merchants because it uses Shopify Checkout UI Extensions.

Placement Options

• Purchase Checkout Block Render — Custom block placement configured by the merchant inside the checkout editor.

Design Limitations

Because checkout pages use Shopify's UI Extension framework:

• Font selection is limited to Shopify's predefined options.
• Timer styles are restricted to Shopify's text size and color presets.
• Templates and advanced styling options are not available.
• Only one published checkout countdown is allowed per shop.

Available End Actions

Only Unpublish and Nothing are available. Other end actions like custom messages, extend, or restart are not supported for checkout countdowns.

Default Behavior

• Title: "Hurry up\! Sale ends in {timer}"
• Closable by default

⏱️ Timer Behavior Types

These define how the countdown timer behaves over time. The available options depend on which placement type you selected.

📅 Countdown to a Date

• What it does: Counts down to a specific fixed date and time.
• Best for: Flash sales, product launches, or event deadlines.

Settings

• Start Type:
• Now — Timer becomes visible immediately.
• Later — Timer becomes visible only after the start date you configure.
• Start Date — Appears only if Start Type is set to "Later".
• End Date — The exact date and time when the countdown reaches zero.

⏲️ Fixed Minutes

• What it does: Starts a countdown from a fixed number of minutes for each visitor session.
• Best for: Creating per-session urgency like "Your cart is reserved for 15 minutes."

Settings

• Minutes — Enter the duration in minutes (default is 120).

Storefront Behavior

• Timer starts fresh on every page load.
• When time runs out, the countdown ends based on your selected end action.

🔁 Daily Recurring Timer

• What it does: Repeats the countdown on selected days of the week between configured start and end times.
• Best for: Daily flash sales, happy hours, or recurring promotions.

Settings

• Selected Days — Choose which days of the week the countdown should appear.
• Start Time — Hours, minutes, and AM/PM indicator.
• End Time — Hours, minutes, and AM/PM indicator.

Storefront Behavior

• If the end time is earlier than the start time (for example, 10 PM to 2 AM), the app automatically handles the overnight transition.
• The countdown is completely hidden on days that are not selected.

📊 Interval Timer

• What it does: Sets up to 7 separate countdown intervals, each with its own start and end date.
• Best for: Multi-phase campaigns, staggered sales, or week-long events with different urgency periods.

Settings

• Intervals — Add up to 7 intervals, each with a start and end timestamp.

Storefront Behavior

• The countdown only appears during an active interval.
• If the current time falls between intervals, the countdown is hidden.
• Intervals are evaluated sequentially.

👤 Session Timer

• What it does: Starts a unique countdown for each visitor and persists across page refreshes using browser storage.
• Best for: Per-visitor urgency that doesn't reset when they navigate to another page.

Settings

• Minutes — Enter the session duration in minutes.

Storefront Behavior

• On the visitor's first visit, the timer starts and stores the start and end times in browser storage.
• On subsequent visits, the timer resumes from where it left off.
• If browser storage is cleared or corrupted, a new session is created automatically.

🎯 What Happens When the Timer Ends

Each countdown type supports end actions that control what happens when time reaches zero.

End Action Availability by Type

• Standard types (Product Page, Top/Bottom Bar, Landing Page): All end actions except Delete Cart.
• Cart types (Cart Page, Cart Drawer, Cart Page Standalone): All end actions including Delete Cart.
• Checkout Page: Only Unpublish and Nothing.

⚠️ Important Notes

Timer Type Availability by Placement

Not all timer behavior types are available for every placement:

• Product Page, Top/Bottom Bar, Landing Page: All timer types available (Date, Minutes, Recurring, Interval, Session).
• Cart Page, Cart Drawer, Cart Page Standalone: Only Fixed Minutes timer type is available.
• Checkout Page: Only Fixed Minutes timer type is available.

Checkout Page Restrictions

• Requires Shopify Plus plan.
• Only one checkout countdown can be published per shop at a time.
• Design options are limited to Shopify's checkout UI presets.

Cart Types Are Mutually Exclusive

Cart Page, Cart Page Standalone, and Cart Drawer are similar but serve different purposes:

• Use Cart Page if you want the countdown on both the cart page and in the cart drawer.
• Use Cart Page Standalone if you only want it on the /cart page.
• Use Cart Drawer if you only want it inside the cart drawer.

💡 Use Cases & Examples

Flash Sale on Product Pages

→ Select Product Page

→ Placement: Specific Products (select sale items)

→ Timer: Countdown to a Date

→ End Action: Unpublish

Store-Wide Shipping Deadline

→ Select Top / Bottom Bar

→ Placement: Every Page

→ Position: Top \+ Sticky

→ Timer: Daily Recurring (e.g., Monday–Friday, 9 AM to 5 PM)

→ End Action: Custom Message — "Orders placed after 5 PM ship tomorrow"

Cart Abandonment Urgency

→ Select Cart Page

→ Placement: Top of Cart

→ Timer: Fixed Minutes (e.g., 30 minutes)

→ Title: "Complete your order within {timer} to secure your items"

→ End Action: Delete Cart

Checkout Final Push

→ Select Checkout Page (Shopify Plus only)

→ Timer: Fixed Minutes (e.g., 15 minutes)

→ Title: "Hurry up\! Sale ends in {timer}"

→ End Action: Nothing

🚀 Final Result

Once configured correctly:

✅ Countdowns appear exactly where you want them

✅ Timer behavior matches your campaign goals

✅ End actions handle expiration gracefully

✅ Customers experience consistent urgency across product pages, cart, checkout, and email

✅ Each placement type respects its own visibility rules, targeting conditions, and design constraints

Choosing the right countdown type ensures your urgency messaging is shown to the right customers, at the right time, in the right place ✨

Updated on: 03/06/2026