Product Availability Countdown

Hello everyone,
(Designer disclaimer)

I want to create a countdown timer that is specific to each product.
For this to work the countdown end date needs to be determined in the product CMS.

Any idea if this is possible?

Here is a link to a cloneable countdown
https://webflow.com/website/Project-Countdown

Any help would be greatly appreciated!

Hi @Leigh_Agius ,

I think that’s doable.
You’d need to add a text field in you product collection with the date formatted exactly the same as in the custom code.

image

Then replace what’s inside the apostrophes with a dynamic link to the date in your collection.

You cannot use a time/date field as it will be formatted differently and you’d need custom code to convert it.

That worked!

Had no idea you could do that.

Thanks heaps @ColibriMedia

1 Like

@Leigh_Agius

Hi Leigh,

I hope you are doing well.

I am looking for the exact same solution, but I am new to webflow. Do you mind posting some screenshots that explain how you achieved this?

Thank you for your time.

Have a great week.

Hey @brunobel

No problem!
@ColibriMedia is probably better to explain but I can try and break it down.

You need 3 things:

  1. A custom field in your product CMS
  2. The code from the above “Project Countdown” which you paste in your custom page settings. Tutorial Link
  3. Replace the date section “2021/07/04” in this code with a dynamic link which is done by clicking the add field + on the top right corner.

The field I created was called “Pre Order Countdown” see image where I replaced the date section with this link.

In my product CMS I have the desired date written in a field so when you set up your products you can choose.

Hope that helps!

1 Like

Hi Leigh,

I hope you are well.

Thank you for taking the time to do the screenshots and detailing your response. It really helps me to what I am trying to achieve, and I’ll implement it soon.

Have a wonderful week.

1 Like

Nice that you provided with all implementation! :slight_smile: Thanks!

1 Like

Is there a way to do this on a collection list since you don’t have the option to “add field” when you try to put the code on a static page

1 Like

@alialkofee Hello, same problem, I want to implement this system in a static page but I did not find any solution or topic that answer this question. :slight_smile: @alialkofee @Stan

Hello

Thanks for these information but an additional question.

I have the countdown timer on two collections but only one is working and the other one shows 00:00:00 Is there a workaround for this problem?

Example 1. https://www.cnftradar.com/featured/pastelbudz
Example 2. (Not working) https://www.cnftradar.com/cardano/theinvisionclub