Urgencia Social - Códigos Liquid

Urgencia Social

Códigos para crear FOMO y urgencia que aumentan conversiones instantáneamente

Contador de Stock Dinámico

Muestra stock limitado para crear urgencia. Se actualiza en tiempo real.

stock-urgency.liquid

<!-- Solo mostrar si el stock es menor a 20 unidades -->
{% if product.selected_or_first_available_variant.inventory_quantity < 20 and product.selected_or_first_available_variant.inventory_quantity > 0 %}
  <div class="stock-urgency-alert">
    <div class="urgency-content">
      <div class="urgency-icon">
        <i class="bi bi-exclamation-triangle-fill"></i>
      </div>
      <div class="urgency-text">
        <strong>¡Stock limitado!</strong><br>
        Solo quedan <span class="stock-number">{{ product.selected_or_first_available_variant.inventory_quantity }}</span> unidades disponibles
      </div>
    </div>
    
    <!-- Barra de progreso de stock -->
    {% assign stock_percentage = product.selected_or_first_available_variant.inventory_quantity | times: 100 | divided_by: 20 %}
    <div class="stock-progress">
      <div class="stock-bar">
        <div class="stock-fill" style="width: {{ stock_percentage }}%"></div>
      </div>
      <small>{{ stock_percentage }}% del stock inicial</small>
    </div>
  </div>
{% endif %}

<style>
.stock-urgency-alert {
  background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
  color: white;
  padding: 15px 20px;
  border-radius: 10px;
  margin: 15px 0;
  animation: pulse-glow 2s infinite;
}

