Home Countdown Timers

Countdown Timers

Support
By Support
• 13 articles

How to set up a Countdown Timer?

Learn how to create and customize your Countdown Timer. ✅ Step 1: Open the Hoppy Countdown Timer 1️⃣ From your Shopify admin, open the Hoppy Countdown Timer app and click on Create new Countdown. 2️⃣ Select the Countdown Type — where you want the timer to appear on your store: - Product Page🛍️- Show a timer on product pages. This is ideal for flash sales or limited-time offers on specific items. - Top/Bottom Bar🔝🔽- A sticky bar at the top or bottom of your website is great for sitewide messages or storewide promotions. - Landing Page 🖥️– Use this when creating a special landing page for a campaign or product launch. The timer will be shown there to emphasize urgency. - Cart Page – Display the countdown on the cart page to encourage customers to complete their purchase quickly. Perfect for limited-time cart holds or shipping deadlines. - Email Timer✉️ – Generate a timer image to embed in your email campaigns. This helps drive urgency in email promotions with an actual ticking clock. ✅ Step 2: Customize Your Countdown Timer 3️⃣ Under the Content tab, fill in the following fields: - Title📢 – The main heading of your countdown (e.g., Hurry! Sale ends soon!). - Subheading📝 – Additional info to support the title (e.g., Offer valid until midnight!). - Progress Bar📊 – Check the box to show a progress bar in the countdown timer. - Time Labels📆 – Customize the text for days, hours, minutes, and seconds. 4️⃣ Scroll down to the Scheduling section and choose your Timer Type: - Countdown to a Date🕒 – Set a specific date and time for the countdown to end (perfect for limited-time events like Black Friday). - Fixed Minutes Timer☀️ – A countdown that starts when a customer visits your site and runs for a set number of minutes. Choose: - Start Now – The Timer begins as soon as the customer enters. - Schedule to Start Later – Select a future start time. - Daily Recurring Timer🔁– Resets daily when a visitor enters your store. Great for evergreen urgency like "Offer ends in 10 minutes!" ​ - Interval Timer 🗓️**-** Show the timer during specific start and end times (up to 7 intervals) every interval, where interval can be daily/weekly/monthly. Great for flash sales or limited-time promos. Example: Show the timer daily from 12 PM – 3 PM. - Session Timer 👤**-** Starts a unique countdown for each visitor once they land on your store. Perfect for personal offers and creating urgency. Example: Give each visitor 120 minutes to claim a deal. 5️⃣ Choose what happens when the countdown reaches zero (or ends): - Unpublish Timer🛑– Automatically remove the countdown. - Show Custom Title📢 – Replace timer with a message (e.g., Offer has ended!). - Do Nothing⏸️ – Timer stays on the screen as-is. - Extend Timer ⏳ – When the timer ends, you can display an Extended Message and set a new duration for which the timer will continue running. - Reset Timer 🔁- When the countdown reaches zero, the timer will automatically restart from the beginning. 👉 Note: This option is available only when you select Fixed Minutes under the Scheduling timer type. ✅ Step 3: Customize the Design of the Countdown Timer 6️⃣ Navigate to the Design tab to personalize your timer: - Choose a Color Template 🎨 - Change Background Color, adjust Fonts, and set Button Colors - Add Timer style, border style, spacing, separator, Customize typography. - Match the design with your brand style for a consistent experience. ✅ Step 4: Navigate to the Placement tab 7️⃣ Go to the Placement tab and set where and how the timer appears: - Time-on-Site Targeting ⏳ – Choose from the dropdown to either "Always Show" or "Show After a While" when a visitor arrives on your website. - Location on Store: Choose where to display the countdown: - All Product Pages 🛍️ – A Timer will appear on every product page. - Specific Product Pages 📦 – Select individual product pages to show the timer. - All Products in Specific Collections 🗂️ – Choose a collection to apply the timer to all products inside it. - Custom Position 🎯 – Manually place the countdown anywhere on your store using the provided Countdown ID or Custom Liquid. ✅ Step 5: Save & Publish 7️⃣ Once you're satisfied, click Save and Publish to activate the countdown timer. 8️⃣ Check your store to preview the countdown live in action! 9️⃣ If necessary, return to the Hoppy Countdown Timer app and make adjustments. 🎉 That’s it! Your Countdown Timer is live and ready to create urgency and increase conversions! 🏁

