Easy Countdown Timer Bar

Create urgency, drive conversions, and boost sales with beautiful countdown timer bars on your Shopify store.

⏱ Countdown Timers 🎨 16 Preset Styles 📱 Mobile Responsive 🛒 Shopify Native

📋 App Overview

Easy Countdown Timer Bar is a Shopify app that lets you add customizable countdown timer bars anywhere on your store — homepage, product pages, cart, collections, and more. It's designed to create urgency and encourage shoppers to act before time runs out.

🔥 Hurry up! Sale ends in:
01
Days
:
08
Hrs
:
34
Mins
:
52
Secs
⏳ Two Timer Types

Count down to a fixed date, or give each visitor their own personal timer that starts when they land on your page.

🎨 Fully Customizable

Colors, fonts, button styles, opacity, corner radius — every pixel is under your control with the Pro plan.

📌 Flexible Placement

Stick your timer to the top or bottom of the screen, or place it inline within your page content.

🏷 Coupon Integration

Let customers click the CTA button to instantly copy a discount code to their clipboard.

🔧 Installation

Install the app from the Shopify App Store and connect it to your theme — takes under 2 minutes.

Install from Shopify App Store

Search for Easy Countdown Timer Bar in the Shopify App Store and click Install. You'll be redirected to authorize the app.

Open the App Dashboard

After installation, you'll land on the app dashboard inside your Shopify admin. This is where all your timers live.

Connect to Your Theme

In your Shopify admin, go to Online Store → Themes → Customize. Add the Countdown Timer Bar block to any section. You can place it in the header area for a sticky top bar, or inline within a page section.

Assign a Timer to the Block

In the theme editor, select the Countdown Timer Bar block and enter your Timer ID (found in the app dashboard). Save the theme.

💡
The app dashboard shows a "Theme Extension Status" indicator. If it shows Not Connected, make sure you have added the block to your theme and saved it.

🚀 Quick Start

Create your first countdown timer in five minutes.

Click "Create New Timer"

From the dashboard, press the green Create New Timer button to open the timer editor.

Set Your Sale End Date

Go to the Timer tab, select Countdown to Date, then pick the date and time when your promotion ends.

Write Your Headline

On the Content tab, type your main title like "🔥 Flash Sale — Ends Soon!". Use bold or color to make it pop.

Pick a Preset Style

On the Design tab, click any of the preset color schemes to instantly transform the look of your timer bar.

Save & Preview

Click Save Timer. The live preview on the right updates in real-time as you make changes. Visit your store to see the timer live!

🏠 Dashboard

The dashboard is your home base — it lists every timer you've created with quick actions to manage them.

Timer List

Each timer shows its name, current status (Active / Inactive), and the date it was created. You can perform four actions on each timer:

ActionWhat it does
Toggle StatusSwitch a timer between Active (visible on your store) and Inactive (hidden) without deleting it.
EditOpen the timer editor to change any setting.
DuplicateClone an existing timer to use as a starting point for a new one.
DeletePermanently remove the timer. This cannot be undone.
⚠️
Free plan limit: You can only have 1 active timer at a time. Upgrade to Pro for unlimited timers.

Theme Extension Status

At the top of the dashboard, a status badge shows whether the Countdown Timer Bar block is connected to your live theme. If it shows Not Connected, no timers will appear on your storefront — visit your theme editor to add the block.

➕ Create a Timer

The timer editor has two panels: a tabbed settings form on the left and a live preview on the right. Changes you make are reflected in the preview instantly.

Live Preview

Toggle between Desktop and Mobile preview modes using the buttons above the preview panel. On mobile, the timer stacks vertically to fit smaller screens.

Save Bar

Whenever you change any setting, a save bar appears at the top of the page showing "You have unsaved changes". You can either:

  • Save Timer — commits all changes to the database
  • Discard — reverts to the last saved state

⏱ Timer Types

FREE Countdown to Date

Set a specific end date and time. All visitors see the same timer ticking down to that moment — perfect for flash sales, product launches, or limited-time offers.

Example: Sale ends December 31 at 11:59 PM

PRO Fixed Minutes

Each visitor gets their own personal countdown timer (stored in their browser). The timer starts the moment they first visit and persists across page loads.

Example: 30 minutes from first visit — great for cart urgency.

✅
Best practice: Use Countdown to Date for store-wide sales and Fixed Minutes on product or cart pages to create personal urgency for each shopper.

⚙️ Tab 1 — Basic Settings

The Basic tab controls the timer's identity and how it appears on the page.