.urgency-content {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.urgency-icon {
  font-size: 1.5rem;
  color: #fff;
  animation: shake 0.5s infinite;
}

.urgency-text strong {
  font-size: 1.1rem;
  display: block;
  margin-bottom: 2px;
}

.stock-number {
  background: rgba(255,255,255,0.2);
  padding: 2px 8px;
  border-radius: 12px;
  font-weight: bold;
  font-size: 1.1rem;
}

.stock-progress {
  text-align: center;
}

.stock-bar {
  width: 100%;
  height: 6px;
  background: rgba(255,255,255,0.3);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 5px;
}

.stock-fill {
  height: 100%;
  background: rgba(255,255,255,0.9);
  border-radius: 3px;
  transition: width 0.3s ease;
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 5px rgba(220,53,69,0.5); }
  50% { box-shadow: 0 0 20px rgba(220,53,69,0.8); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  75% { transform: translateX(2px); }
}

@media (max-width: 768px) {
  .stock-urgency-alert {
    padding: 12px 15px;
  }
  
  .urgency-content {
    gap: 8px;
  }
  
  .urgency-icon {
    font-size: 1.2rem;
  }
  
  .urgency-text strong {
    font-size: 1rem;
  }
}
</style>

Notificaciones de Ventas Recientes

Pop-ups que muestran compras recientes de otros clientes para generar FOMO

recent-sales-popup.liquid

<!-- Pop-up de ventas recientes -->
<div id="recent-sales-popup" class="recent-sales-popup">
  <div class="popup-content">
    <div class="popup-avatar">
      <img id="customer-avatar" src="" alt="Cliente">
    </div>
    <div class="popup-text">
      <strong id="customer-name"></strong> de <span id="customer-city"></span><br>
      compró <span id="product-name"></span>
      <div class="time-ago" id="time-ago"></div>
    </div>
    <div class="popup-close" onclick="hideSalesPopup()">
      <i class="bi bi-x"></i>
    </div>
  </div>
</div>

<script>
// Datos simulados de ventas recientes para Chile
const salesData = [
  {
    name: "María C.",
    city: "Santiago",
    product: "{{ product.title | truncate: 30 }}",
    avatar: "https://randomuser.me/api/portraits/women/1.jpg",
    timeAgo: "hace 5 minutos"
  },
  {
    name: "Carlos R.",
    city: "Valparaíso", 
    product: "{{ product.title | truncate: 30 }}",
    avatar: "https://randomuser.me/api/portraits/men/2.jpg",
    timeAgo: "hace 12 minutos"
  },
  {
    name: "Ana M.",
    city: "Concepción",
    product: "{{ product.title | truncate: 30 }}",
    avatar: "https://randomuser.me/api/portraits/women/3.jpg",
    timeAgo: "hace 18 minutos"
  },
  {
    name: "Diego L.",
    city: "La Serena",
    product: "{{ product.title | truncate: 30 }}",
    avatar: "https://randomuser.me/api/portraits/men/4.jpg",
    timeAgo: "hace 25 minutos"
  },
  {
    name: "Fernanda S.",
    city: "Temuco",
    product: "{{ product.title | truncate: 30 }}",
    avatar: "https://randomuser.me/api/portraits/women/5.jpg",
    timeAgo: "hace 31 minutos"
  }
];

let currentSaleIndex = 0;
let popupTimeout;

function showSalesPopup() {
  if (sessionStorage.getItem('popupClosed') === 'true') return;
  
  const popup = document.getElementById('recent-sales-popup');
  const sale = salesData[currentSaleIndex];
  
  // Actualizar contenido
  document.getElementById('customer-avatar').src = sale.avatar;
  document.getElementById('customer-name').textContent = sale.name;
  document.getElementById('customer-city').textContent = sale.city;
  document.getElementById('product-name').textContent = sale.product;
  document.getElementById('time-ago').textContent = sale.timeAgo;
  
  // Mostrar popup
  popup.style.display = 'block';
  setTimeout(() => {
    popup.classList.add('show');
  }, 100);
  
  // Ocultar después de 5 segundos
  popupTimeout = setTimeout(() => {
    hideSalesPopup();
  }, 5000);
  
  // Siguiente venta para la próxima vez
  currentSaleIndex = (currentSaleIndex + 1) % salesData.length;
}

function hideSalesPopup() {
  const popup = document.getElementById('recent-sales-popup');
  popup.classList.remove('show');
  clearTimeout(popupTimeout);
  
  setTimeout(() => {
    popup.style.display = 'none';
  }, 300);
}

// Mostrar primer popup después de 10 segundos
setTimeout(showSalesPopup, 10000);

// Mostrar popups cada 30-45 segundos
setInterval(() => {
  if (Math.random() > 0.5) { // 50% de probabilidad
    showSalesPopup();
  }
}, Math.random() * 15000 + 30000); // Entre 30-45 segundos
</script>

<style>
.recent-sales-popup {
  position: fixed;
  bottom: 20px;
  left: 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
  padding: 15px;
  max-width: 320px;
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 1000;
  display: none;
  border-left: 4px solid #28a745;
}

.recent-sales-popup.show {
  transform: translateY(0);
  opacity: 1;
}

.popup-content {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
}

.popup-avatar img {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #28a745;
}

.popup-text {
  flex: 1;
  font-size: 0.9rem;
  line-height: 1.3;
}

.popup-text strong {
  color: #495057;
}

.time-ago {
  color: #28a745;
  font-size: 0.8rem;
  font-weight: 500;
  margin-top: 2px;
}

.popup-close {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 20px;
  height: 20px;
  background: #dc3545;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.7rem;
  transition: transform 0.2s ease;
}

.popup-close:hover {
  transform: scale(1.1);
}

@media (max-width: 768px) {
  .recent-sales-popup {
    bottom: 10px;
    left: 10px;
    right: 10px;
    max-width: none;
    padding: 12px;
  }
  
  .popup-avatar img {
    width: 40px;
    height: 40px;
  }
  
  .popup-text {
    font-size: 0.85rem;
  }
}
</style>

Timer de Oferta con Cuenta Regresiva

Crea urgencia temporal con ofertas que expiran en tiempo real

countdown-timer.liquid

<div class="countdown-offer">
  <div class="offer-header">
    <h4>🔥 ¡Oferta por tiempo limitado! 🔥</h4>
    <p>15% OFF en este producto - Solo por hoy</p>
  </div>
  
  <div class="countdown-container">
    <div class="countdown-item">
      <span id="hours">00</span>
      <label>Horas</label>
    </div>
    <div class="countdown-separator">:</div>
    <div class="countdown-item">
      <span id="minutes">00</span>
      <label>Minutos</label>
    </div>
    <div class="countdown-separator">:</div>
    <div class="countdown-item">
      <span id="seconds">00</span>
      <label>Segundos</label>
    </div>
  </div>
  
  <div class="offer-code">
    Código: <strong>OFERTA15</strong>
  </div>
</div>

<script>
// Configurar timer para que termine en 6 horas desde ahora
const now = new Date().getTime();
const countdownEnd = now + (6 * 60 * 60 * 1000); // 6 horas

function updateCountdown() {
  const now = new Date().getTime();
  const timeLeft = countdownEnd - now;
  
  if (timeLeft > 0) {
    const hours = Math.floor(timeLeft / (1000 * 60 * 60));
    const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);
    
    document.getElementById('hours').textContent = hours.toString().padStart(2, '0');
    document.getElementById('minutes').textContent = minutes.toString().padStart(2, '0');
    document.getElementById('seconds').textContent = seconds.toString().padStart(2, '0');
  } else {
    // Timer terminado
    document.getElementById('hours').textContent = '00';
    document.getElementById('minutes').textContent = '00';
    document.getElementById('seconds').textContent = '00';
    
    // Opcional: ocultar la oferta o mostrar mensaje de expiración
    document.querySelector('.countdown-offer').style.opacity = '0.6';
    document.querySelector('.offer-header h4').textContent = '⏰ ¡Oferta expirada!';
  }
}

// Actualizar cada segundo
setInterval(updateCountdown, 1000);
updateCountdown(); // Ejecutar inmediatamente
</script>

<style>
.countdown-offer {
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
  color: white;
  padding: 20px;
  border-radius: 12px;
  text-align: center;
  margin: 20px 0;
  box-shadow: 0 8px 32px rgba(255,107,107,0.3);
}