Last updated on Nov 05, 2025

Countdown Timer is not showing on my store [Fixed]

Troubleshoot and resolve the issue of the Countdown Timer not showing on your store. ✅ Step 1: Ensure Your Countdown Timer is Created and Published 1️⃣ Go to Shopify Admin → Apps → Countdown timer app. 2️⃣ Check if you have created the Countdown timer and ensure it is set to Published. ✅ Step 2: Enable App Embed in Theme Editor 3️⃣ For the Countdown timer to appear on your store, you must enable the App Embed feature in the Shopify Theme Editor. 🔹 How to Enable App Embed: 1. Go to Shopify Admin → Online Store → Themes. 2. Click Customize on your active theme. 3. In the left menu, click on App Embeds (⚙️ settings icon at the bottom). 4. Find Countdown Timer and toggle it ON. 5. Click Save in the top right corner. 💡 Tip: If the toggle was already ON, try turning it OFF and back ON to refresh the settings. ✅ Step 3: Using a Custom Theme? 4️⃣ If you are using a custom theme, you will need to add the Countdown Timer as a Block or Code. To manually add it: - Open your Theme Editor (Online Store → Themes → Customize) and navigate to the Sections or Blocks panel. - Look for an option to Add Section or Add Block, select the Countdown Timer app, position it where you want it to appear, and click Save. ✅ Step 4: Check Geolocation Settings 5️⃣ Ensure the geolocation settings are not restricting the bar from appearing in your country. To check: - Open the Free Countdown Timer app and navigate to the Placement tab. - Scroll down to the Geolocation Targeting settings and ensure your country is included in the list of allowed locations. ✅ Step 5: Check Scheduling Settings 6️⃣ Make sure to check if the Countdown timer is scheduled for a future date instead of being live immediately. To Check: - Open the Countdown timer app and navigate to the Content tab. - Scroll down to locate the Scheduling option. Check the Start Date and End Date settings. - If the Start Date is set to a future time, change it to Right Now to display immediately. If the End Date has expired, update it or remove the restriction. - Click Save. ✅ Step 6: Check the “Allowed UTM Sources” Section 7️⃣ The Countdown timer will only show when the visitor comes from a selected source, like Facebook, Instagram, Twitter, Google, or others via a UTM-tagged link. - Open the Countdown timer app and click on the "Placement" tab. - Scroll to the section titled "Allowed UTM Sources". - Based on the checkmarks next to the platforms (e.g., ✅ Facebook, ✅ Instagram) in the 'Allowed UTM Sources' section, when a visitor lands on your store from one of those platforms, the Countdown timer will appear. ✅ Step 7: Countdown Timer Not Visible in Cart? 8️⃣ If the Countdown Timer is supposed to be displayed in the cart then there should be products in the cart already. - If the Countdown Timer🕒 is supposed to be displayed in the cart, it will only appear when products are added to the cart. 💡 Tip: If the Shipping Bar still doesn’t appear, try adding multiple products and refreshing the page. ✅ Step 8: Hard Refresh Your Page 9️⃣ If all else looks good, try to hard refresh the page. - Windows: Press Ctrl + Shift + R - Mac: Press Cmd + Shift + R ✅ Step 9: Check for Theme Styling Conflicts 🔟 Your Shopify theme's custom CSS might be overriding the Countdown Timer. To check: - Open the Countdown Timer app🕒, go to the Design tab, change the background or text color, then save and refresh your store. - If the issue persists, contact your theme developer or tech team to resolve CSS conflicts. ✅ Step 10: Still Not Visible? Contact Support! 🔵 If you’ve tried all the above steps and the Countdown timer is still not showing, reach out to Support for further assistance. - Countdown Timer → Help & Support → Contact Support, or you can simply click the message box in the bottom right corner to contact support. - Provide screenshots & details for faster help. By following these steps, your Countdown Timer should be up and running in no time! 🚀

