¡Crea tu cuenta regresiva GRATIS en Shopify!

Programa tu cuenta regresiva grátis en Shopify mediante el código, y escoge si quieres poner esta en uno, múltiples, o más productos!

Te comparto los códigos:

Fragmentos:

▼Fragmento (snippet)

{% if end_date != blank %}

<div class="temporizador">

{% if title != blank %}<h3 class="temporizador__title">{{ title }}</h3>{% endif %}
<div class="temporizador-display">
<div class="temporizador-block">
<span class="temporizador-block__numeros js-temporizador-dias">00</span>
<span class="temporizador-block__unidades">Días</span>
</div>

<div class="temporizador-block">
<span class="temporizador-block__numeros js-temporizador-horas">00</span>
<span class="temporizador-block__unidades">Horas</span>
</div>

<div class="temporizador-block">
<span class="temporizador-block__numeros js-temporizador-minutos">00</span>
<span class="temporizador-block__unidades">Minutos</span>
</div>

<div class="temporizador-block">
<span class="temporizador-block__numeros js-temporizador-segundos">00</span>
<span class="temporizador-block__unidades">Segundos</span>
</div>

</div>

</div>

<style>

.temporizador {
background: #f6fafd;
padding: 10px;
margin: 10px 0;
}

.temporizador--terminado {
display: none;
}

.temporizador__title {
@extend .paragraph;
text-align: center;
}

.temporizador-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;
}

.temporizador-block {
position: relative;
width: 25%;
padding: 0 10px;
&:not(:last-child):after {
content: ':';
position: absolute;
right: 0;
top: 3px;
}

}

.temporizador-block__numeros, {

}

.temporizador-block__unidades {
display: block;
text-align: center;
}

</style>

<script type="text/javascript">

var segundo = 1000,
minuto = segundo * 60,
hora = minuto * 60,
dia = (hora * 24);

var countDown = new Date('{{- end_date -}}').getTime(),
x = setInterval(function() {
var now = new Date().getTime(),

distance = countDown - now;

document.querySelector('.js-temporizador-dias').innerText = Math.floor(distance / (dia)),
document.querySelector('.js-temporizador-horas').innerText = Math.floor((distance % (dia)) / (hora)),
document.querySelector('.js-temporizador-minutos').innerText = Math.floor((distance % (hora)) / (minuto)),
document.querySelector('.js-temporizador-segundos').innerText = Math.floor((distance % (minuto)) / segundo);
}, segundo)

</script>

{% endif %}

◄Codigo para Seccion de producto

{% include 'temporizador',
title: "Apúrate, la oferta termina en:",
end_date: "Dic 31, 2022"
%}