Install #1 Page Builder App for FREE and get deal 6 months of Standard Plan. Hurry up! See Detail  

Header background

Countdown Timer

Mie Tran

Written by Mie Tran

Last updated


On this page

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.


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"

tag has.gif

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 the message.

countdown timer.gif


  • 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".

loop day.gif
  • 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.

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.

  • 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

[Private Offer] EComposer Partner Plan

Exclusively for The4 users, when you bougth any theme from us, 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, Sale Funnel page, Lead pages, & other custom pages tailored for your marketing campaigns.
  • Create advanced sections & add to your theme with ease
  • 100+ professtional, stunning designer-made templates
  • Build pages with a love drag-drop editor, no coding required

How to claim offer. Install EComposer HERE. Then open chatbox icon in EComposer dashboard and leave a message with subject "Theme name+EComposer" to upgrade for free

Cheers, The4.

We uses cookies to ensure you get the best experience on our website.