Can I add countdown timer to my products?

Be Yours supports displaying a countdown timer on a product which counts down to the discount expiry date. The timers are a great way to create a sense of urgency for your product discounts and thereby encourage customer to buy before it's too late.

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

Requirements

  • Be Yours 4.0.0 or later

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.

  1. From your Shopify admin, go to Settings > Metafields > Products
  2. Click Add definition
  3. In the Name field, enter Product countdown, and then click the 'Product countdown' generated as you type from the list. This is the metafied used for storing the expiry date
  4. In the Namespace and key field, enter theme.countdown
  5. Click Select content type then select Date and time
  6. Select Date and time. By choosing this, you will have ability to specify the exact time for the countdown
  7. Click Save to save the definition.
  8. You should see the Product countdown in the list of definitions by now.

Setting the countdown

  1. In your admin, within Products, click on 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 3 elements representing the countdown: flash icon on the product card, compact countdown on the product card, and full countdown on the product page.

Flash icon

When a product is setup with a countdown, a flash icon will be added to the sale badge of the product card automatically

Compact countdown

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

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

Here's the list of sections that contain product cards in Be Yours, or in other words, sections that have the Enable countdown setting:

  • Featured collection
  • Product grid (on collection pages)
  • Search results (on search page)
  • Recently viewed products
  • Product recommendations (on product pages)
  • Cart recomendations (on cart page)

Full countdown

When a product is setup 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