Countdown Timer

A countdown timer can be defined as a virtual clock that counts down from a certain date or number to indicate the end or start of an offer or event. It can be used to create curiosity and motivate customers to make a purchase before the end of the event.

1. General Options

  • Show countdown timer: This option allows you can select products to show countdown timer. There are 2 types: All products or Only product have tag "has_stock_countdown"

Only products have tag "has_stock_countdown" this option will show if you add the tag "has_stock_countdown" in Products Shopify.

  • ICON / IMG: You can select the options to show in front of the message.

  • Icon class name: You can add the icon you want to show.

  • Image: Select the image to show in front of the message.

  • Text align: You can align the heading left, center, or right.

  • Message: You can change the content of the countdown time here.

  • Font size: This option allows you can change the size of message.


  • Date Range Slider: Reset countdown every X days from an initial date. Set "0" to disable and reset the countdown.

"theme.countdown": Please follow this guideline to know more about this key.


Looping or repeating the countdown timer, you just need to enter your timer between each loop. After the first interval of the loop is over, it will move on to the 2nd loop and so on until the end. If you want it to be repeated on the following days then enable the option "Use Loop Countdown".

  • theme.countdown_day: This metafield helps you configure the loop day. Please follow my guideline:

Step 1: You need to add the metafield, please click on Settings > Custom data > Products > Add Definition.

Step 2: You need to fill the key "theme.countdown_day" and select content type is "Single line text".

Step 3: Add the countdown loop day in the Product custom metafield. Please fill hour of the day, 24-hour clock (00..23), minute of the hour (00..59), second of the minute (00..59) such as 8:00:00,16:00:00,23:59:59


If you want each product to show a different countdown timer then use metafields, otherwise the countdown will show the default time in the theme.

  • Countdown design: There are 3 types of design for countdown timer.

  • Countdown size: You can change the size of countdown timer.

  • Border radius/ Border width/ Space between items/ Space between items (Mobile): These options allow you to configure the countdown timer.

  • Number color/ Text color/ Border color item time/ Background item time: These options will help you to change the color of elements' countdown timer.

[Private Offer] EComposer Partner Plan

Exclusively for Kalles users, you can get EComposer - Theme Partner Plan for ZERO and start making beautiful, high-converting store pages today:

  • FREE 100% EComposer Standard plan for 6 months (save you $114)

  • Build ANY Shopify pages: Landing page, Sales Funnel page, Lead pages, & other custom pages tailored for your marketing campaigns.

  • Create advanced sections & add to Kalles with ease

  • Save up to 50 pages/sections

  • 100+ professional, stunning pre-designed templates

  • Anyone can build pages with live drag-drop editor

How to claim offer: Install EComposer HERE. Then open chatbox icon in EComposer dashboard and leave a message with subject “Kalles+EComposer” to upgrade for free

Cheers, The4.

Last updated