Agregar un popup en Shopify

¿Quieres mostrar una ventana emergente en tu tienda Shopify para captar la atención de tus visitantes? Ya sea que busques promocionar una oferta, captar correos electrónicos o anunciar una noticia importante, los popups son una excelente herramienta de marketing y comunicación.

En este tutorial en video te enseño cómo agregar un popup en Shopify usando dos métodos distintos:

• Con código personalizado, para quienes desean tener control total del diseño.
• Usando una app gratuita, ideal si prefieres evitar código.

Ambas opciones son fáciles de implementar, y te explico todo paso a paso en el video.

¿Por qué agregar un popup a tu tienda Shopify?

Un popup bien diseñado puede ayudarte a:

• Mostrar promociones por tiempo limitado.
• Captar correos electrónicos para campañas de email marketing.
• Hacer anuncios importantes a tus visitantes.
• Ofrecer descuentos exclusivos a nuevos usuarios.
• Dirigir tráfico hacia productos destacados o colecciones específicas.

Y si lo configuras bien, puedes mostrarlo de forma no invasiva, personalizada y adaptada a tu marca.

¿Qué verás en el video?

• Cómo hacer una copia de seguridad del tema antes de editar el código.
• Cómo insertar bloques de código HTML, CSS y JavaScript para crear un popup desde cero.
• Cómo personalizar el diseño, texto, colores e imágenes del popup.
• Cómo evitar que se muestre en cada página (solo una vez cada 24 horas).
• Cómo subir y mostrar una imagen personalizada dentro del popup.
• Cómo usar una aplicación gratuita desde la App Store de Shopify para crear popups sin escribir código.
• Cómo configurar cuándo y dónde aparece el popup (inicio, carrito, móviles, etc.).
• Cómo publicar el popup en tu tienda y verificar que funcione correctamente.

Haz clic en el video para seguir todos los pasos en tiempo real:

¿Por qué no te comparto los pasos escritos completos?

Porque este tutorial incluye varias líneas de código y configuraciones visuales que es mucho más fácil seguir en video. Así evitas errores y entiendes cada parte de forma práctica. En el video te muestro el resultado final y cómo corregir posibles problemas visuales.

¿Qué opción es mejor: código o app?

• Si eres una persona con algo de experiencia o te gusta personalizar al máximo, el método con código te permite hacer un popup completamente tuyo.
• Si prefieres algo rápido, visual y sin complicaciones, la app gratuita que te enseñamos en el video, te da plantillas prediseñadas listas para usar.

En el video te explico ambas opciones, y tú decides cuál te conviene más.

Conclusión

Agregar un popup a tu tienda Shopify es una forma simple pero poderosa de mejorar la comunicación con tus clientes. Ya sea que elijas hacerlo con código o con una app, el objetivo es el mismo: captar la atención y mejorar la experiencia del usuario.

Mira el video completo, sigue los pasos y crea tu propio popup hoy mismo.

¿Tienes dudas o quieres que el popup funcione en condiciones específicas? Déjamelo en los comentarios y con gusto te ayudo.

Código del popup Shopify

Código para insertar en el theme.liquid antes del </head>

  {{ 'popup.css' | asset_url | stylesheet_tag }}
  {{ 'popup.js' | asset_url | script_tag }}
  {% render 'popup' %}

Para el archivo popup.liquid en Snippets

<div id="popup" class="popup-overlay">
  <div class="popup-content">
    <span class="close-btn" onclick="closePopup()">&times;</span>
    <img src="{{ 'promo-banner.jpg' | asset_url }}" alt="Promoción" style="max-width: 100%; border-radius: 5px;" />
    <h2>¡Bienvenido a nuestra tienda!</h2>
    <p>Suscríbete para recibir novedades y ofertas.</p>
  </div>
</div>

Para el archivo popup.css en assets

.popup-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 999;
}
.popup-content {
  background: black;
  padding: 20px;
  border-radius: 5px;
  width: 300px;
  margin: 100px auto;
  text-align: center;
  position: relative;
}
.close-btn {
  position: absolute;
  top: 10px; right: 10px;
  cursor: pointer;
}

Agregar en el archivo popup.js en assets

document.addEventListener("DOMContentLoaded", function () {
  const popupLastShown = localStorage.getItem("popupLastShown");
  const now = new Date().getTime();

  // 24 horas en milisegundos
  const twentyFourHours = 24 * 60 * 60 * 1000;

  // Solo mostramos el popup si han pasado más de 24 horas
  if (!popupLastShown || now - popupLastShown > twentyFourHours) {
    setTimeout(function () {
      document.getElementById("popup").style.display = "block";
      localStorage.setItem("popupLastShown", now);
    }, 2000); // Muestra el popup después de 2 segundos
  }
});

function closePopup() {
  document.getElementById("popup").style.display = "none";
}

Síguenos

• 
•