Agregar un popup en Shopify

¿Quieres mostrar un mensaje emergente en tu tienda Shopify para captar más atención, dar un aviso importante o promocionar una oferta? En este video te enseño paso a paso cómo agregar un popup en Shopify de dos formas: usando código personalizado y también con una app gratuita desde la tienda de aplicaciones. Además, aprenderás cómo personalizar su diseño, configurar cuándo aparece y cómo evitar que moleste al cliente. ¡Quédate hasta el final para dominar ambas opciones y hacer que tu tienda destaque profesionalmente!

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;
}

Para 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";
}

1. Crear una copia de seguridad del tema antes de editar el código

Una buena práctica antes de modificar cualquier código en Shopify es crear una copia de seguridad de tu tema actual. Esto te permitirá restaurarlo fácilmente en caso de cometer algún error.

• Primero, inicia sesión en tu cuenta de Shopify.
• En el panel izquierdo, haz clic en “Tienda online” y luego en “Temas”.
• Ubica el tema que estás utilizando y haz clic en el botón de los 3 puntos horizontales (menú de opciones).
• Selecciona “Duplicar”.

Shopify comenzará a crear una copia exacta de tu tema.

• Desliza hacia abajo en la sección de temas, y verás que ya aparece la versión duplicada, lista para usarse si es necesario.
  Esta copia te servirá como respaldo por si algo no sale como esperabas durante la edición del código.

2. Insertar el código del popup en el tema de Shopify

Ahora que ya hicimos una copia de seguridad del tema, es momento de editar el código para integrar el popup personalizado y agregar un popup en Shopify.

• Vuelve al tema original (no la copia), haz clic en los 3 puntos horizontales del lado derecho y selecciona “Editar código”.
• En el panel lateral, busca el archivo theme.liquid. Haz clic para abrirlo.
• Dentro del archivo, localiza la etiqueta </head> y pega el bloque de código que te compartimos justo arriba de esa línea.
  Este paso es clave para que el popup cargue correctamente cuando se abra tu tienda.

Crear el fragmento (snippet) del popup

• En el mismo editor de código, ubica la carpeta “snippets” y haz clic en “Agregar un nuevo fragmento” o “Add a new snippet”.
• Escribe como nombre: popup
• Haz clic en “Crear” o “Done”.
• En el nuevo archivo popup.liquid, pega el segundo bloque de código que hemos preparado (disponible en la descripción del video).
• Haz clic en “Guardar”.

Agregar el archivo JavaScript del popup

• Ahora busca la carpeta “assets”, haz clic en “Agregar un nuevo recurso” o “Add a new asset”.
• Selecciona “Crear un archivo en blanco” (Create a blank file).
• Elige como tipo de archivo js (JavaScript).
• Nombra el archivo como: popup
• Haz clic en “Listo”.
• En este nuevo archivo, pega el tercer bloque de código que se encargará de mostrar el popup.
  Dentro del código, verás un número como 2000 — este valor representa el tiempo (en milisegundos) que tarda el popup en aparecer, es decir, 2 segundos.
• Haz clic en “Guardar”.

Agregar el archivo CSS para el diseño del popup

• De nuevo, en la carpeta “assets”, haz clic en “Agregar un nuevo recurso”.
• Selecciona “Crear un archivo en blanco”, esta vez con la extensión css.
• Escribe el nombre: popup
• Haz clic en “Listo”.
• Pega el cuarto bloque de código que define el estilo y apariencia del popup (colores, posición, tipografía, etc.).
• Finalmente, haz clic en “Guardar”.

3. Previsualizar el popup y ajustar su diseño para agregar un popup en Shopify

Una vez hayamos guardado todo el código, vamos a ver cómo se muestra el popup en nuestra tienda.

• Haz clic en “Obtener una vista previa de la tienda” (o “Preview store” en inglés).
• Como podemos ver, ¡ya aparece el popup automáticamente! Por defecto muestra un mensaje como:
  “¡Bienvenido a nuestra tienda!” junto con un botón para cerrar el popup.

Sin embargo, es posible que el diseño por defecto no se vea muy bien. Por ejemplo:

• El fondo blanco y las letras de color beige o gris claro pueden dificultar la lectura del mensaje.

Vamos a solucionarlo:

• Dirígete nuevamente al editor de código, abre el archivo popup.css que creamos en la carpeta assets.
• Busca la línea que dice algo como:

background-color: white;

Reemplaza white por black, o elige cualquier otro color que combine con tu tienda, por ejemplo:

background-color: black;

• Haz clic en “Guardar”.
• Regresa a la tienda y recarga la página. Ahora notarás que el popup tiene fondo negro y las letras se ven mucho mejor.

Cierra el popup para continuar.

4. Evitar que el popup aparezca en cada página

