How can I hide the timer on my product page when time is up?

Store Design

Topic summary

A user is seeking help to hide a countdown timer on their product page once it reaches zero. Currently, the timer displays negative values (e.g., -1 hour, -10 minutes) after expiration instead of disappearing.

Current Issue:

  • Timer continues counting into negative numbers after the end date
  • User wants the timer to hide automatically when countdown completes

Attempted Solutions:

  • One respondent shared a Stack Overflow link about JavaScript countdown alerts
  • Another provided modified code that adds a timer--expired class and CSS rule (display: none) when the countdown reaches zero
  • The original poster tried implementing the suggested code but reports it stopped working entirely

Technical Details:

  • The timer uses JavaScript with setInterval to calculate days, hours, minutes, and seconds
  • Code includes Liquid templating ({% if end_date != blank %})
  • CSS already contains a .timer--expired { display: none; } rule

Status: The discussion remains unresolved. The user’s original code functions but doesn’t hide on expiration, while the suggested fix causes the timer to stop working completely.

Summarized with AI on November 20. AI used: claude-sonnet-4-5-20250929.
1

My Timercount code I will put below, but I think who can help me with correct it, becasue when time is finished, its start calculating like -1 hour -10minutes and etc, maybe someone can a bit make some changes, when time is finish just timer hide from product page.

{% if end_date != blank %}
<div class="timer">
  {% if title != blank %}
    <h4 class="timer__title">{{ title }}</h4>
  {% endif %}
  <div class="timer-display">
    <div class="timer-block">
      <span class="timer-block__num js-timer-days">00</span>
      <span class="timer-block__unit">Days</span>
    </div>
    <div class="timer-block">
      <span class="timer-block__num js-timer-hours">00</span>
      <span class="timer-block__unit">Hours</span>
    </div>
    <div class="timer-block">
      <span class="timer-block__num js-timer-minutes">00</span>
      <span class="timer-block__unit">Minutes</span>
    </div>
    <div class="timer-block">
      <span class="timer-block__num js-timer-seconds">00</span>
      <span class="timer-block__unit">Seconds</span>
    </div>
  </div>
</div>
<style>
/* styles for timer */
  .timer {
    background: #f6fafd;
    padding: 10px;
    margin: 10px 0;
  }
  .timer--expired {
    display: none;
  }
  .timer__title {
    @extend .paragraph;
    text-align: center;
  }
  .timer-display {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    margin-top: 5px;
  }
  .timer-block {
    position: relative;
    width: 25%;
    padding: 0 10px;
    &:not(:last-child):after {
      content: ':';
      position: absolute;
      right: 0;
      top: 3px;
    }
  }
  .timer-block__num,
  .timer-block__unit {
    display: block;
    text-align: center;
  }
</style>
<script type="text/javascript">
  var second = 1000,
      minute = second * 60,
      hour = minute * 60,
      day = hour * 24;
  var countDown = new Date('{{- end_date -}}').getTime(),
      x = setInterval(function() {
      var now = new Date().getTime(),
          distance = countDown - now;
      document.querySelector('.js-timer-days').innerText = Math.floor(distance / (day)),
        document.querySelector('.js-timer-hours').innerText = Math.floor((distance % (day)) / (hour)),
      document.querySelector('.js-timer-minutes').innerText = Math.floor((distance % (hour)) / (minute)),
      document.querySelector('.js-timer-seconds').innerText = Math.floor((distance % (minute)) / second);
    }, second)
</script>
{% endif %}

Thanks for the help.

2

@Camila123 you can refer below link . it might be helpful to you :
Can I use a JavaScript Alert box to show a countdown timer? - Stack Overflow

3

To hide the timer when the time is finished, you can make a small modification to the existing code. Here’s an updated version of your code that hides the timer when the countdown reaches zero:

{% if end_date != blank %}
  
    {% if title != blank %}
      #### {{ title }}
    {% endif %}
    
      

        00
        Days
      

      
        00
        Hours
      

      
        00
        Minutes
      

      
        00
        Seconds
      

    

  

{% endif %}
4

@NomtechSolution

Added but not working, I attach my full code now, but don’t know when I add mine is working, when add your it is stop work.

{% if end_date != blank %}

{% if title != blank %}

 {{ product.metafields.custom.timer_title }} 

{% endif %}
00 Days
00 Hours
00 Minutes
00 Seconds
/* styles for timer */ .timer { background: #f6fafd; padding: 0px; margin: 10px 0; border: 1px solid; border-radius: 10px; } .timer--expired { display: none; } .timer__title { @extend .paragraph; text-align: center; font-size: 20px; } .timer-display { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-top: 5px; } .timer-block { position: relative; width: 25%; padding: 0 10px; &:not(:last-child):after { content: ':'; position: absolute; right: 0; top: 3px; } border: 1px solid; border-radius: 10px; } .timer-block__num, .timer-block__unit { display: block; text-align: center; font-weight: bold; color: #0000ff; } {% endif %}
5

@NomtechSolution

My code work, but when I add your code:

It stop working.

I don’t know why it is like that, maybe need some changes?