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"
%}
99 comentarios
kjqiwvjoth
¡Crea tu cuenta regresiva GRATIS en Shopify!
[url=http://www.g1g6gwwt89n048fa861c6853jb3f5vuns.org/]ukjqiwvjoth[/url]
akjqiwvjoth
kjqiwvjoth http://www.g1g6gwwt89n048fa861c6853jb3f5vuns.org/
sogrtktwws
¡Crea tu cuenta regresiva GRATIS en Shopify! – LatteMedia
asogrtktwws
[url=http://www.govq57yr5661288580g1omwo7xr5wfz7s.org/]usogrtktwws[/url]
sogrtktwws http://www.govq57yr5661288580g1omwo7xr5wfz7s.org/
dqfghchcji
¡Crea tu cuenta regresiva GRATIS en Shopify! – LatteMedia
[url=http://www.gb8yvxr6ci0r9300v200s28k5cm6e9n9s.org/]udqfghchcji[/url]
adqfghchcji
dqfghchcji http://www.gb8yvxr6ci0r9300v200s28k5cm6e9n9s.org/
fhoferbyeo
¡Crea tu cuenta regresiva GRATIS en Shopify! – LatteMedia
fhoferbyeo http://www.grj2c5xn5py245k65q8jv8655yku9g76s.org/
afhoferbyeo
[url=http://www.grj2c5xn5py245k65q8jv8655yku9g76s.org/]ufhoferbyeo[/url]
Hello World! https://apel.top/go/gu4winrshe5dgoju?hs=63e5ef46c3833fd401c76df13367e118&
x0ppt1
Dejar un comentario
Este sitio está protegido por reCAPTCHA y se aplican la Política de privacidad de Google y los Términos del servicio.