Last updated on Oct 27, 2025

How to add custom CSS styles for the Countdown Timer?

Learn how to add your own custom CSS to the Countdown Timer. ✅ Step 1: Open the Hoppy Countdown Timer app. 1️⃣ Go to Shopify Admin → Apps → Hoppy Countdown Timer app. 2️⃣ Navigate to the Design tab and scroll down to locate the Custom CSS box. ✅ Step 2: To Create the Boilerplate (Base Structure) 3️⃣ Start by targeting the Shopify Countdown timer with the following selector: .futureblink-countdown-timer { /* This is the main trust badge */ } ✅ Step 3: To Add Background Styling 4️⃣ Set a background color for the Countdown timer: .futureblink-countdown-timer { background: Purple; } - You can replace Purple with any color based on user preferences. ✅ Step 4: To Customize Font, Size & Text Color 5️⃣ To ensure the text looks clean and readable, apply the following styles: .futureblink-countdown-timer .title { color: white; font-size: 16px; font-family: 'Arial', sans-serif; font-weight: bold; text-align: center; } - Modify the color, font-size, and font-family values to match your brand. - For paragraph text inside the countdown timer: .futureblink-countdown-timer p { color: whitesmoke; } - For links inside the countdown timer: .futureblink-countdown-timer a { color: Yellow; text-decoration: none; } ✅ Step 5: To Style the Call-to-Action (CTA) Button 6️⃣ If the countdown timer includes a CTA button, style it properly: .futureblink-countdown-timer .cta-button { background: green; color: yellow; font-size: 14px; font-weight: bold; border: none; padding: 8px 15px; border-radius: 4px; cursor: pointer; display: inline-block; } ✅ Step 6: To Style the Close Button 7️⃣ If the countdown timer has a close button, apply the following style: .futureblink-countdown-timer .close-btn { color: yellow; cursor: pointer; } ✅ Step 7: To Style Navigation Arrows 8️⃣ If the countdown timer has navigation arrows, use these styles: .futureblink-countdown-timer .arrow { color: orange; } .futureblink-countdown-timer .button-prev { background: white; } .futureblink-countdown-timer .button-next { background: black; } ✅ Step 8: To Apply Complete Custom CSS .futureblink-countdown-timer { background: linear-gradient(green,aqua); } .futureblink-countdown-timer .title { color: white; background: transparent; } .futureblink-countdown-timer .subheading{ color: white; background: transparent; } .futureblink-countdown-timer .cta-button{ background: black; color: white; } .futureblink-countdown-timer .close-btn{ color: black; } .futureblink-countdown-timer .arrow{ color: white; } .futureblink-countdown-timer .button-prev{ background: black; } .futureblink-countdown-timer .button-next{ background :black; } ✅ Step 9: Save & Publish 9️⃣ Click Apply and then Save to confirm your changes. 🔟 Refresh your store to check how it looks! 🎉 That’s it! Your Countdown Timer now has a custom style to match your brand! 🚀

Last updated on Oct 27, 2025

How to add custom position placement to the Countdown Timer?