SettingOptionsDescription
Timer Name Text (any) An internal label for your own reference. Not visible to shoppers. Use something descriptive like "Black Friday 2026".
Status Active / Inactive Controls whether the timer appears on your storefront. Set to Inactive to hide it without deleting.
Display Type Static / Top Sticky / Bottom Sticky Where the timer bar sits on the page. See the Display Positions section for details.

✏️ Tab 2 — Content & Messaging

The Content tab controls all the text, labels, and call-to-action elements that shoppers see.

Text Content

SettingDefaultDescription
Main Title "Hurry up! Sale ends in:" The headline of your timer bar. Supports rich text (bold, italic, color, alignment, emojis). Powered by TinyMCE editor.
Subheading (empty) Optional secondary line below the title. Also supports rich text formatting. Use it for a short promo message or discount detail.
Days Label "Days" The label displayed under the days counter. Max 20 characters.
Hours Label "Hrs" Label under the hours counter. Max 20 characters.
Minutes Label "Mins" Label under the minutes counter. Max 20 characters.
Seconds Label "Secs" Label under the seconds counter. Max 20 characters.

Typography

SettingDescription
Font Family Choose from 20+ Google Fonts: Inter, Roboto, Open Sans, Montserrat, Poppins, Lato, Raleway, Nunito, Playfair Display, Merriweather, Source Sans Pro, Ubuntu, Oswald, PT Sans, Rubik, Quicksand, Fira Sans, Titillium Web, Libre Baskerville, Josefin Sans

Call to Action

SettingOptionsDescription
Call to Action Type Button / Clickable Bar / None Button: A standalone button appears next to the timer.
Clickable Bar: The entire timer bar becomes a clickable link.
None: Display only — no click action.
Button Text Text (max 100 chars) The label on the CTA button. Default: "Shop now!". Only shown when CTA Type is Button.
Link URL URL Where clicking the button or bar takes the shopper. Example: /collections/sale or https://yourstore.com/discount/SAVE20.
Coupon Code Button On / Off Enables coupon copy mode. See Coupon Codes section.
Coupon Code Text The discount code copied to clipboard when shoppers click the button (e.g., SAVE20).

🕐 Tab 3 — Timer Configuration

The Timer tab controls the countdown logic — when it ends and what happens when it does.

SettingOptions / RangeDescription
Timer Type Countdown to Date / Fixed Minutes Choose your countdown mode. Fixed Minutes is a PRO feature.
Fixed Minutes Duration PRO 1 – 1440 minutes How many minutes each visitor's personal timer lasts. Only visible when Fixed Minutes is selected.
End Date Date picker The calendar date your sale or promotion ends. Applies to Countdown to Date mode.
End Time Time picker The exact time on the end date when the timer expires. Default: 23:59 (end of day).
When Timer Ends Hide / Custom Message / Do Nothing Hide: The timer bar disappears from the page.
Custom Message: Replaces the timer with a text message you write.
Do Nothing: Timer stays visible, frozen at 00:00:00:00.
Custom Message Text The message displayed after the timer expires (only when Custom Message is selected). Default: "Sale has ended! Check back soon for more deals."
✅
Set When Timer Ends to Custom Message if you want to keep the bar visible but let shoppers know the sale is over — this maintains page layout and doesn't cause a sudden jump.

🎨 Tab 4 — Design & Styling

The Design tab gives you full control over the visual appearance of your timer bar.

Preset Styles

Click any preset to instantly apply a complete color scheme. The first 5 presets are free; presets 6–16 require the PRO plan.

Black & Yellow Bold
01:08:34
Neon Green Vibrant
01:08:34
Shopify Green Classic
01:08:34
Orange Alert
01:08:34
Purple Premium
01:08:34
Sky Blue Fresh
01:08:34
PRO
Minimal Cream
01:08:34
PRO
Purple & Yellow
01:08:34
PRO
Red Urgent Flash
01:08:34
PRO
Summer Sky
01:08:34
PRO
Cyber Dark
01:08:34
PRO
Valentine Rose
01:08:34
PRO
Christmas Green
01:08:34
PRO
Bronze Luxury
01:08:34
PRO
Pink Beauty
01:08:34
PRO
Eco Friendly
01:08:34
PRO

Background & Colors PRO

SettingRangeDescription
Background ColorAny hex colorThe main background color of the timer bar. Click a swatch to apply a preset, or enter any hex code.
Background Opacity0% – 100%Adjust transparency of the background. Lower values make the bar semi-transparent.

Text Styling PRO

SettingRangeDescription
Title Size12px – 48pxFont size of the main title text.
Title ColorAny hex colorColor of the main title text.
Title Opacity0% – 100%Transparency of the title text.
Timer Size16px – 64pxFont size of the countdown digits (00:00:00:00).
Timer ColorAny hex colorColor of the countdown numbers.
Timer Opacity0% – 100%Transparency of the countdown numbers.
Label SizeSmall rangeFont size of the Days / Hrs / Mins / Secs labels beneath the digits.

