How can I create a heading for my timer box?

Store Design
1

Hi,

I using my timer, but I tried create heading for it, because in visual just numbers and I dont know how, maybe someone can help me to create heading in timer box inside?

And maybe someone can add code when its finish just hide? Because now write EXPIRED I had changed to it.

Thanks for the help !

{% capture time_check %}
{% for tag in product.tags %}
{%if tag contains 'Time_' %}
{% assign tag_time = tag | split : 'Time_' | last %}
{{ tag_time }}
{% endif %}
{%  endfor %}
{% endcapture %}
{% if tag_time %}
<div class="countdown_wrap">
  <div class="countdown_time" id="js_set_time" >
    <div class="timer-block">
      <span class="countdown_number js-days">00</span>
      <span class="countdown_title">Days</span>
    </div>
    <div class="timer-block">
      <span class="countdown_number js-hours">00</span>
      <span class="countdown_title">Hours</span>
    </div>
    <div class="timer-block">
      <span class="countdown_number js-minutes">00</span>
      <span class="countdown_title">Minutes</span>
    </div>
    <div class="timer-block">
      <span class="countdown_number js-seconds">00</span>
      <span class="countdown_title">Seconds</span>
    </div>
  </div>
</div>
<style>
  .countdown_time{
    margin-top: 30px;
        background: #efefef;
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
  }
  .countdown_time .timer-block{
    width: 25%;
  }
  .countdown_time .timer-block span{
    display: block;
        text-align: center;
  }
</style>

<script type="text/javascript">
  var settime = "{{ tag_time }}";
  (function (){
    if(settime.length  > 0 ){
      var countDownDate = new Date(settime).getTime();
      var x = setInterval(function() { 
        // Get todays date and time
        var now = new Date().getTime(); 
        // Find the distance between now an the count down date
        var distance = countDownDate - now; 
        // Time calculations for days, hours, minutes and seconds
        var days = Math.floor(distance / (1000 * 60 * 60 * 24));
        if(days < 10 )
        {
          var days = '0' + days;
        }else{
          days = days;
        }
        var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        if(hours  < 10 )
        {
          var hours = '0' + hours;
        }else{
          hours = hours;
        }
        var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        if(minutes  < 10 )
        {
          var minutes = '0' + minutes;
        }else{
          minutes = minutes;
        }
        var seconds = Math.floor((distance % (1000 * 60)) / 1000); 
        document.querySelector('.js-days').innerText = days;
        document.querySelector('.js-hours').innerText = hours;
        document.querySelector('.js-minutes').innerText = minutes;
        document.querySelector('.js-seconds').innerText = seconds;
        if (distance < 0) {
          clearInterval(x);
          document.getElementById("js_set_time").innerHTML = "Out of date";
        }
      }, 1000);
    }
  })();
</script>
{% endif %}
2

Add HTML and CSS: In the selected template file, find the section where you want to place the timer heading and add the following code:

Countdown Timer Heading

Style the timer heading: To style the timer heading, add the following CSS code to your theme’s CSS file (such as “theme.scss.liquid” or “styles.scss.liquid”):

.timer-heading {
text-align: center;
margin-bottom: 20px;
}

.timer-heading h2 {
font-size: 24px;
color: #333;
}

#countdown {
font-size: 36px;
color: #FF0000;
}

Timer JavaScript code: To create the countdown functionality, you’ll need to add JavaScript code to your theme. This code can be placed either inline within the same template file or in a separate JavaScript file.

Here’s an example of the JavaScript code using the Moment.js library:

3

Hi Camila123,

This is Deepak here

I went through your code and this is static code meaning you will have to change the code every time you need to change the promotion date and extra, I came across an amazing code that will help you customize your timer from theme customization it will also allow you to link product, collection of your choice to redirect customers. Get the code from here