Learn to set a custom position for your Countdown Timer on the store. You can use Custom Position to manually place a countdown timer anywhere on your site. ✅ Step 1: Open the Hoppy Countdown timer app. 1️⃣ Go to Shopify Admin → Apps → Hoppy Countdown timer app and click on Create new Countdown. 2️⃣ You will see multiple placement options for your Countdown timer. Select the Countdown Type — where you want the timer to appear on your store, and then navigate to the Placement tabs. - Product Page🛍️ - Show a timer on product pages. This is ideal for flash sales or limited-time offers on specific items. - Top/Bottom Bar🔝🔽 - A sticky bar at the top or bottom of your website is great for sitewide messages or storewide promotions. - Landing Page 🖥️– Use this when creating a special landing page for a campaign or product launch. The timer will be shown there to emphasize urgency. - Cart Page – Display the countdown on the cart page to encourage customers to complete their purchase quickly. Perfect for limited-time cart holds or shipping deadlines. - Email Timer✉️ – Generate a timer image to embed in your email campaigns. This helps drive urgency in email promotions with an actual ticking clock. ✅ Step 2: Placement of the Countdown Timer 3️⃣ To place a countdown timer in a custom location, select Custom Position in the Placement tab settings and click Save. This will unlock two options: 🔹 Option 1: Using App Block (Recommended for Beginners) This method uses the Countdown ID to place the Countdown Timer. 📌 Steps to Add a Countdown Timer Using App Block: - First, Copy the Countdown ID. - Go to Shopify Admin → Online Store → Themes. - Click on Customize to open the Theme Editor. - Navigate to the page and the section where you want to add the countdown timer. Click on Add Section → Scroll to Apps → Select Hoppy Countdown. - Paste your Countdown ID in the right-hand settings panel. 🔹 Option 2: Using Custom Liquid (Advanced) This method requires adding a code snippet to your theme using Custom Liquid. 📌 Steps to Add a Countdown Timer Using Custom Liquid: - First, copy the Code snippet. - Go to Shopify Admin → Online Store → Themes. - Click on Customize to open the Theme Editor. - Navigate to the page and section where you want to add the timer. Click on Add Section → Search for Custom Liquid → Click on it. - Paste your Countdown Timer Code Snippet into the Custom Liquid editor. ✅ Step 3: Save and Test Your Placement 4️⃣ Click Save in Shopify's Theme Editor. 5️⃣ Visit your store and check if the timer appears in the correct position. 6️⃣ If the Countdown Timer is not visible, try: - Clearing your browser cache. - Checking if Custom Positioning is enabled in the Hoppy Countdown app. - Refreshing your store page. 🔥 Great job! Your Hoppy Countdown Timer is now positioned just the way you want! 🚀

Last updated on Nov 05, 2025

How to customize the design of the Countdown Timer?

Learn to customize the design of the Countdown Timer. ✅ Step 1: Open the Hoppy Countdown App 1️⃣ Go to your Shopify Admin 2️⃣ Click on Apps → Hoppy Countdown. - Create a new countdown timer or open the existing one and customize the content tab. ✅ Step 2: Go to the Design Tab 3️⃣ Click on the "Design" tab 4️⃣ Here you’ll find all customization options for your countdown timer. ✅ Step 3: Customize the Countdown Timer 5️⃣ You can personalize the design of your countdown timer to make it more attractive and engaging for your visitors. Here's what you can customize: - Template 🧩: Choose a preset countdown timer template or set it as custom and modify all elements on your own. - Visibility ✨: Choose between desktop, mobile or both to ensure timers are visible on the devices you wish. - Timer Style⏱️: Highlight the numbers in your timer to make them stand out. Choose the style from the dropdown. - Background🎨: Select a solid color, gradient, or pattern for your timer background. - Border🖼️: Adjust the style, size, and color of the border around your timer. - Spacing📏: Control the padding and margins around your timer for better layout. - Progress Bar📊: Enable the progress bar by checking the box (optional). - Separator➗: Choose the type, size, and color of the separators (like colons or dashes) between the timer units. - Typography🔤 : Customize the color, size, and font of the title and subheading to match your store branding. ✅ Step 4: Preview and Save Changes 6️⃣ Use the live preview to see how your timer will look before saving. 7️⃣ Once you're happy with the look, click Save to apply changes to your store. 🕒 All done! Your eye-catching countdown timer is ready to grab attention! 🚀

Last updated on Oct 28, 2025

How to Add Countdown Timer on the Cart Page?