Button Styling PRO

SettingRangeDescription
Button Background ColorAny hex colorFill color of the CTA button.
Button Background Opacity0% – 100%Transparency of the button fill.
Button Text ColorAny hex colorColor of the button label text.
Button Text Opacity0% – 100%Transparency of the button text.
Button Border ColorAny hex colorColor of the button's border line.
Button Border Size0px – 10pxThickness of the button border. Set to 0 to remove the border entirely.
Button Border Opacity0% – 100%Transparency of the button border.

🔩 Tab 5 — Advanced Options

Fine-tune small details that can make a big difference in how polished your timer looks.

SettingOptions / RangeDescription
Corner Radius 0px – 50px Rounds the corners of the timer bar. 0px = sharp rectangle, 50px = fully pill-shaped. Useful when using the timer as an inline block rather than a full-width bar.
Show Close Icon Yes / No When set to Yes, an ✕ button appears in the corner of the timer bar. Shoppers can dismiss the bar and it will not reappear for their current browser session.

🖌 Preset Styles

Presets are one-click color themes. Applying a preset changes the background, text, and button colors all at once. You can further customize any preset with the PRO design controls.

🔐
The first 5 presets are available on the Free plan. Presets 6–16 (all marked PRO) require an active Pro subscription.

🔘 Call-to-Action Options

The CTA element drives shoppers toward your desired action after they see the timer.

Show Button

A dedicated button appears beside the timer. Customize the label, color, and border. Links to any URL or triggers coupon copy.

Make Bar Clickable

The entire timer bar becomes one big link. No separate button — the whole bar navigates to your URL when clicked.

💡
If you set CTA to Clickable Bar but leave the Link URL empty, clicks will have no effect. Always fill in the URL when using this mode.

🏷 Coupon Code Button

Turn your CTA button into a one-click coupon copier. When enabled, shoppers click the button and your discount code is automatically copied to their clipboard.

Enable Coupon Mode

On the Content tab, toggle "Coupon Code Button" to On.

Enter Your Coupon Code

Type your Shopify discount code (e.g., SAVE20) in the Coupon Code field that appears.

Shoppers Copy & Apply

When a shopper clicks the button, the code is copied to their clipboard and the button briefly shows "Copied!". They can then paste it at checkout.

⚠️
Make sure the coupon code you enter here actually exists in your Shopify Discounts section — otherwise shoppers will copy a code that doesn't work at checkout.

📌 Display Positions

Choose how and where the timer bar sits on the page with the Display Type setting on the Basic tab.

ModeBehaviorBest For
Top Sticky Timer bar is fixed at the very top of the browser viewport and stays visible as shoppers scroll down the page. Site-wide sale announcements, maximum visibility
Bottom Sticky Timer bar is fixed at the bottom of the viewport and stays visible while scrolling. Subtler urgency that doesn't block the header, cart reminders
Static Timer bar scrolls with the page content, placed exactly where the theme block is positioned in the theme editor. Inline placement on product pages, above the Add to Cart button

Page Visibility

In the Shopify Theme Editor, when you add the Countdown Timer Bar block, you can choose which page types it appears on:

  • Home page
  • Product pages
  • Collection pages
  • Cart page
  • Custom / landing pages
  • Blog listing page
  • Blog post pages
  • Search results page

🔚 Timer End Behavior

Control what happens when the countdown reaches zero.

OptionWhat HappensWhen to Use
Hide The timer bar is immediately removed from the page. Shoppers who reload after the timer expires will not see the bar at all. When the sale is truly over and you don't want any trace of the banner.
Custom Message The timer digits are replaced with a custom text message you define (e.g., "Sale has ended! Check back soon."). When you want to keep the bar visible but communicate the sale is over without leaving an awkward 00:00:00:00 display.
Do Nothing The timer bar remains visible, frozen at 00:00:00:00. Edge cases where you still want the bar visible after expiry, or for testing purposes.

💳 Free vs Pro Plans

The app has two plans. Start free and upgrade when you need more timers or design control.

Free
$0
forever free
  • ✓ 1 active timer
  • ✓ Countdown to Date timer
  • ✓ 5 preset color styles
  • ✓ Basic CTA button & link
  • ✓ Static / sticky display
  • ✓ All page types supported
  • ✕ Custom design controls
  • ✕ Fixed minutes timer
  • ✕ Coupon code button
  • ✕ 16 preset styles
