Shopify Product Countdown Timer

Shopify Product Countdown Timer

Create countdown timers for flash sales, limited-time offers, or product launches to create urgency and boost conversions.

// Countdown Timer Class
class CountdownTimer {
    constructor(element, endTime, options = {}) {
        this.element = element;
        this.endTime = new Date(endTime).getTime();
        this.options = {
            labels: {
                days: 'Days',
                hours: 'Hours',
                minutes: 'Minutes',
                seconds: 'Seconds',
            },
            compact: options.compact || false,
            hideOnExpire: options.hideOnExpire || false,
            onExpire: options.onExpire || null,
            ...options
        };

        this.interval = null;
        this.init();
    }

    init() {
        if (isNaN(this.endTime)) {
            console.error('Invalid end time provided');
            return;
        }

        this.render();
        this.start();
    }

    render() {
        const template = this.options.compact ? this.getCompactTemplate() : this.getFullTemplate();
        this.element.innerHTML = template;
    }

    getFullTemplate() {
        return `
            <div class="countdown">
                <div class="countdown-section">
                    <span class="countdown-number" data-days>00</span>
                    <span class="countdown-label">${this.options.labels.days}</span>
                </div>
                <div class="countdown-separator">:</div>
                <div class="countdown-section">
                    <span class="countdown-number" data-hours>00</span>
                    <span class="countdown-label">${this.options.labels.hours}</span>
                </div>
                <div class="countdown-separator">:</div>
                <div class="countdown-section">
                    <span class="countdown-number" data-minutes>00</span>
                    <span class="countdown-label">${this.options.labels.minutes}</span>
                </div>
                <div class="countdown-separator">:</div>
                <div class="countdown-section">
                    <span class="countdown-number" data-seconds>00</span>
                    <span class="countdown-label">${this.options.labels.seconds}</span>
                </div>
            </div>
        `;
    }

    getCompactTemplate() {
        return `
            <div class="countdown countdown--compact">
                <span data-days>00</span>:
                <span data-hours>00</span>:
                <span data-minutes>00</span>:
                <span data-seconds>00</span>
            </div>
        `;
    }

    start() {
        this.update();
        this.interval = setInterval(() => this.update(), 1000);
    }

    update() {
        const now = new Date().getTime();
        const distance = this.endTime - now;

        if (distance < 0) {
            this.expire();
            return;
        }

        const days = Math.floor(distance / (1000 * 60 * 60 * 24));
        const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        const seconds = Math.floor((distance % (1000 * 60)) / 1000);

        this.element.querySelector('[data-days]').textContent = this.pad(days);
        this.element.querySelector('[data-hours]').textContent = this.pad(hours);
        this.element.querySelector('[data-minutes]').textContent = this.pad(minutes);
        this.element.querySelector('[data-seconds]').textContent = this.pad(seconds);
    }

    expire() {
        this.stop();

        if (this.options.hideOnExpire) {
            this.element.style.display = 'none';
        } else {
            this.element.innerHTML = '<p class="countdown-expired">Sale Ended</p>';
        }

        if (typeof this.options.onExpire === 'function') {
            this.options.onExpire();
        }

        // Trigger custom event
        document.dispatchEvent(new CustomEvent('countdown:expired', {
            detail: { element: this.element }
        }));
    }

    pad(num) {
        return num.toString().padStart(2, '0');
    }

    stop() {
        if (this.interval) {
            clearInterval(this.interval);
            this.interval = null;
        }
    }

    destroy() {
        this.stop();
        this.element.innerHTML = '';
    }
}

// Auto-initialize all countdown timers
document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('[data-countdown]').forEach(element => {
        const endTime = element.dataset.countdown;
        const compact = element.dataset.countdownCompact === 'true';
        const hideOnExpire = element.dataset.countdownHide === 'true';

        new CountdownTimer(element, endTime, {
            compact,
            hideOnExpire,
            onExpire: () => {
                // Custom action on expire
                console.log('Countdown expired!');
            }
        });
    });
});

Liquid Template Usage

<!-- Flash Sale Timer -->
<div class="sale-banner">
    <h3>Flash Sale Ends In:</h3>
    <div
        data-countdown="{{ '2025-12-31T23:59:59' | date: '%Y-%m-%dT%H:%M:%S' }}"
        data-countdown-hide="false">
    </div>
</div>

<!-- Product Page Timer -->
{% if product.metafields.custom.sale_end_date %}
    <div class="product-countdown">
        <p>Limited Time Offer!</p>
        <div
            data-countdown="{{ product.metafields.custom.sale_end_date }}"
            data-countdown-compact="false">
        </div>
    </div>
{% endif %}