Learn to add a Countdown Timer on the Cart Page ✅ Step 1: Open the Hoppy Countdown Timer 1️⃣ From your Shopify admin, open the Hoppy Countdown Timer app and click on 'Create new Countdown.' 2️⃣ Select the Countdown Type as Cart Page ✅ Step 2: Customize Your Countdown Timer 3️⃣ Under the Content tab, fill in the following fields: - Title📢 – The main heading of your countdown (e.g., Hurry! Sale ends soon!). - CTA(Call to Action) action type- You can choose what action visitors can take when they see the countdown timer. Select from the dropdown: - No Call to Action❌ : Choose this if you don’t want the timer to do anything when clicked. - Button 🔘 : This adds a CTA button next to your countdown timer. You can customize the button text and link it to any page you want. - Make Entire Bar Clickable 🖱️ – The entire countdown timer bar will be clickable and will redirect visitors to a link you provide (e.g., sale page, product, or collection). - Enter the number of minutes you want the countdown timer to run for. This defines how long the timer will show before it ends. - Choose what happens when the countdown reaches zero: - Unpublish Timer🛑– Automatically remove the countdown. - Show Custom message📢 – Replace timer with a message (e.g., Offer has ended!). - Delete Cart products – The product added in the cart will be deleted once the timer ends. ✅ Step 3: Customize the appearance of the Countdown Timer 4️⃣ Navigate to the Design tab to personalize your timer: - Navigate to the Design tab to personalize your timer: - Choose a Color Template 🎨 - Change Background Color, adjust Fonts, and set Button Colors - Add border style, spacing, separator, and customize typography. - Match the design with your brand style for a consistent experience. ✅ Step 4: Navigate to the Placement tab 5️⃣ Go to the Placement tab and set where and how the timer appears: - Time-on-Site Targeting ⏳ – Choose from the dropdown to either "Always Show" or "Show After a While" when a visitor arrives on your website. - Location on Store: Choose where to display the countdown: - At the Top of the Cart 🛒**-** The Timer will show at the top of the cart. - Custom Position 🎯 – Manually place the countdown anywhere on the cart page using the provided Countdown ID or Custom Liquid. ✅ Step 5: Save & Publish 6️⃣ Once you're satisfied, click Save and Publish to activate the countdown timer. 7️⃣ Check your store's Cart page and add products to preview the countdown live in action! 8️⃣ If necessary, return to the Hoppy Countdown Timer app and make adjustments. 🎉 That’s it! Your Countdown Timer is live and ready to create urgency and increase conversions! 🏁

Last updated on Oct 28, 2025

What are the supported countdown timer types?

Learn how to pick the right timer and understand what happens when it ends. 🛡️Timer Types - Countdown to a date Specific date/time 📅— counts down to a fixed calendar date & time. - Fixed Minutes (Duration)⏳ — counts down a fixed number of minutes (starts when shown). - Daily recurring timer(Runs daily for specific hours)🕰️— shows the timer only during the hours you set each day. - Interval timer🗓️ — one or more scheduled start/end windows (you can add up to 7 intervals). - Session timer 👤— starts a unique countdown for each visitor when they land on your site. 1️⃣ Countdown to a Date: how it works - This timer counts down to a particular calendar date and time you set. - Example: You set it for 31st December, 11:59 PM — it will keep ticking down until that exact moment. Useful for: sales ending on a fixed date, holiday offers, or event launches. 2️⃣ Fixed Minutes: how it works - Instead of a date, you choose several minutes. - The countdown starts when the visitor sees it. - Example: You set it for 15 minutes — when someone visits the page, their timer starts at 15:00 and runs down to 00:00. Useful for: Perfect for flash deals or urgency-based offers. 3️⃣ Daily Recurring Timer: how it works - This timer runs only during specific hours each day. Outside those hours, it won’t show. It resets every day at the time you choose. - Example: You have an offer that’s valid daily from 9 AM to 6 PM. The timer counts down from the remaining time during that period each day and disappears after 6 PM. Useful for: “Happy Hours” offers, daily flash sales, or promotions tied to store opening hours. 4️⃣ Interval timer: how it works - You define start and end times for each interval (up to 7). - The timer only appears during those windows for everyone who visits while the interval is active. - If an interval ends, the timer disappears (or follows the selected “on-expiry” action, see below). ​Use this for: scheduled sales, daily promos, or promotional windows. 5️⃣ Session timer: how it works - A new countdown session starts for each visitor when they land on the page. - The timer is personal; it runs independently for each visitor (not tied to a global clock). - Good for per-visitor urgency (e.g., “10 minutes to claim this deal” as soon as they arrive). ​Use this for: time-limited perks shown on first visit or per session offers. 🛡️ What happens when the countdown reaches zero (On-expiry options) When the timer ends, you can choose one of several actions. Common options and their behaviour: - Extend Timer ⏳ – When the timer ends, you can display an Extended Message and set a new duration for which the timer will continue running. - Reset / Restart Countdown ↩️ The timer returns to its original start value and begins counting down again.(This option shows when you select Fixed Minutes in the Timer types) - Do Nothing ❌ The timer simply stays inactive after expiry. - Show custom Messageℹ️ Replace the timer with a custom message (e.g., “Offer ended”) or a different banner. - Unpublish Timer🛑– Automatically remove the countdown.