Pro
$6.99
per month  ·  or $5.59/mo billed yearly (save 20%)
  • ✓ Unlimited timers
  • ✓ All Free features
  • ✓ Fixed minutes (per-visitor) timer
  • ✓ All 16 preset color styles
  • ✓ Full custom design controls
  • ✓ Custom colors, opacity & sizes
  • ✓ Button border & corner radius
  • ✓ Coupon code button
  • ✓ Priority support
🎉 7-day free trial — no credit card required

⬆️ Upgrading to Pro

Open Pricing Page

In the app, click Upgrade to Pro in the dashboard banner or navigate to the Pricing page from the app navigation.

Choose Monthly or Yearly

Use the billing toggle to compare monthly ($6.99/mo) vs. yearly ($5.59/mo) pricing. Yearly saves you 20% and is billed as a single annual charge.

Start Your Free Trial

Click Start 7-Day Free Trial. You'll be redirected to Shopify's billing approval screen. Approve the charge to activate Pro.

All Pro Features Unlock Immediately

Once approved, all Pro features — unlimited timers, custom design, fixed timer, 16 presets — activate instantly.

✅
You can cancel anytime. If you cancel during the 7-day trial, you will not be charged. Downgrading to Free is instant.

❓ Frequently Asked Questions

Why is my timer not showing on the storefront?
Check three things: (1) The timer Status is set to Active. (2) You have added the Countdown Timer Bar block in your Shopify Theme Editor and saved. (3) The Timer ID entered in the theme block matches the ID shown on the dashboard. The dashboard also shows a Theme Extension Status badge — it should show Connected.
Can I show the timer only on certain pages?
Yes. In the Shopify Theme Editor, select the Countdown Timer Bar block and use the page-type checkboxes to enable or disable visibility on Home, Product, Collection, Cart, Blog, and Search pages. You can also add the block to specific sections on individual pages for precise placement.
What happens to my Free plan timer if I upgrade to Pro?
Your existing timer is preserved exactly as-is. Upgrading to Pro simply unlocks additional features and removes the 1-timer limit. Nothing is deleted or changed.
Does the Fixed Minutes timer reset when a customer clears their browser data?
Yes. The Fixed Minutes timer is stored in the visitor's browser localStorage. If they clear their browser data or use a different browser/device, a fresh timer will start. This is expected behavior — the timer is designed to create per-session urgency.
Can I have different timers on different pages?
Yes, with the PRO plan and unlimited timers. Add multiple Countdown Timer Bar blocks to your theme in different sections, and assign a different Timer ID to each. Use the page-type visibility controls to target each timer to the right pages.
Can I use the timer for multiple currencies or markets?
The timer itself is currency-agnostic — it just counts down time. However, note that the countdown uses the server-set end date/time. If your customers are in different time zones, they'll all see the timer reach zero at the same moment (the absolute UTC time you set).
How do I duplicate a timer for seasonal campaigns?
On the Dashboard, click the Duplicate button (copy icon) next to any existing timer. A new timer is created with all the same settings. Edit the end date and any messaging to match your new campaign, then save.

🛠 Troubleshooting

Timer shows 00:00:00:00

Your end date/time has already passed. Update the End Date and End Time on the Timer tab to a future date and save the timer.

Timer bar jumps or flickers on load

This can happen if your theme loads the block before the timer JavaScript initializes. Try moving the block higher in the section order in the Theme Editor so it loads earlier.

Coupon code is not copying

The copy-to-clipboard feature requires the page to be served over HTTPS. Shopify storefronts use HTTPS by default, so this should not be an issue in production. If you're testing locally, you may see this failure.

Custom fonts not loading

The app loads fonts from Google Fonts. If your store has a strict Content Security Policy (CSP) that blocks external font sources, the selected font may fall back to the system default. Contact your theme developer to whitelist fonts.googleapis.com.

Pro features still greyed out after upgrading

Try refreshing the app page. If the issue persists, log out and back into your Shopify admin, then reopen the app. If it's still not resolved, contact support.

Timer ID not found in theme editor

Your Timer ID is visible on the Dashboard — it appears in the timer list row or in the URL when editing a timer (/manage_timer?timer_id=XXXXX). Copy the full alphanumeric ID and paste it into the theme block's Timer ID field.

💬 Support

Our support team is happy to help with any questions about setup, customization, or billing.

📧 Email Support

Reach us at teqfinoapps@gmail.com. We typically respond within 24 hours on business days.

🌐 Website

Visit teqfino.com for more apps, news, and updates from our team.

⭐
Loving the app? Please consider leaving us a 5-star review on the Shopify App Store — it helps us keep building great tools for merchants like you!

Easy Countdown Timer Bar  ·  Built by TeqFino  ·  © 2026