7 códigos Liquid para Shopify gratis (copiar y pegar)
Los códigos Liquid para Shopify son bloques de HTML, CSS y Liquid, el lenguaje de plantillas de Shopify, que pegas dentro de una sección de Liquid personalizado y añaden algo a la ficha de producto sin instalar nada: una tabla de comparación, unos checkpoints de envío, un contador de oferta. Aquí tienes los siete que uso, completos y listos para copiar. De cada uno te digo qué se edita, dónde va en la ficha y qué falla si lo pegas tal cual.
Aclaro una cosa antes de nada, porque Google mezcla las dos: estos no son códigos de descuento. No sirven para pagar menos por Shopify ni para conseguir un cupón. Son trozos de código que cambian cómo se ve tu página de producto.
Y aviso de dónde vengo, arriba y no al final: yo vendo un tema de Shopify. Los siete códigos de aquí abajo son gratis y funcionan en cualquier tema, incluido el que ya tengas. Al final del artículo explico qué hace distinto mi tema, y lo declaro ahí para que puedas saltártelo.
Los siete códigos en vídeo, pegándolos uno a uno
En el vídeo hago exactamente lo mismo que vas a leer aquí, pero en pantalla: abro el editor, pego cada bloque y se ve el resultado en la ficha. La tienda de pruebas es un tema Dawn con modificaciones mínimas, o sea el punto de partida de cualquiera que acabe de montar la tienda.
¿Dónde se pegan los códigos Liquid en Shopify?
En una sección de Liquid personalizado. Es una sección que trae Shopify de serie desde la arquitectura de secciones de Online Store 2.0, así que la tienes aunque uses un tema gratis y aunque no sepas programar. El recorrido es el mismo para los siete:
- En el panel de Shopify, ve a Tienda online y luego a Temas, y pulsa Personalizar en el tema que estés usando.
- Arriba, cambia la plantilla a Productos para estar editando la ficha de producto y no la portada.
- En la columna de la izquierda, pulsa Agregar sección o Agregar bloque, según dónde lo quieras, y baja hasta Liquid personalizado.
- Pega el código dentro del recuadro y guarda.
Un bloque de Liquid personalizado dentro de la sección de producto se coloca donde tú lo arrastres: encima del título, debajo del botón de comprar, entre la descripción y las reseñas. Una sección de Liquid personalizado ocupa el ancho entero y va por encima o por debajo del bloque de producto.
Se quitan igual de rápido que se ponen. Borras el bloque en el editor y no queda rastro: no has tocado el código del tema, no has instalado una app y no hay nada que desinstalar. Por eso probarlos no tiene coste, y por eso merece la pena poner uno, mirarlo en el móvil y decidir después.
Los códigos que llevan {%- assign -%} arriba tienen marcada la zona editable con un comentario que dice EDITA SOLO ESTO. Todo lo que hay debajo de esa línea es la maquinaria: si la tocas sin saber qué haces, lo más probable es que el bloque deje de pintarse.
Debajo de cada título va una captura de ese bloque ya pegado, para que veas qué pinta antes de decidir si lo quieres. Son el propio código renderizado con los valores del ejemplo, no fotos de una tienda ajena.
1. Tabla de comparación: tu producto contra el resto
Es una tabla de dos columnas que enfrenta lo que tú ofreces con lo que ofrecen los demás. Responde a la objeción más cara de todas, la de que eso mismo se encuentra más barato en otro sitio, y la responde sin que tengas que escribir un párrafo defendiéndote. Va debajo de la descripción del producto, cuando la persona ya sabe qué está mirando y está decidiendo dónde lo compra.
Es el que más cambia la página de un solo pegado, y por eso va el primero.
Código completo de la tabla de comparación · 41 líneas
{%- comment -%} ===== EDITA SOLO ESTO ===== {%- endcomment -%}
{%- assign us_label = "Tu tienda" -%}
{%- assign others_label = "Otros" -%}
{%- assign rows = "Calidad premium~Envío en 3-5 días~Garantía 30 días~Soporte 24/7" | split: "~" -%}
{%- comment -%} columna OTROS por fila: 1 = tambien lo tienen, 0 = no (misma cantidad que filas) {%- endcomment -%}
{%- assign others = "0,0,0,1" | split: "," -%}
{%- assign ac = "#1a4d2e" -%}
{%- assign atx = "#ffffff" -%}
{%- assign tc = "#121212" -%}
{%- assign check = "#37955a" -%}
{%- assign x = "#121212" -%}
{%- comment -%} ===== NO TOQUES DEBAJO ===== {%- endcomment -%}
{%- capture ck -%}<svg viewBox="0 0 448 512" aria-hidden="true"><path fill="currentColor" d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>{%- endcapture -%}
{%- capture xm -%}<svg viewBox="0 0 384 512" aria-hidden="true"><path fill="currentColor" d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256z"/></svg>{%- endcapture -%}
<div class="dd0ct"><table class="dd0ct__t">
<thead><tr><th class="dd0ct__hx"> </th><th>{{ us_label }}</th><th>{{ others_label }}</th></tr></thead>
<tbody>
{%- for r in rows -%}
<tr><td class="dd0ct__b">{{ r }}</td><td class="dd0ct__d"><span class="dd0ct__ck">{{ ck }}</span></td><td class="dd0ct__d">{%- if others[forloop.index0] == "1" -%}<span class="dd0ct__ck">{{ ck }}</span>{%- else -%}<span class="dd0ct__x">{{ xm }}</span>{%- endif -%}</td></tr>
{%- endfor -%}
</tbody></table></div>
<style>
.dd0ct{max-width:600px!important;margin:16px auto!important;font-family:inherit;box-sizing:border-box!important}
.dd0ct *{box-sizing:border-box;margin:0}
/* © 2026 Alejandro Atienza · DD0 Pro */
.dd0ct .dd0ct__t{width:100%!important;border-collapse:separate!important;border-spacing:0!important;font-family:inherit}
.dd0ct .dd0ct__t th{padding:.5rem .75rem .9rem!important;font-size:1.05rem!important;font-weight:700!important;line-height:1.3!important;color:{{ tc }}!important;text-align:center!important;vertical-align:bottom!important;background:transparent!important}
.dd0ct .dd0ct__t tbody{filter:drop-shadow(0 .4rem 1.2rem rgba(0,0,0,.12))}
.dd0ct .dd0ct__t td{padding:1rem 1.5rem!important;text-align:center!important;vertical-align:middle!important;background:#fff!important;color:{{ tc }}!important}
.dd0ct .dd0ct__t td:first-child{width:44%!important}
.dd0ct .dd0ct__t .dd0ct__d{border-bottom:1px solid rgba(0,0,0,.09)!important;border-left:1px solid rgba(0,0,0,.09)!important}
.dd0ct .dd0ct__t tbody tr:last-child td{border-bottom:0!important}
.dd0ct .dd0ct__t .dd0ct__b{background:{{ ac }}!important;color:{{ atx }}!important;font-weight:700!important;text-align:center!important;line-height:1.25!important;border-bottom:1px solid rgba(255,255,255,.14)!important}
.dd0ct .dd0ct__t tbody tr:first-child td:first-child{border-radius:16px 0 0 0!important}
.dd0ct .dd0ct__t tbody tr:first-child td:last-child{border-radius:0 16px 0 0!important}
.dd0ct .dd0ct__t tbody tr:last-child td:first-child{border-radius:0 0 0 16px!important}
.dd0ct .dd0ct__t tbody tr:last-child td:last-child{border-radius:0 0 16px 0!important}
.dd0ct .dd0ct__t svg{width:1.4rem!important;height:1.4rem!important;display:inline-block!important;vertical-align:middle!important}
.dd0ct .dd0ct__ck{color:{{ check }}!important}
.dd0ct .dd0ct__x{color:{{ x }}!important}
</style>Lo que se edita: us_label y others_label son los títulos de las dos columnas. rows son las filas, separadas por el símbolo ~. others es la columna de la competencia: un 1 si ellos también lo tienen y un 0 si no. Los cinco colores del final son el acento, el texto de la primera columna, el texto general, el check y la equis.
others tiene que llevar exactamente tantos valores como filas tenga rows. Si pones cinco filas y dejas los cuatro valores del ejemplo, la quinta sale con una equis aunque tú quisieras un check, porque el bloque lee la posición y ahí no hay nada. Lo avisa el propio comentario del código, y es el fallo que más veces me he encontrado.Hay algo más, que no es un fallo del código sino de criterio: deja algún
1. Una tabla donde el otro pierde en las cuatro filas se lee como lo que es, un montaje. Por eso el ejemplo le concede el soporte 24/7.2. Lista de beneficios con iconos
Tres líneas con un icono delante, para que las ventajas del producto se lean de un vistazo en vez de quedar enterradas en un párrafo. Va justo debajo del precio o del botón de comprar, que es donde la vista se para.
Código completo de la lista de beneficios con iconos · 33 líneas
<ul class="features-list">
<li>
<i class="fas fa-wind"></i>Smoothness and Volume for Every Hair Type
</li>
<li>
<i class="fas fa-tools"></i>Blow Dryer, Straightener & Curler in One
</li>
<li>
<i class="fas fa-thermometer-empty"></i> Style with Airflow, No Extreme Heat
</li>
</ul>
<style>
.features-list {
list-style: none;
padding: 0;
}
.features-list li {
font-size: 14px;
display: flex;
align-items: center;
margin-bottom: 8px;
line-height: 1.2;
}
.features-list i {
margin-right: 10px;
color: auto;
flex-shrink: 0;
}
</style>
<!-- Cargar FontAwesome desde CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">Lo que se edita: el texto de cada <li> y la clase del icono, esa que empieza por fas fa-. El color lo hereda del tema, así que ahí no hay nada que tocar.
Y hay un coste que no se ve: cargar Font Awesome es una petición a un servidor que no es el tuyo, en cada visita, para pintar tres iconos. Por eso en el documento hay un bloque alternativo con los iconos ya dibujados en SVG. Se pegan dentro del propio texto, heredan el color con
currentColor, se agrandan cambiando el tamaño de letra y no cargan nada de fuera.3. Checkpoints de envío: cuándo llega el pedido
Tres pasos con su línea de tiempo, del pedido a la entrega. Ataca la ansiedad de cuándo llega el paquete, que en dropshipping es la que más carritos abandona. Va debajo del botón de comprar.
Código completo de los checkpoints de envío · 45 líneas
<!-- © 2026 Alejandro Atienza · DD0 Pro -->
{%- comment -%} ===== EDITA SOLO ESTO ===== {%- endcomment -%}
{%- assign paso1_top = "Order placed" -%}
{%- assign paso1_bottom = "Today" -%}
{%- assign paso2_top = "Shipped" -%}
{%- assign paso2_bottom = "July 8" -%}
{%- assign paso3_top = "Delivered" -%}
{%- assign paso3_bottom = "July 10 - July 14" -%}
{%- assign color_acento = "#1a4d2e" -%}{%- comment -%} circulos + linea {%- endcomment -%}
{%- assign color_icono = "#ffffff" -%}{%- comment -%} icono dentro del circulo {%- endcomment -%}
{%- assign color_texto = "#1a4d2e" -%}{%- comment -%} etiqueta de arriba {%- endcomment -%}
{%- assign color_fecha = "#009370" -%}{%- comment -%} texto de abajo (fecha) {%- endcomment -%}
{%- comment -%} ===== FIN DE LO EDITABLE ===== {%- endcomment -%}
<div class="dd0cp">
<div class="dd0cp__line" aria-hidden="true"> </div>
<div class="dd0cp__step">
<span class="dd0cp__icon dd0cp__icon--stroke"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" focusable="false"><polyline points="20 6 9 17 4 12"/></svg></span>
<p class="dd0cp__top">{{ paso1_top }}</p>
<p class="dd0cp__bottom">{{ paso1_bottom }}</p>
</div>
<div class="dd0cp__step">
<span class="dd0cp__icon"><svg viewBox="0 0 462.522 462.522" fill="currentColor" focusable="false"><path d="M432.958 222.262c-1.452-0.305-2.823-0.592-4.042-0.909c-13.821-3.594-20.129-5.564-24.793-14.569l-17.667-35.768c-5.678-10.961-20.339-19.879-32.682-19.879h-31.453v-41.303c0-7.416-6.034-13.45-13.452-13.45l-219.07 0.22c-7.218 0-12.661 5.736-12.661 13.343v12.208H21.018C9.429 122.156 0 131.584 0 143.174s9.429 21.018 21.018 21.018h56.119v20.145H40.394c-11.589 0-21.018 9.429-21.018 21.018s9.429 21.018 21.018 21.018h36.743v20.145H59.77c-11.589 0-21.018 9.429-21.018 21.018s9.429 21.018 21.018 21.018h17.367v21.07c0 7.416 6.034 13.45 13.45 13.45h22.788c3.549 24.323 24.542 43.064 49.837 43.064s46.291-18.741 49.841-43.064h92.224c0.479 0 0.97-0.032 1.46-0.064c3.522 24.354 24.528 43.128 49.845 43.128s46.291-18.741 49.841-43.064h32.732c12.885 0 23.368-10.482 23.368-23.366v-39.648C462.522 228.465 444.73 224.732 432.958 222.262z"/></svg></span>
<p class="dd0cp__top">{{ paso2_top }}</p>
<p class="dd0cp__bottom">{{ paso2_bottom }}</p>
</div>
<div class="dd0cp__step">
<span class="dd0cp__icon"><svg viewBox="0 0 24 24" fill="currentColor" focusable="false"><path d="M20 8h-3V4H1v13h2c0 1.66 1.34 3 3 3s3-1.34 3-3h6c0 1.66 1.34 3 3 3s3-1.34 3-3h2v-5l-3-4zM6 18.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm12 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM17 12V9.5h2.5l1.96 2.5H17z"/></svg></span>
<p class="dd0cp__top">{{ paso3_top }}</p>
<p class="dd0cp__bottom">{{ paso3_bottom }}</p>
</div>
</div>
<style>
.dd0cp{ position:relative !important; display:grid !important; grid-template-columns:repeat(3,1fr) !important; justify-items:center !important; align-items:flex-start !important; column-gap:1rem !important; margin:12px 0 !important; padding:0 !important; font-family:inherit; box-sizing:border-box !important; --dd0cp-icon:4rem; }
.dd0cp *{ box-sizing:border-box; }
.dd0cp .dd0cp__line{ position:absolute !important; top:calc(var(--dd0cp-icon) / 2) !important; left:50% !important; transform:translate(-50%,-50%) !important; width:66.667% !important; height:3px !important; background:{{ color_acento }} !important; z-index:0 !important; font-size:0 !important; line-height:0 !important; overflow:hidden !important; margin:0 !important; }
.dd0cp .dd0cp__step{ position:relative !important; z-index:1 !important; display:flex !important; flex-direction:column !important; align-items:center !important; text-align:center !important; margin:0 !important; }
.dd0cp .dd0cp__icon{ width:var(--dd0cp-icon) !important; height:var(--dd0cp-icon) !important; border-radius:50% !important; margin:0 0 1rem 0 !important; display:flex !important; align-items:center !important; justify-content:center !important; background:{{ color_acento }} !important; color:{{ color_icono }} !important; flex-shrink:0 !important; }
.dd0cp .dd0cp__icon svg{ width:calc(var(--dd0cp-icon) / 2) !important; height:calc(var(--dd0cp-icon) / 2) !important; display:block !important; fill:currentColor !important; }
.dd0cp .dd0cp__icon--stroke svg{ fill:none !important; stroke:currentColor !important; }
.dd0cp .dd0cp__top{ margin:0 !important; font-size:1rem !important; line-height:1.2 !important; font-weight:600 !important; letter-spacing:normal !important; text-transform:none !important; text-decoration:none !important; color:{{ color_texto }} !important; }
.dd0cp .dd0cp__bottom{ margin:0.5rem 0 0 0 !important; font-size:1rem !important; line-height:1.2 !important; font-weight:400 !important; letter-spacing:normal !important; text-transform:none !important; text-decoration:none !important; color:{{ color_fecha }} !important; }
@media (min-width:750px){ .dd0cp{ --dd0cp-icon:5rem; } .dd0cp .dd0cp__top, .dd0cp .dd0cp__bottom{ font-size:1.5rem !important; } }
</style>Lo que se edita: los seis textos de los tres pasos, de paso1_top hasta paso3_bottom, más los cuatro colores. Arriba va la etiqueta y abajo la fecha.
"July 8" y "July 10 - July 14", en inglés y a mano, y no se calculan solas. Si lo pegas tal cual, dentro de dos meses tu tienda seguirá prometiendo una entrega de julio.Tienes dos salidas: cambiarlas a mano cada cierto tiempo, o poner rangos que no caduquen, del estilo en 3-5 días y en 7-12 días. Yo uso la segunda, y de paso es más honesta: en dropshipping la fecha exacta casi nunca la sabes.
4. Círculo de estadísticas
Tres círculos con un porcentaje dentro, para respaldar con un número lo que acabas de prometer. Funciona bien justo después de los checkpoints o de la tabla, cuando ya has hecho una afirmación y toca sostenerla.
Código completo del círculo de estadísticas · 38 líneas
{%- comment -%} ===== EDITA SOLO ESTO ===== {%- endcomment -%}
{%- assign pcts = "92,88,97" | split: "," -%}
{%- assign labels = "Clientes que repiten~Lo recomiendan~Vale el precio" | split: "~" -%}
{%- assign subs = "sobre 3.412 pedidos~a un amigo~calidad/precio" | split: "~" -%}
{%- assign ac = "#334fb4" -%}
{%- assign track = "#e5e7eb" -%}
{%- assign tc = "#334fb4" -%}
{%- assign sc = "#8a8a8a" -%}
{%- comment -%} ===== NO TOQUES DEBAJO ===== {%- endcomment -%}
{%- assign circ = 327 -%}
<div class="dd0rg">
{%- for p in pcts -%}
{%- assign fill = p | times: circ | divided_by: 100 -%}
{%- assign gap = circ | minus: fill -%}
{%- assign i = forloop.index0 -%}
<div class="dd0rg__c">
<div class="dd0rg__r"><svg viewBox="0 0 120 120"><circle class="dd0rg__tr" cx="60" cy="60" r="52"/><circle class="dd0rg__pr" cx="60" cy="60" r="52" style="--o:{{ gap }}"/></svg><div class="dd0rg__n">{{ p }}<span class="dd0rg__pct">%</span></div></div>
<p class="dd0rg__l">{{ labels[i] }}</p>
{%- if subs[i] != blank -%}<p class="dd0rg__s">{{ subs[i] }}</p>{%- endif -%}
</div>
{%- endfor -%}
</div>
<style>
.dd0rg{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:clamp(.5rem,3vw,1.5rem)!important;align-items:start!important;margin:16px 0!important;font-family:inherit;box-sizing:border-box!important}
.dd0rg *{box-sizing:border-box;margin:0}
/* © 2026 Alejandro Atienza · DD0 Pro */
.dd0rg .dd0rg__c{display:flex!important;flex-direction:column!important;align-items:center!important;text-align:center!important;min-width:0!important}
.dd0rg .dd0rg__r{position:relative!important;width:100%!important;max-width:160px!important;aspect-ratio:1!important}
.dd0rg .dd0rg__r svg{width:100%!important;height:100%!important;transform:rotate(-90deg)!important;display:block!important}
.dd0rg .dd0rg__tr{fill:none!important;stroke:{{ track }}!important;stroke-width:11!important}
.dd0rg .dd0rg__pr{fill:none!important;stroke:{{ ac }}!important;stroke-width:11!important;stroke-linecap:butt!important;stroke-dasharray:{{ circ }}!important;stroke-dashoffset:var(--o)!important;animation:dd0rgf 1.4s ease-out forwards!important}
.dd0rg .dd0rg__n{position:absolute!important;top:50%!important;left:50%!important;transform:translate(-50%,-50%)!important;font-size:clamp(1rem,4.6vw,1.9rem)!important;font-weight:700!important;line-height:1!important;color:{{ ac }}!important}
.dd0rg .dd0rg__pct{font-size:.6em!important;vertical-align:super!important;margin-left:1px!important}
.dd0rg .dd0rg__l{margin-top:.75rem!important;font-size:clamp(.8rem,2.6vw,1.2rem)!important;font-weight:600!important;line-height:1.25!important;color:{{ tc }}!important}
.dd0rg .dd0rg__s{margin-top:.2rem!important;font-size:clamp(.65rem,2vw,.9rem)!important;line-height:1.25!important;color:{{ sc }}!important}
@keyframes dd0rgf{from{stroke-dashoffset:{{ circ }}}to{stroke-dashoffset:var(--o)}}
@media(prefers-reduced-motion:reduce){.dd0rg .dd0rg__pr{animation:none!important}}
</style>Lo que se edita: pcts son los tres porcentajes separados por comas. labels es lo que dice cada círculo y subs la letra pequeña de debajo, las dos separadas por ~. Los colores del final son el del relleno, el del carril de atrás, el del número y el del subtítulo.
Y lo que no es un fallo del código sino un problema tuyo: el ejemplo dice sobre 3.412 pedidos. Si esa cifra no es real en tu tienda, no la pongas. Un número inventado debajo de un círculo sigue siendo un número inventado, y es de las pocas cosas de esta lista que te pueden costar un disgusto de verdad.
5. Barra de anuncio con contador
Una barra ancha con un mensaje de oferta y un contador que baja. Es el bloque de urgencia, y va arriba del todo, por encima del contenido de la página.
Código completo de la barra de anuncio con contador · 132 líneas
<!-- ANNOUNCEMENT BAR - Copia y pega en tu tema de Shopify -->
<!-- Puedes cambiar: background (#1a5240), textos, y la fecha/hora de fin del countdown -->
<style>
.ann-bar {
width: 100%;
background-color: #064f3b;
padding: 10px 20px;
box-sizing: border-box;
font-family: inherit;
}
.ann-bar__inner {
max-width: 1200px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
gap: 48px;
}
.ann-bar__text {
display: flex;
flex-direction: column;
gap: 3px;
}
.ann-bar__title {
margin: 0;
color: #ffffff;
font-size: 15px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
line-height: 1.2;
}
.ann-bar__subtitle {
margin: 0;
color: #ffffff;
font-size: 12px;
font-weight: 400;
letter-spacing: 0.02em;
opacity: 0.88;
line-height: 1.2;
}
.ann-bar__countdown {
display: flex;
align-items: center;
gap: 6px;
}
.ann-bar__unit {
display: flex;
flex-direction: column;
align-items: center;
min-width: 35px;
}
.ann-bar__number {
color: #ffffff;
font-size: 23px;
font-weight: 600;
line-height: 1;
letter-spacing: 0.02em;
font-variant-numeric: tabular-nums;
}
.ann-bar__label {
color: #ffffff;
font-size: 10px;
font-weight: 400;
letter-spacing: 0.05em;
opacity: 0.82;
margin-top: 2px;
}
.ann-bar__dot {
color: #ffffff;
font-size: 26px;
font-weight: 700;
line-height: 1;
padding-bottom: 14px;
opacity: 0.75;
}
@media (max-width: 640px) {
.ann-bar__inner { flex-direction: column; gap: 10px; }
.ann-bar__text { align-items: center; text-align: center; }
.ann-bar__number { font-size: 22px; }
}
</style>
<div class="ann-bar">
<div class="ann-bar__inner">
<div class="ann-bar__text">
<p class="ann-bar__title">SPRING SALE</p>
<p class="ann-bar__subtitle">Shop Now and Get Up To 70% Off</p>
</div>
<div class="ann-bar__countdown">
<div class="ann-bar__unit">
<span class="ann-bar__number" id="ann-hours">00</span>
<span class="ann-bar__label">Hrs</span>
</div>
<span class="ann-bar__dot">.</span>
<div class="ann-bar__unit">
<span class="ann-bar__number" id="ann-mins">00</span>
<span class="ann-bar__label">Mins</span>
</div>
<span class="ann-bar__dot">.</span>
<div class="ann-bar__unit">
<span class="ann-bar__number" id="ann-secs">00</span>
<span class="ann-bar__label">Secs</span>
</div>
</div>
</div>
</div>
<script>
// Cambia esta fecha y hora a cuando quieres que termine la oferta
var ANN_END = new Date("2027-05-05T23:59:00");
function annPad(n) { return n < 10 ? '0' + n : '' + n; }
function annTick() {
var diff = ANN_END - new Date();
if (diff <= 0) {
document.getElementById('ann-hours').textContent = '00';
document.getElementById('ann-mins').textContent = '00';
document.getElementById('ann-secs').textContent = '00';
return;
}
var s = Math.floor(diff / 1000);
document.getElementById('ann-hours').textContent = annPad(Math.floor(s / 3600));
document.getElementById('ann-mins').textContent = annPad(Math.floor((s % 3600) / 60));
document.getElementById('ann-secs').textContent = annPad(s % 60);
}
annTick();
setInterval(annTick, 1000);
</script>Lo que se edita: el color de fondo, los dos textos, y sobre todo la línea var ANN_END = new Date(...), que es la fecha y la hora a la que termina la cuenta atrás.
El primero es que la fecha del ejemplo es de 2027 y el contador solo pinta horas, minutos y segundos: no tiene casilla de días. Si lo pegas sin cambiar la fecha, tu barra de oferta va a anunciar varios miles de horas, que es la forma más rápida de que nadie se la crea.
El segundo es lo que pasa al llegar a cero: se queda clavado en
00:00:00 y no se reinicia solo. Alguien tiene que entrar a cambiar la fecha. Si lo que quieres es una oferta permanente que se renueve sola, eso es otro bloque, el 17.1 del documento, y ese va en la carpeta de secciones del tema en vez de en un Liquid personalizado.6. Aviso de regalo con la fecha de hoy
Una barra que anuncia el envío gratis o el regalo y que escribe sola el día de hoy. Es urgencia que se mantiene fresca sin que la toques, justo lo contrario que el contador de arriba. Va debajo del botón de comprar.
Código completo del aviso de regalo · 14 líneas
<div class="gift-banner">
<svg width="20" height="20" viewBox="0 0 24 24" fill="#c0392b" aria-hidden="true">
<path d="M20 6h-2.18c.11-.31.18-.65.18-1a2.996 2.996 0 0 0-5.5-1.65l-.5.67-.5-.68C10.96 2.54 10.05 2 9 2 7.34 2 6 3.34 6 5c0 .35.07.69.18 1H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-5-2c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zM9 4c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm11 15H4v-2h16v2zm0-5H4V8h5.08L7 10.83 8.62 12 11 8.76l1-1.36 1 1.36L15.38 12 17 10.83 14.92 8H20v6z"/>
</svg>
<span><b>FREE Shipping</b> until <b id="today"></b></span>
</div>
<script>(function(){var d=new Date();document.getElementById('today').textContent=['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'][d.getDay()]+' '+d.getDate()})();</script>
<style>
.gift-banner{display:flex;align-items:center;justify-content:center;gap:.7em;padding:.7em 1em;background:linear-gradient(135deg,#ffe5e5 0%,#fff0f0 100%);border:2px solid #E74C3C;border-radius:.4em;margin:.9rem 0;min-height:48px;font-size:1.3rem;color:#2c3e50;text-align:center;box-shadow:0 2px 6px rgba(231,76,60,.12)}
.gift-banner b{color:#c0392b;font-weight:600}
.gift-banner svg{flex-shrink:0}
@media(max-width:768px){.gift-banner{font-size:1.2rem;padding:.6em;min-height:44px;gap:.6em}.gift-banner svg{width:18px;height:18px}}
@media(max-width:480px){.gift-banner{font-size:1.1rem;padding:.5em;min-height:40px;gap:.5em}.gift-banner svg{width:16px;height:16px}}
</style>Lo que se edita: el texto del <span>, y los colores del degradado y del borde si quieres que pegue con tu marca.
Sunday. Si tu tienda está en español, la barra va a decir Friday 24 en medio de una página en castellano. Se arregla en diez segundos cambiando los siete nombres de la lista, pero hay que saber que está ahí.Y cuidado con lo que prometes: la barra dice hasta hoy todos los días. Si mañana sigue diciendo lo mismo, la promesa deja de significar nada. Úsala cuando el envío gratis sea de verdad tu condición, no como un último día que nunca llega.
7. Aviso de pocas unidades
Un punto rojo que parpadea con un texto al lado. Es el más corto, el más fácil y el que menos puede salir mal. Va justo encima del botón de comprar.
Código completo del aviso de pocas unidades · 50 líneas
<div class="dd0-alert">
<div class="dd0-dot" style="display:block!important"></div>
<span class="dd0-message">Low Stock | Order now</span>
</div>
<style>
.dd0-alert {
display: flex !important;
align-items: center;
gap: 8px;
}
.dd0-dot {
width: 8px !important;
height: 8px !important;
min-width: 5px !important;
min-height: 5px !important;
background: #ff0000 !important;
border-radius: 50% !important;
animation: dd0-pulse 2s infinite !important;
flex-shrink: 0 !important;
}
.dd0-message {
color: #ff0000;
font-weight: 500;
font-size: 12px;
animation: dd0-blink 2s infinite;
}
@keyframes dd0-pulse {
0% {
box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7);
transform: scale(1);
}
70% {
box-shadow: 0 0 0 10px rgba(255, 0, 0, 0);
transform: scale(1.1);
}
100% {
box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
transform: scale(1);
}
}
@keyframes dd0-blink {
0%, 100% { opacity: 1; }
50% { opacity: 0.6; }
}
</style>Lo que se edita: solo el texto de dentro del <span>, que en el ejemplo viene en inglés.
¿Dónde va cada código dentro de la ficha?
El sitio importa tanto como el código. Un bloque bueno colocado donde nadie mira no hace nada, y tres bloques amontonados encima del botón de comprar se estorban entre ellos. Esta es la colocación que uso:
| Zona de la ficha | Qué va ahí | Por qué |
|---|---|---|
| Encima de todo, ancho completo | Barra de anuncio con contador | Es lo único que tiene sentido leer antes que el producto |
| Debajo del precio | Lista de beneficios con iconos | Sostiene el precio en el momento en que lo ves |
| Justo encima del botón de comprar | Aviso de pocas unidades | Es un empujón, y solo funciona pegado al botón |
| Justo debajo del botón | Checkpoints de envío y aviso de regalo | Responden las dos dudas que aparecen después de decidir comprar |
| Debajo de la descripción | Tabla de comparación y círculo de estadísticas | Son argumento, y el argumento pide que ya sepas qué estás mirando |
En el vídeo doy además esta recomendación, y es la que yo pondría antes que ninguna otra si tuvieras que elegir solo tres cosas: el bloque de reseña justo debajo del carrito, el de valoración con estrellas justo encima del título, y una barra pequeña de garantía y envío seguro. Los tres están en el mismo documento que estos siete. Y si lo que te falta no es el bloque sino las reseñas, eso va por otro lado: lo cuento en cómo crear reseñas en Shopify gratis.
¿Estos códigos ralentizan la tienda?
Seis de los siete no piden nada a ningún servidor: son HTML y CSS que se pintan con el resto de la página. El único que sí hace una petición de fuera es el de los iconos, porque carga Font Awesome desde un CDN, y por eso existe la alternativa en SVG que he mencionado arriba.
Lo que sí pesa es la acumulación. Cada bloque que pegas añade CSS que el navegador tiene que leer, y sobre todo añade algo más que mirar. Si le pones nueve avisos a la misma ficha, el problema deja de ser la velocidad y pasa a ser que ninguno destaca. Pon pocos, mira la ficha entera en el móvil, y quita el que no aporte.
¿Se pueden quitar sin romper el tema?
Sí, y esa es la ventaja de hacerlo por Liquid personalizado en vez de tocando los archivos del tema. Borras el bloque en el editor y la ficha vuelve exactamente a como estaba. No hay archivos modificados, no hay app instalada y no queda código huérfano dando vueltas por el tema cuando cambies de idea.
Por eso mismo no hace falta duplicar el tema antes de probar estos siete. Sí hace falta duplicarlo si vas a editar archivos, que es otra cosa distinta y no es lo que estamos haciendo aquí.
El resto de los códigos
Estos siete salen de un documento que mantengo abierto y al que voy añadiendo lo que monto para mi propia tienda. Los demás son los que no cabían en un vídeo: valoraciones con estrellas, reseñas destacadas, sellos de confianza, botones de método de pago, barra de logos, columnas con sombra, barra de urgencia, envío aproximado en versión simple, y la librería de iconos en SVG que sustituye a Font Awesome en el código número 2 de esta lista. También están las variantes: la del contador que sí se reinicia solo y una segunda versión del círculo de estadísticas.
Está aquí, gratis: el documento con todos los códigos Liquid para Shopify. Los siete de arriba ya los tienes en esta página, así que descárgalo solo si quieres el resto.
Si no quieres estar pegando código a mano
Aquí es donde declaro lo mío, como avisé al principio. Todo lo que has visto arriba se puede hacer gratis y se puede hacer en cualquier tema, y por eso te lo he dado entero. Lo que cambia si usas un tema que ya lo trae montado no es el resultado en pantalla: es cómo lo tocas.
Con un bloque de Liquid personalizado, cambiar una fila de la tabla de comparación es abrir el código y editar dentro de una línea de assign sin equivocarte con las comas. Con la sección equivalente ya integrada en el tema, es un campo del editor con su casilla. La misma tabla en pantalla, dos formas distintas de mantenerla. Si vas a tocarla una vez, el código gratis te sobra. Si vas a tocarla cada semana, y sobre todo si la va a tocar alguien que no eres tú, el editor gana.
Eso es lo que hace el tema de Shopify que he desarrollado, que trae estas secciones y más de 25 apps y funciones nativas ya integradas y editables desde el editor. Es de pago y es mío, así que júzgalo con eso delante.
Preguntas frecuentes
¿Estos códigos Liquid para Shopify son gratis?
Sí. Los siete están completos en esta página, se copian y se pegan, y no hay que registrarse para verlos. El documento con el resto sí pide un correo.
¿Son códigos de descuento para Shopify?
No. Un código de descuento es un cupón que aplica el cliente al pagar. Estos son bloques de código que se pegan en el tema y cambian lo que se ve en la ficha de producto. Son dos cosas distintas que se llaman parecido.
¿Hace falta saber programar para usarlos?
No. El recorrido entero es copiar el bloque, pegarlo en una sección de Liquid personalizado y cambiar los textos que están marcados como editables. Lo único que conviene respetar es no tocar lo que hay debajo del comentario que avisa de dónde acaba la zona editable.
¿Funcionan en cualquier tema de Shopify?
En cualquier tema de Online Store 2.0, que son todos los que Shopify ofrece hoy, incluido Dawn. La sección de Liquid personalizado es de Shopify, no del tema. Lo que sí cambia de un tema a otro son los tipos de letra y los colores que hereda el bloque, así que el resultado no se ve idéntico en todos. Si además estás decidiendo con qué tema quedarte, lo comparo en el mejor tema de Shopify para dropshipping.
¿Hace falta duplicar el tema antes de pegarlos?
No, porque no estás modificando archivos del tema. Añades un bloque en el editor y lo borras cuando quieras. Duplicar el tema es la precaución de cuando vas a editar código de verdad.
COMPARTE
¿Quieres acceder a nustros recursos gratuitos?
Escribe tu correo y te mandaremos acceso de inmediato. Adémas, tendrás acceso anticipado a estrategias, contenido, ofertas y mucho más!
ENLACES RÁPIDOS