Last updated on Oct 28, 2025

How to track performance of countdown timers?

Learn to track the countdown timer performance. Follow these steps to view and analyze how your countdown timer are performing: 1️⃣ Open the app - Log in to Shopify → Apps → Hoppy Countdown and open the app. 🔓 2️⃣ Go to Analytics - Scroll down the app's Dashboard and the Analytics section 📉 3️⃣ Check countdown timer counts & status - Published ➜ number of countdown timers currently live on your store. ✅ - Not published ➜ number of saved/drafted countdown timer not live. 📝 - Theme embedded (stats ON/OFF) ➜ shows whether the app’s status are active in your theme. - If OFF, the countdown timer may not be visible or tracked on the storefront - turn it on in your theme settings. ⚠️ 4️⃣ Read the chart metrics The analytics chart shows these key metrics: - Views 👀 ➜ how many times the countdown timer was seen. - CTA Button Clicks 🖱️ ➜ clicks on the timer's call-to-action button. - Closed ❌ ➜ how many visitors closed/dismissed the timer. 5️⃣ Filter by countdown timer name or all countdown timers - Use the dropdown above the chart to show data for a specific timer or all countdown timers. - Useful when you want the performance of a single campaign vs. the overall performance. 🔎 6️⃣ Choose a date range - Right above the chart, select the time window: Day / Month / Last 7 days / Last 30 days / Custom date range. 📅 - This lets you compare performance over time or see results from a specific push.

Last updated on Nov 05, 2025

How to add countdown timers on the checkout page?

Learn to add countdown timers in the checkout page ✅ Step 1: Open the Hoppy Countdown Timer 1️⃣ From your Shopify admin, open the Hoppy Countdown Timer app and click on Create new Countdown. 2️⃣ Select the Countdown Type as Checkout page(you will require shopify plus plan to add the timer in the checkout page) ✅ Step 2: Customize Your Countdown Timer 3️⃣ Under the Content tab, fill in the following fields: - Title📢 – The main heading of your countdown (e.g., Hurry! Sale ends soon!) - Enter the number of minutes you want the countdown timer to run for. This defines how long the timer will show before it ends. - Choose what happens when the countdown reaches zero: - Unpublish Timer🛑– Automatically remove the countdown. - Do Nothing⏸️ – Timer stays on the screen as-is. ✅ Step 3: Customize the Design of the Countdown Timer 4️⃣ Navigate to the Design tab to personalize your timer: - Separator➗: Choose the type, size, and color of the separators (like colons or dashes) between the timer units. - Typography🔤 : Customize the color, size, and font of the title and subheading to match your store branding. ✅ Step 4: Placement of the Countdown timer 5️⃣ In the Placement tab, you will see: - Time-on-Site Targeting ⏳ – Choose from the dropdown to either "Always Show" or "Show After a While" when a visitor arrives on your store. - Select Pages to Display (Checkout Page) This option is pre-selected as “Custom block placement set by the merchant”, meaning the timer’s position is already placed manually in your checkout page. ✅ Step 5: Save & Publish 6️⃣ Once you're satisfied, click Save and Publish to activate the countdown timer. 7️⃣ Check your store to preview the countdown live in action! 8️⃣ If necessary, return to the Hoppy Countdown Timer app and make adjustments. 🎉 That’s it! Your Countdown Timer is live on the checkout page and ready to create urgency and increase conversions! 🏁

Last updated on Oct 30, 2025