Anuncio Dinámico para tu tienda de Shopify.
Copia y pega este código a continuación en una sección de liquid personalizado en tu tienda de Shopify tal y como se explicó en el video:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Announcement Bar with Infinite Scroll</title>
<style>
.unique-announcement-bar {
width: 100%;
background-image: linear-gradient(45deg, #1cbcc3,#1cbcc3, #4abf8f,#4abf8f 80%);
padding: 3px 0;
overflow: hidden;
white-space: nowrap;
position: relative;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.unique-announcement-wrapper {
display: flex;
animation: unique-scroll-text 8s linear infinite;
}
.unique-announcement-text {
color: #fffff9;
font-size: 12px;
font-weight: bold;
margin-right: 25px;
}
@keyframes unique-scroll-text {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
</style>
</head>
<body>
<div class="unique-announcement-bar">
<div class="unique-announcement-wrapper">
<div class="unique-announcement-text">Este Anuncio Multiplicará Tus Ventas</div>
<div class="unique-announcement-text">Este Anuncio Multiplicará Tus Ventas</div>
<div class="unique-announcement-text">Este Anuncio Multiplicará Tus Ventas</div>
<div class="unique-announcement-text">Este Anuncio Multiplicará Tus Ventas</div>
<div class="unique-announcement-text">Este Anuncio Multiplicará Tus Ventas</div>
<div class="unique-announcement-text">Este Anuncio Multiplicará Tus Ventas</div>
<div class="unique-announcement-text">Este Anuncio Multiplicará Tus Ventas</div>
<div class="unique-announcement-text">Este Anuncio Multiplicará Tus Ventas</div>
<div class="unique-announcement-text">Este Anuncio Multiplicará Tus Ventas</div>
<div class="unique-announcement-text">Este Anuncio Multiplicará Tus Ventas</div>
<div class="unique-announcement-text">Este Anuncio Multiplicará Tus Ventas</div>
<div class="unique-announcement-text">Este Anuncio Multiplicará Tus Ventas</div>
<div class="unique-announcement-text">Este Anuncio Multiplicará Tus Ventas</div>
<div class="unique-announcement-text">Este Anuncio Multiplicará Tus Ventas</div>
<div class="unique-announcement-text">Este Anuncio Multiplicará Tus Ventas</div>
<div class="unique-announcement-text">Este Anuncio Multiplicará Tus Ventas</div>
<div class="unique-announcement-text">Este Anuncio Multiplicará Tus Ventas</div>
<div class="unique-announcement-text">Este Anuncio Multiplicará Tus Ventas</div>
<div class="unique-announcement-text">Este Anuncio Multiplicará Tus Ventas</div>
<div class="unique-announcement-text">Este Anuncio Multiplicará Tus Ventas</div>
<div class="unique-announcement-text">Este Anuncio Multiplicará Tus Ventas</div>
<div class="unique-announcement-text">Este Anuncio Multiplicará Tus Ventas</div>
<div class="unique-announcement-text">Este Anuncio Multiplicará Tus Ventas</div>
<div class="unique-announcement-text">Este Anuncio Multiplicará Tus Ventas</div>
<div class="unique-announcement-text">Este Anuncio Multiplicará Tus Ventas</div>
<div class="unique-announcement-text">Este Anuncio Multiplicará Tus Ventas</div>
<div class="unique-announcement-text">Este Anuncio Multiplicará Tus Ventas</div>
<div class="unique-announcement-text">Este Anuncio Multiplicará Tus Ventas</div>
<div class="unique-announcement-text">Este Anuncio Multiplicará Tus Ventas</div>
<div class="unique-announcement-text">Este Anuncio Multiplicará Tus Ventas</div>
<div class="unique-announcement-text">Este Anuncio Multiplicará Tus Ventas</div>
<div class="unique-announcement-text">Este Anuncio Multiplicará Tus Ventas</div>
</div>
</div>
</body>
</html>¿Cómo agrego este anuncio infinito a mi tienda de Shopify?
¿Cómo personalizar el Anuncio Infinito en texto y colores?
Si quieres personalizar el texto que se muestra en el anuncio, solo basta con modificar el texto “Este Anuncio Multiplicará Tus Ventas” por el texto que tu quieras mostrar.
Igualmente si quieres cambiar los colores, puedes modificar la décima línea de código donde dice “background-image: linear-gradient(45deg, #1cbcc3,#1cbcc3, #4abf8f,#4abf8f 80%)”, puedes agregar 4 diferentes colores para que se vean en degradé. Ojo que los colores se muestran de forma hexadecimal, por lo que debes usar esa terminología. Te dejo una tabla con varios colores hexadecimales para que los pruebes.
¿Cómo conseguir más códigos para personalizar mi tienda Shopify?
Si te gustó este código y quieres conseguir más, puedes acceder al Pack 100 Códigos Liquid para Shopify con un tremendo descuento sólo por ser mi seguidor!
¿Qué es el Pack de 100 Códigos Liquid para Shopify?
Este exclusivo pack 100 códigos Shopify continen más de 100 códigos Liquid diseñados para mejorar la funcionalidad y apariencia de tu tienda Shopify. Totalmente personalizables, rápidos y compatibles con dispositivos móviles y cualquier tema, estos códigos te permitirán:
- Personalizar tu tienda: Ajusta cada detalle para reflejar tu marca única.
- Mejorar la experiencia del usuario (UX): Ofrece una navegación intuitiva y atractiva.
- Aumentar la tasa de conversión +3% (CRO): Convierte más visitantes en clientes satisfechos. 📈
🎁 BONUSES
BONUS 1
✅ Checklist Ecommerce para optimización de tasa de conversión ($17 USD) INCLUIDO: Lista de más de 120 puntos claves para que mejores y optimices la tasa de conversión de tu Ecommerce.
BONUS 2
✅ Video Turtorial Pack 100 Códigos Liquids para Shopify ($17 USD) INCLUIDO: Video para que aprendas a incluír los codigos liquid personalizados en tu pagina de producto de Shoppify.
BONUS 3
✅ Acceso a Curso de Conversión en Shopify ($37 USD) INCLUIDO: Casi 2 horas de video para que aprendas a cnvertir más con tu tienda en línea.