> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.hoppyapps.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). # ⏳ What are the Available Countdown Types 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 | Behavior | | ----- | ----- | | **Unpublish** | Hides the countdown completely from the storefront | | **Custom Message** | Replaces the timer with a custom title and subheading you define | | **Extend** | Adds extra time (60–600 seconds) with an optional message. You can chain multiple extensions together | | **Restart** | Restarts the countdown from now with the original duration | | **Nothing** | Timer stops but the countdown content stays visible | | **Delete Cart** | Clears the customer's cart and reloads the page. Only available for cart-related countdowns | ### **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 ✨