Countdown Timer

The Countdown Timer is a luxury-focused timer system for promotional campaigns, sales events, and limited-time offers.

Key Benefits

• Luxury Design — Subtle, refined aesthetics with gold accent color
• Accessible — WCAG 2.1 AA compliant with ARIA live regions
• Performance Optimized — Pauses when tab is inactive
• Multi-Instance — Multiple timers on the same page
• Cross-Tab Sync — State synchronized across browser tabs
• Responsive — Perfect display across all devices

Display Formats

• dhms — Days, Hours, Minutes, Seconds (e.g., 2d 14h 32m 15s)
• hms — Hours, Minutes, Seconds (e.g., 14:32:15)

Using as a Section

Add via the theme customizer:

1. Navigate to Customize Theme
2. Click Add section
3. Select Countdown Timer
4. Configure: End Date, Format, Heading, Button Text, Button Link

Section Settings

Timer Configuration: End Date/Time, Display Format, Messages, Auto-hide, Progress bar, Timer Size (Compact, Default, Large, Inline)

Content: Heading, Subheading

Call to Action: Button Text, Button Link, Button Colors

Layout: Container Width (Narrow/Default/Full), Content Alignment, Padding

Using as a Snippet

Add timer anywhere in your theme:

{% render 'countdown-timer',
  end_time: '2025-12-31T23:59:59Z',
  format: 'dhms',
  before_message: 'Limited Time Offer:',
  after_message: 'Offer Expired',
  variant: 'compact',
  show_progress: true
%}

Parameters

Parameter	Type	Default	Description
end_time	String	required	ISO 8601 date/time (e.g., 2025-12-31T23:59:59Z)
format	String	dhms	Display format: dhms or hms
before_message	String	Offer ends in:	Message while timer is active
after_message	String	Offer ended	Message after expiry
auto_hide	Boolean	true	Auto-hide after expiry
show_progress	Boolean	false	Show progress bar
variant	String	default	Size: compact, default, large, inline

Use Cases

Product page: Add timer above “Add to Cart” for limited-time pricing.

Collection banner: Show timer for seasonal sales using metafields:

{% if collection.metafields.custom.sale_end_date %}
  {% render 'countdown-timer',
    end_time: collection.metafields.custom.sale_end_date,
    format: 'hms',
    before_message: 'Sale ends in:',
    auto_hide: true
  %}
{% endif %}

Homepage hero: Create urgency for flash promotions.

Metafield Integration

Store timer data in Shopify metafields for easy management:

{% if product.metafields.custom.sale_end_date %}
  {% render 'countdown-timer',
    end_time: product.metafields.custom.sale_end_date,
    format: 'dhms',
    before_message: 'Limited Time Price:',
    variant: 'compact'
  %}
{% endif %}

Timezone Handling

Always use UTC or specify timezone offset:

<!-- Good: UTC timezone -->
end_time: '2025-12-31T23:59:59Z'

<!-- Good: Specific timezone -->
end_time: '2025-12-31T23:59:59-05:00'

Customization

Override colors via CSS custom properties:

.countdown-timer-wrapper {
  --timer-gold: #C9A961;
  --timer-text: #2c2c2c;
  --timer-bg: #ffffff;
}

Luxury Brand Tips

• Use subtle animations
• Keep messaging elegant (“Exclusive offer concludes in:” not “HURRY!”)
• Use compact or inline variant for subtlety
• Use progress bars sparingly (only for major campaigns)
• Don’t display timers on all products simultaneously

Troubleshooting

Timer not appearing: Check that end_time is valid ISO 8601 format and the date is in the future.

Shows 00:00:00 immediately: End time is in the past or timezone offset is incorrect.

Flip animation not working: Check for prefers-reduced-motion: reduce in browser settings.