.offer-header h4 {
  margin: 0 0 5px 0;
  font-size: 1.3rem;
  font-weight: bold;
}

.offer-header p {
  margin: 0 0 15px 0;
  opacity: 0.9;
}

.countdown-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 15px 0;
}

.countdown-item {
  background: rgba(255,255,255,0.2);
  border-radius: 8px;
  padding: 10px 15px;
  min-width: 60px;
  backdrop-filter: blur(10px);
}

.countdown-item span {
  display: block;
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1;
}

.countdown-item label {
  font-size: 0.8rem;
  opacity: 0.9;
  margin: 0;
}

.countdown-separator {
  font-size: 1.5rem;
  font-weight: bold;
  animation: blink 1s infinite;
}

.offer-code {
  background: rgba(255,255,255,0.2);
  padding: 8px 15px;
  border-radius: 20px;
  display: inline-block;
  margin-top: 10px;
  backdrop-filter: blur(10px);
}

.offer-code strong {
  font-size: 1.1rem;
  letter-spacing: 1px;
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0.3; }
}

@media (max-width: 768px) {
  .countdown-offer {
    padding: 15px;
    margin: 15px 0;
  }
  
  .offer-header h4 {
    font-size: 1.1rem;
  }
  
  .countdown-item {
    padding: 8px 12px;
    min-width: 50px;
  }
  
  .countdown-item span {
    font-size: 1.2rem;
  }
  
  .countdown-item label {
    font-size: 0.7rem;
  }
  
  .countdown-separator {
    font-size: 1.2rem;
  }
}
</style>

Pasos para agregar Liquid personalizado en Shopify

Crear snippet: En tu admin de Shopify, ve a Temas → Editar código → Snippets → Agregar nuevo snippet

Nombre del archivo: urgency-timer.liquid y pega el código de arriba

Ubicar código: En product.liquid agrega {% render "urgency-timer" %} arriba del precio del producto

Configurar tiempo: Ajusta la duración del contador según tu estrategia de ofertas

Probar: Ve a cualquier producto y confirma que el contador funciona correctamente

Tip: Combina con descuentos reales para mayor credibilidad

📸 Pasos para agregar Liquid personalizado en Shopify

Ir al tema activo

En el menú lateral de Shopify → Tienda online → Temas.
Ubica tu tema actual.

Abrir el editor de plantillas

Haz clic en Personalizar.

Seleccionar la plantilla

Arriba, en el desplegable, selecciona dónde quieres añadir tu Liquid:

Página de inicio
Producto
Colección
Carrito
Etc.

👉 También puedes Crear plantilla nueva si quieres que solo se aplique a un grupo de productos o páginas específicas.

Agregar un bloque Liquid personalizado

En el panel izquierdo, busca la sección donde lo vas a insertar (ejemplo: Información de producto).
Haz clic en Agregar bloque → Liquid personalizado.

Insertar tu código

Se abrirá el editor de bloque con un campo llamado Código de Liquid.
Pega ahí tu código Liquid, HTML o fragmento que quieras aplicar solo en esa sección o producto.

Guardar cambios

Haz clic en Guardar arriba a la derecha.
Revisa en vista previa para confirmar que se muestra solo donde lo agregaste.

✅ Ventaja de este método

No modificas el código original del tema
Todo queda contenido en bloques Liquid personalizados, fáciles de activar/desactivar o mover entre secciones
Ideal para cosas como: timers, botones extras, etiquetas dinámicas, mensajes especiales, etc.

Tips de Implementación para Chile

✅ Mejores Prácticas:

Usar ciudades chilenas reales en notificaciones
Mostrar stock real cuando sea posible
Timers de 2-6 horas funcionan mejor
No saturar con múltiples urgencias
Adaptar horarios a zona horaria chilena

❌ Evitar:

Stock falso o exagerado
Timers que nunca terminan
Muchos pop-ups simultáneos
Nombres obviamente falsos
Urgencia en todos los productos

📊 Métricas de Éxito

+40%
Conversión con stock urgency

+25%
Ventas con social proof

+35%
AOV con timers

-30%
Abandono de carrito

🤖 Generador de Urgencia Social Personalizada

¡Genera urgencia social única con IA! Describe qué tipo de urgencia necesitas y obtendrás código personalizado.

Describe tu urgencia social ideal:

💡 Ejemplos de instrucciones:

⏰ Timer: "Contador 2 horas, rojo intenso, mensaje 'Oferta termina pronto!'"

📦 Stock: "Solo quedan 3 unidades, barra naranja, actualizar cada 5 min"

👥 Gente viendo: "15 personas viendo, parpadeo amarillo, ciudades Chile"

🔥 Compras recientes: "Última compra hace 5 min en Antofagasta, verde brillante"

¡Código generado exitosamente! Aquí está tu urgencia social personalizada:

urgencia-social-personalizada.liquid

Probar Código en tu Tienda

Pega cualquier código Liquid aquí para ver cómo se verá en tu tienda antes de implementarlo

Pega tu código Liquid:

🛠️ Pasos para agregar Liquid personalizado en Shopify