Por defecto, el popup vuelve a mostrarse cada vez que el cliente cambia de página, lo cual puede resultar molesto e invasivo.

Vamos a solucionarlo para que el popup solo aparezca una vez cada 24 horas por visitante.

• Ve al archivo popup.js que creamos en assets.
• Elimina todo el código anterior que tenía (el primero que pegamos).
• Copia el nuevo bloque de código (compartido en la descripción del video) y pégalo en su lugar.

Este nuevo script hace lo siguiente:

• Guarda la fecha y hora exacta en que se mostró el popup.
• Cada vez que el visitante carga una página, el código verifica si ya pasaron más de 24 horas desde la última vez que se mostró.
• Si ya pasaron 24 horas, se vuelve a mostrar el popup. Si no, no aparece nuevamente hasta que transcurra ese tiempo.

Haz clic en “Guardar” para aplicar los cambios.

Ahora:

• Regresa a tu tienda, recarga la página, y verás que el popup aparece una vez.
• Haz clic en Cerrar, y luego navega hacia otras páginas dentro de tu tienda.
• ¡Perfecto! Ahora el popup ya no aparece repetidamente.

5. Agregar imagen al popup personalizado

Ahora vamos a personalizar aún más nuestro popup agregando una imagen desde nuestro dispositivo.

• Dirígete a la carpeta snippets y haz clic en “Agregar un nuevo recurso”.
• En la ventana que se abre, haz clic en “Cargar un archivo”.
• Aquí puedes subir archivos como imágenes, CSS, fuentes, archivos JS, JSON o Liquid.
• Haz clic en “Agregar archivo”, selecciona desde tu computadora la imagen que deseas mostrar en el popup (por ejemplo, un banner o una ilustración promocional).
• Una vez que el archivo se haya cargado correctamente, pulsa en “Listo”.

Ahora vamos a modificar el contenido del popup para que incluya esta imagen:

• Abre nuevamente el archivo popup.liquid dentro de la carpeta snippets.
• Elimina el bloque de código anterior que habías pegado en ese archivo.
• Copia y pega el nuevo bloque de código que te compartí en la descripción del video.

Importante:

• Asegúrate de que el nombre de tu imagen no tenga mayúsculas, espacios ni caracteres especiales (como asteriscos, acentos o símbolos).
• Reemplaza el nombre del archivo de imagen en el código para que coincida exactamente con el nombre del archivo que subiste.

Una vez hecho esto, haz clic en “Guardar”.

Ahora recarga tu tienda para ver los cambios.
Si no ves el popup de inmediato, recuerda que anteriormente configuramos que se muestre solo una vez cada 24 horas, así que necesitas borrar el historial o la caché del navegador para que vuelva a mostrarse.

¡Listo! Ya tienes un popup completamente personalizado, con tu propia imagen.

6. Agregar un popup mediante una aplicación (plugin)

Otra forma de agregar popups en Shopify, sin necesidad de código, es a través de una aplicación de la App Store de Shopify.

Para hacerlo:

• Desde la página principal de tu cuenta, haz clic en el botón “Añadir”.
• Baja un poco en la ventana emergente y haz clic en “Shopify App Store”.
• En el buscador escribe la palabra “Popup” y presiona Enter.

Te aparecerán múltiples aplicaciones relacionadas, como:

• Mailchimp: ideal para capturar correos electrónicos o mostrar formularios.
• Otras apps centradas en promociones, descuentos, anuncios, etc.

Para este tutorial vamos a usar “Squirai: Promotion Popup” porque es sencilla y fácil de configurar.
Haz clic sobre su nombre y luego pulsa en “Instalar”.

Confirma una vez más haciendo clic en “Instalar” en la siguiente pantalla.

7. Configurar el popup con la app “Squirai: Promotion Popup”

Una vez instalada la app:

• Accede a la configuración haciendo clic en “Tab Setting” (Configuración de pestaña de promoción).
• Aquí puedes:
  • Activar o desactivar el popup.
  • Cambiar el título que aparecerá.
  • Modificar el color del fondo o texto.
  • Elegir la posición del popup dentro de la pantalla (por ejemplo, esquina inferior derecha, centrado, etc.).

Después de hacer los ajustes, haz clic en “Guardar cambios” para aplicar la configuración.

8. Crear y personalizar tu propio popup con la app Squirai: Promotion Popup

Ahora que ya instalamos y configuramos la aplicación, vamos a crear nuestro propio popup desde cero.

• Haz clic en “Create Popup” (Crear Popup).
• Aparecerá una galería con varias plantillas prediseñadas, pero también puedes optar por una plantilla en blanco si deseas diseñar tu popup desde cero.
• Para este tutorial, seleccionaremos la plantilla en blanco.

Configuración general del popup:

En la sección “General”, vas a definir las configuraciones básicas de tu popup:

• Nombre del popup: Escribe un título para identificar tu popup (este nombre es interno, no lo verá el cliente).
• Fecha de inicio y finalización: Puedes programar cuándo quieres que se muestre tu popup, ideal para promociones por tiempo limitado.
• Dispositivos: Decide si deseas mostrar el popup en móviles, escritorio o ambos.
• Prioridad: Si tienes varios popups, puedes asignarles prioridad para decidir cuál aparece primero.

¿Quién ve el popup?

En “¿Quién ve la ventana emergente de promoción?”, tienes dos opciones:

• Todos los clientes: El popup se mostrará a todos los visitantes.
• Clientes específicos: Puedes segmentar según condiciones como ubicación, comportamiento, etc.

¿Dónde aparece el popup?

En “¿Dónde se muestra la ventana emergente?” puedes elegir:

• Todas las páginas de tu tienda.
• Páginas específicas, como solo la página de inicio, productos, carrito, etc.

¿Cuándo aparece el popup?

En “¿Cuándo aparece la ventana emergente?”, puedes configurar:

• Retraso en la visualización (segundos): por ejemplo, que aparezca 3 o 5 segundos después de que el cliente entra al sitio.
• Tiempo para volver a mostrarse automáticamente (horas): ideal para evitar que el popup sea molesto si alguien ya lo cerró.
• Activar el estado del carrito: útil para mostrar popups según si el carrito está vacío o no.

¿Cuándo se cierra el popup?

En “¿Cuándo se cierra la ventana emergente?” puedes definir:

• Si el cliente debe cerrarlo manualmente.
• O si se cierra automáticamente después de ciertos segundos, como por ejemplo, 5 segundos.

Diseño del popup:

• Puedes subir una imagen como fondo del popup para hacerlo más atractivo.
• Cambia colores, tipografías, bordes y sombras según el estilo de tu tienda.

Eliminar marca “Desarrollado por”:

En la sección “Marca registrada”, puedes eliminar la frase «Desarrollado por SmartPopup» que aparece en la parte inferior del popup. Esto ayuda a que se vea más profesional y limpio.

9. Personaliza el contenido y diseño de tu popup

Una vez seleccionaste la plantilla y subiste la imagen de fondo para tu popup, ahora puedes personalizar aún más su diseño y contenido.

• En la tabla donde está insertada la imagen, haz clic derecho y selecciona “Propiedades de la tabla”.
  • Aquí puedes modificar el ancho y alto, cambiar el color de fondo, ajustar el alineamiento, los bordes y más.
  • También puedes mover la tabla dentro del popup según dónde quieras que aparezca la imagen o el texto.
• Para agregar texto sobre la imagen o junto a ella:
  • Haz clic dentro de la tabla y escribe tu mensaje promocional o informativo.
  • El texto lo puedes hacer en negrita, convertirlo en encabezado, centrarlo, alinearlo a la derecha o izquierda, o darle formato personalizado.
  • Desde la barra superior también puedes:
    • Insertar enlaces, como por ejemplo a una colección o página de contacto.
    • Agregar archivos multimedia como íconos o logotipos.
    • Cambiar el color del texto o añadir estilos decorativos.

Una vez termines de ajustar el diseño y estés satisfecho con cómo se ve tu popup, pulsa el botón “Publicar en tu tienda” para guardarlo y activarlo.

10. Activa el popup en tu tienda y comprueba que funciona

Para que tu popup se muestre correctamente en tu tienda, necesitamos activarlo desde el personalizador de temas:

1. Dirígete a tu panel de Shopify, haz clic en “Tienda online” y luego en “Temas”.
2. En el tema activo, haz clic en “Personalizar”.
3. Dentro del editor visual de tu tienda, ve a la barra lateral izquierda y haz clic en “Aplicaciones integradas”.
4. Busca la app “Squirai: Smart Popup” y actívala.
5. Finalmente, haz clic en los tres puntos horizontales de la parte superior derecha y selecciona “Ver” para previsualizar tu tienda como cliente.

¡Listo! Como puedes ver, la ventana emergente ya aparece en tu tienda, mostrando la imagen, el texto y todas las configuraciones que personalizaste previamente.

Ahora ya sabes cómo agregar un popup en Shopify con total control y personalización. Si este tutorial te fue útil, no olvides suscribirte a mi canal Technology RobOne, darle me gusta, dejar tu comentario y compartirlo con otros emprendedores como tú. Y si quieres apoyar aún más este canal, considera hacerte miembro para acceder a contenido exclusivo. Te invito también a ver más de mis videos donde explico otras herramientas útiles para tu tienda online. ¡Nos vemos en el siguiente tutorial!

Síguenos

• 
•