Can I add countdown timer to my products?

Concept empowers you to incorporate countdown timers into your product pages, visually marking the time remaining until a discount expires. These timers effectively instill a sense of urgency, prompting customers to act swiftly and seize the opportunity before the discount vanishes.

This feature is working based on metafields. So, all you have to do is to add metafield definition, then set the countdown for the products you want.

On this page

• Countdown eligibility
• Adding metafield definition
• Setting the countdown for a product
• Displaying the countdown

Countdown eligibility

Countdown timer is working only when a product is put on sale for a lower price. So, please make sure that you set a compare at price for the products before you want to add a countdown for them, or the countdown will be disabled.

Adding metafield definition

Before you can add countdown (metafield value) to specific products, you need to add the necessary metafield definition for this information.

Note

This step only needs to be done once and will affect all products. If you have already done this, please skip it. Since metafields work independently of the theme, this step also doesn't need to be done again when you update or reinstall the theme.

1. From your Shopify admin > Settings > Metafields > Products.

   

2. Click Add definition.

   

3. In the Add product metafield definition box, set up the details of the new metafield including:

   • Name - Product countdown
   • Namespace and key - theme.countdown
   • Description (optional) - we add the description line 'Add key information to describe the product.'
   • Select content type - there are different content types such as line text, integer, date and time, file, etc. In this setting, we select the Date and time.

   

   • Select Date and time. By choosing this, you will have ability to specify the exact time for the countdown.

   

4. Click Save to save the definition.

5. You should see the Product countdown in the list of definitions by now.

   

Setting the countdown

1. In your admin, within Products, go to the product you want to add the countdown.

   

2. Scroll down to the Metafields, then click Show all to open the metafield values of the product.

   

3. You should see the Product countdown here.

   

4. To set an expiry time, click on the Product countdown field. Here shows up 2 inputs: one for date and one for time. Just set the date and time you want.

   

5. Click Save to save your changes.

   

Displaying the countdown

When a countdown is set to a product, there will be 2 elements representing the countdown: compact countdown on the product card, and full countdown on the product page.

Compact countdown

When a product is set up with a countdown, a mini countdown will be visible at the bottom of the product card. This countdown can be toggled via the section containing the product card.

1. For sections that contain product cards, there will be a setting called "Enable countdown" via Theme settings included to toggle the compact countdown on the product cards. Below is an example of the Featured collection section, which contains product cards:

   

   

2. Click Save to finish this setting.

Full countdown

When a product is set up with a countdown, a full countdown can be added on the product page.

To display the countdown on product pages:

1. Via the Customize panel, go to a product page. Within Product information section, click Add block > Countdown timer.

   

2. Here you can set the heading, number size and colors (heading, text, background) for the countdown.

   

3. Click Save to finish this setting.

We hope this article has been helpful. If you have any questions or concerns about this feature, please do not hesitate to contact our team for support.