倒计时代码

theme->edit code->section->countdown-shopify-gi.liquid

新建countdown-shopify-gi.liquid文件，全选复制以下代码

<section class="common-section-container common-section-container-{{section.id}} ">
  
.countdown-container {
    text-align: center;
}
.countdown {
    display: flex;
    justify-content: center;
    gap: 20px;
}
.time-segment {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.time {
    font-size: 3rem;
    font-weight: bold;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 20px;
    min-width: 100px;
    margin-bottom: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}
.time:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
}
.label {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}

</style>
  <div class="common-waw-container common-waw-container-{{section.id}}">

  <div class="common-section-container-inner">

 
    <div class="page-width row container"> 
 
 
<div class="common-waw-outer">

  {%if section.settings.title!=blank or section.settings.text!=blank%}

    <div class="common-header">
    {%if section.settings.title!=blank%}
    <h2 class="section-title common-title animate-js do">
        {{section.settings.title}}
    </h2>
   {%endif%}
   
   </div>
   {%endif%}

 
   
  <div class="common-countdown-box">
    <div class="countdown-container">
      <div class="countdown">
          <div class="time-segment">
              <div class="time" id="days">00</div>
              <div class="label">Days</div>
          </div>
          <div class="time-segment">
              <div class="time" id="hours">00</div>
              <div class="label">Hours</div>
          </div>
          <div class="time-segment">
              <div class="time" id="minutes">00</div>
              <div class="label">Minutes</div>
          </div>
          <div class="time-segment">
              <div class="time" id="seconds">00</div>
              <div class="label">Seconds</div>
          </div>
      </div>
 
</div>
 
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
        function getTimeRemaining(endtime) {
            const total = Date.parse(endtime) - Date.parse(new Date());
            const seconds = Math.floor((total / 1000) % 60);
            const minutes = Math.floor((total / 1000 / 60) % 60);
            const hours = Math.floor((total / (1000 * 60 * 60)) % 24);
            const days = Math.floor(total / (1000 * 60 * 60 * 24));
            
            return {
                total,
                days,
                hours,
                minutes,
                seconds
            };
        }

        function initializeClock(endtime) {
            function updateClock() {
                const t = getTimeRemaining(endtime);

                $('#days').text(('0' + t.days).slice(-2));
                $('#hours').text(('0' + t.hours).slice(-2));
                $('#minutes').text(('0' + t.minutes).slice(-2));
                $('#seconds').text(('0' + t.seconds).slice(-2));

                if (t.total <= 0) {
                    clearInterval(timeinterval);
                }
            }

            updateClock();
            const timeinterval = setInterval(updateClock, 1000);
        }

        const deadline = new Date("{{section.settings.time}} 00:00:00").getTime();
        initializeClock(deadline);
    });
</script>
 
</div> 
 
</div>
</div>
</section> 
 
{% schema %}
  {
    "name": "CountDown title",
    "settings": [

    {
      "type": "html",
      "id": "title",
      "label": "Title"
    },
    {
      "type": "text",
      "id": "time",
      "default": "Time",
      "label": "设置倒计时时间",
      "info":"时间格式 2024/12/25" 
    }
    ],
    "presets": [
      {
        "name": "CountDown title"
      }
    ]
  }
{% endschema %}