<!-- Compact Timer -->
<div class="timer-compact">
    Sale ends in:
    <div
        data-countdown="{{ '2025-12-25T00:00:00' | date: '%Y-%m-%dT%H:%M:%S' }}"
        data-countdown-compact="true">
    </div>
</div>

<!-- Daily Deal (resets at midnight) -->
{% assign tomorrow = 'now' | date: '%s' | plus: 86400 | date: '%Y-%m-%dT00:00:00' %}
<div class="daily-deal">
    <h4>Today's Deal Ends In:</h4>
    <div data-countdown="{{ tomorrow }}"></div>
</div>

CSS Styling

/* Full Countdown */
.countdown {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 8px;
    color: #fff;
}

.countdown-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 60px;
}

.countdown-number {
    font-size: 32px;
    font-weight: bold;
    line-height: 1;
    margin-bottom: 5px;
}

.countdown-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.9;
}

.countdown-separator {
    font-size: 24px;
    font-weight: bold;
    opacity: 0.7;
}

/* Compact Version */
.countdown--compact {
    display: inline-flex;
    gap: 5px;
    padding: 10px 15px;
    background: #000;
    color: #fff;
    border-radius: 4px;
    font-size: 18px;
    font-weight: bold;
    font-family: monospace;
}

/* Expired State */
.countdown-expired {
    text-align: center;
    padding: 20px;
    background: #e74c3c;
    color: #fff;
    border-radius: 8px;
    font-weight: bold;
}

/* Sale Banner */
.sale-banner {
    text-align: center;
    padding: 30px;
    background: #f8f9fa;
    margin-bottom: 30px;
}

.sale-banner h3 {
    margin-bottom: 15px;
    font-size: 24px;
}

/* Product Countdown */
.product-countdown {
    background: #fff3cd;
    border: 2px solid #ffc107;
    border-radius: 8px;
    padding: 20px;
    margin: 20px 0;
    text-align: center;
}

.product-countdown p {
    margin-bottom: 15px;
    font-weight: bold;
    color: #856404;
}

/* Responsive */
@media (max-width: 576px) {
    .countdown-number {
        font-size: 24px;
    }

    .countdown-section {
        min-width: 50px;
    }

    .countdown {
        gap: 10px;
        padding: 15px;
    }
}

Advanced: Evergreen Timer

// Evergreen timer that resets for each visitor
class EvergreenTimer extends CountdownTimer {
    constructor(element, duration, options = {}) {
        const storageKey = 'timer_' + element.dataset.timerId;
        const savedEndTime = localStorage.getItem(storageKey);

        let endTime;
        if (savedEndTime) {
            endTime = savedEndTime;
        } else {
            // Set end time to current time + duration (in minutes)
            endTime = new Date(Date.now() + duration * 60000).toISOString();
            localStorage.setItem(storageKey, endTime);
        }

        super(element, endTime, options);
    }

    expire() {
        super.expire();

        // Optionally reset the timer after expiration
        const storageKey = 'timer_' + this.element.dataset.timerId;
        localStorage.removeItem(storageKey);
    }
}

// Usage: 24-hour evergreen timer
document.querySelectorAll('[data-evergreen-timer]').forEach(element => {
    const duration = parseInt(element.dataset.evergreenTimer); // in minutes
    new EvergreenTimer(element, duration, {
        compact: false,
        onExpire: () => {
            // Redirect or show special offer
            window.location.href = '/collections/sale';
        }
    });
});

Stock Countdown

// Combine with stock counter for urgency
class StockCountdown {
    constructor(element, stock, options = {}) {
        this.element = element;
        this.stock = stock;
        this.options = options;

        this.render();
    }

    render() {
        const urgencyClass = this.stock < 5 ? 'stock--critical' : this.stock < 20 ? 'stock--low' : '';

        this.element.innerHTML = `
            <div class="stock-counter ${urgencyClass}">
                <span class="stock-icon">🔥</span>
                <span class="stock-text">Only ${this.stock} left in stock!</span>
            </div>
        `;
    }
}

Features

• Flexible: Support for both full and compact layouts
• Customizable: Custom labels and styling
• Auto-Initialize: Automatic setup from data attributes
• Evergreen Option: Personal timers for each visitor
• Event System: Triggers events on expiration
• Responsive: Mobile-friendly design
• Multiple Timers: Run multiple timers on same page
• Persistent: Remembers timer state