The Countdown feature is an essential conversion engine for sneaker stores and footwear brands. By displaying a real-time ticking clock (Days, Hours, Minutes, Seconds), it creates immediate purchasing urgency for scheduled sneaker drops, limited-quantity vault releases, holiday flash sales, and raffle deadlines.
In Sneax, the Countdown is available in two distinct, powerful implementations:
- The Modular Countdown Block (
blocks/countdown.liquid): A flexible theme block that can be inserted directly into product pages, hero banners, slideshows, or container groups. - The Standalone Countdown Section (
sections/countdown.liquid): A high-impact, dual-tone promotional section that combines a live header countdown with a split-screen editorial hero photo and a shoppable product carousel!
1. The Modular Countdown Block (blocks/countdown.liquid) #
Use the Countdown block when you want to place a live ticking timer inside existing layouts, such as above the “Add to Cart” button on your Main Product page, inside a Hero Banner, or within a Slideshow slide.
Where You Can Add It #
- Product Pages (
Main product/Featured product): Pinned near the price or buy buttons to motivate instant checkout on limited-edition kicks. - Hero Banners & Slideshows: Ticking down to an upcoming collection launch.
- Custom Sections & Groups: Paired with Heading and Button blocks.
Block Settings #
| Setting | Type | Default | Options / Range | Description |
|---|---|---|---|---|
| Expiration date | Text | 2026-12-25 12:00 | Format: YYYY-MM-DD HH:MM | The exact target date and time when the countdown reaches zero. |
| Text size | Select | H2 | H1, H2, H3, H4, H5, H6 | Controls the typography scale of the numbers and unit labels. |
| Expiration behavior | Select | Leave | Hide, Leave | Defines what happens to the timer once time expires. |
| Background color | Color | Optional | Custom Color Picker | Applies an optional solid background behind the timer container. |
| Countdown text color | Color | Optional | Custom Color Picker | Sets a specific custom color for the timer numbers and colons. |
Expiration Behaviors Explained #
- Leave (Default): When the clock reaches zero, the timer remains visible on the page with digits frozen at
00:00:00:00. Ideal for sneaker drops that are currently live. - Hide: The entire countdown block automatically disappears from the page the second the clock reaches zero (
display: none), cleanly removing expired promotional copy.
2. The Standalone Countdown Section (sections/countdown.liquid) #
The standalone Countdown section is a full-width promotional showcase designed for high-traffic pages (such as your Homepage or Sale Landing Page).
Unlike basic banner themes, Sneax’s Countdown section features a dual-color layered layout: a bold countdown header on top, leading into a split grid with an editorial campaign image on the left and a swipeable product carousel on the right.
Section Settings #
| Setting | Type | Default | Options / Range | Description |
|---|---|---|---|---|
| Color scheme | Color Scheme | scheme-2 | Theme Schemes | Controls the outer background and text color of the entire section. |
| Inner background color | Color Scheme | scheme-3 | Theme Schemes | Sets the background of the inner card, creating a stylish dual-tone contrast. |
| Section width | Select | Page-width | Page-width, Full-width | Controls horizontal margins across desktop displays. |
| Heading | Text | Up to 36% OFF on shoes. | Free Text | The main promotional headline displayed above the timer. |
| Heading size | Select | H4 | H1 – H6 | Sets the typography hierarchy of the section heading. |
| Expiration date | Text | 2026-12-31 23:59:00 | Format: YYYY-MM-DD HH:MM:SS | The target deadline for the promotion. |
| Image | Image Picker | Blank | Media Upload | Editorial campaign visual or on-foot photography shown on the left. |
| Collection | Collection | Blank | Store Collections | Selects the collection of sneakers to display in the carousel. |
| Show ‘Add to cart’ | Checkbox | Enabled | Toggle | Renders direct Quick Add buttons on all product cards in the slider. |
| Top padding | Range Slider | 80px | 0px – 200px (step 5px) | Vertical spacing above the section. |
| Bottom padding | Range Slider | 80px | 0px – 100px (step 1px) | Vertical spacing below the section. |
Interactive Split-Grid Experience #
- Editorial Left Column: Displays your high-resolution lifestyle photograph paired with built-in Prev/Next navigation pill buttons.
- Shoppable Right Column: Powers an interactive Swiper carousel featuring live product cards from your chosen collection. Shoppers can inspect colorways, review prices, and tap the Quick Add button directly from the slider.
- Placeholder Fallback: If no collection is selected yet, Sneax renders 6 elegant placeholder footwear cards so your store layout remains functional during setup.
3. Date & Time Formatting Rules #
To ensure your countdown timer calculates correctly across all global time zones:
- Use the 24-hour format:
YYYY-MM-DD HH:MM(e.g.,2026-11-28 18:00for 6:00 PM on November 28, 2026). - If setting seconds in the standalone section:
YYYY-MM-DD HH:MM:SS(e.g.,2026-11-28 18:00:00). - The JavaScript engine automatically calculates real-time time differences between the visitor’s local system clock and your target expiration date.
Sneaker Store Best Practices #
- Use Dual-Tone Contrast for Flash Drops:
- In the standalone Countdown section, pair an outer dark scheme (
scheme-2orscheme-4) with an inner vibrant or light scheme (scheme-1orscheme-3). This creates a layered, streetwear-magazine appearance that commands immediate attention.
- In the standalone Countdown section, pair an outer dark scheme (
- Set Expiration Behavior to “Hide” for Limited Flash Discounts:
- If offering a 24-hour weekend discount code, set Expiration behavior to Hide. The timer will vanish the moment the discount expires, preventing customer confusion.
- Pin Above Buy Buttons on Limited Footwear Releases:
- On rare sneaker drops or restocks, place the Countdown block directly above the quantity and buy buttons on the product page. This reinforces scarcity and accelerates purchase decisions before sizes sell out.
- Keep Quick Add Enabled in the Carousel:
- Enabling Show ‘Add to cart’ in the Countdown section lets high-intent collectors select their shoe size and add discounted pairs to their cart without leaving your homepage.