Back to Blog

How to Build a Count Down Timer in Webflow

Add a Count Down Timer to your Webflow page in seconds with this simple guide.

{{ Template "copy-button" "id:extension-countdown" }}

Overview 📚

Got something special that you're counting down too? Have a limited time offer?

This is a simple solution to integrate a countdown into your Webflow Projects. Original codepen from Matt Smith

To add this into your project, follow the simple steps and add the custom code into your project or page settings.

{{ Template "gist" "text:Before </body> tag" "id:f2a6224b5ef93355bed7df4bc6a80ef7" }}

Instructions ✍️

1. Add the custom code to your page.

Navigate to your project or page settings area and add the custom code into both the before </body> tag area.

You can see this code references a few #IDs, these are the days, hours, minutes and seconds.


2. Add text elements that display the days, months etc

Add text elements to your page as you require, days, hours, minutes, seconds. In this case you would add 4 text elements to your page, you can use less if you wish to only count hours for example.

3. Add #ID for Days, Hours, Minutes, Seconds

While your text element is selected, navigate to the settings panel and add the IDs to match the type of count down element you require.

As mentioned, these #IDs are

  • days
  • hours
  • minutes
  • seconds

You can see how we do the same thing for hours

4. Publish & Test

That's it, you can publish this and test it works as intended.

OTHER GUIDES & LESSONS

Boost your webflow site further.

Join Over 30,000
Creators Today

Join our newsletter list for occasional updates, products and insights.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Join 30,000+ other creators across our communities.