Skip to main content
All CollectionsSite DesignDesign
How To: Add a Countdown Timer to your Site
How To: Add a Countdown Timer to your Site
Jovana T avatar
Written by Jovana T
Updated over 9 months ago

There are specific times of the year when people start counting down toward a specific event. The most recognizable is Christmas because it is a major Art selling time of year. It seems, though, that no matter how close it gets, people always are surprised by it or it sneaks up on them. ASF wanted to help alleviate some of these problems. As an Artist or even a Print Studio, using a countdown timer on your site may prove useful. For example, Print Studios generally stop guaranteeing delivery of items shipped for Christmas by a specific date. A countdown timer is a visible way to show customers when that cut off is.

If you want to learn how to implement a countdown timer on your site, please follow the directions below.

  1. Log in to your Art Storefronts Control Panel and click on the tab labeled Header & Footer. This is going to allow us to work in the Announcement Bar to create the timer.


    1.png
  2. Once you are on the Header & Footer tab you need to find the section labeled Announcement Bar. This is where we are going to implement that Countdown Timer.


    2.png
  3. First, find the section labeled Display and make sure it is set to On. This will cause the Announcement Bar to appear on every page of your website.


    3.png
  4. Find the section labeled Should Remain Fixed at Top and set it to No. We don't want this to take up too much room on the screen.


    10.png
  5. Then, scroll down to the section labeled Content and click on the button labeled Source. This is going to allow us to implement the code we need for the timer.


    4.png
  6. After you have clicked the Source button, copy the following code and paste it into the Content. To make sure the time is right, be sure to enter the time as listed in the coding and to make sure this works properly you MUST use the slashes. You CANNOT use dashes.

    <div class="countdown-container">
    <div class="clock" data-end-time="2017/10/30 12:00:00 AM">CountdownTimer</div>
    </div>

    5.png
  7. Once you’ve entered the code, find the section of code that says data-end-time and where you see the date, enter in the year, month and day that you want to timer to count down to. You MUST enter the date in the following format: Year (MUST BE 4DIGITS)-Month (MUST BE 2 DIGITS)- Day (MUST BE 2 DIGITS). DO NOT change anything else in this coding. If you break it, Art Storefronts WILL NOT fix it. We will tell you to remove and start over.



    6.png
  8. After you’ve changed the date for the countdown timer, click the Source button again.


    7.png
  9. Then click on the Save DO NOT CLICK THE BACK BUTTON. If you click the back button, you will lose all the changes you made and you will have to restart the process.


    8.png
  10. Then if you go to your live site, you will see the countdown timer in the announcement bar.


    9.png
Did this answer your question?