¿Cómo agregar un pop-up para comunicar un cupón en tu tienda Pedix usando Google Tag Manager?

¿Para qué sirve este pop-up?

Este pop-up te permite destacar una promoción especial dentro de tu tienda.

Podés usarlo para:

• Comunicar un cupón de Hot Sale.
• Ofrecer un descuento por tiempo limitado.
• Incentivar la compra inmediata.
• Recordarle al cliente que debe aplicar el cupón antes de finalizar el pedido.

Ejemplo:

Antes de empezar

Antes de configurar el pop-up, asegurate de tener:

1. Una cuenta de Google Tag Manager.
2. Un contenedor web creado en Google Tag Manager.
3. El ID de Google Tag Manager conectado en Pedix.
4. Un cupón creado previamente en tu tienda Pedix.
5. El código HTML del pop-up listo para pegar.

Importante: este pop-up solo comunica el cupón. Para que el descuento funcione, el cupón debe estar creado y configurado previamente en Pedix.

Paso 1: Crear el cupón en Pedix

• Primero, creá el cupón que vas a mostrar en el pop-up.
• Desde el panel de administración de Pedix, ingresá a la sección de cupones de descuento.
• Configurá los datos principales del cupón:

Paso 2: Ingresar a Google Tag Manager

• Ingresá a Google Tag Manager con tu cuenta de Google.
• Luego seleccioná el contenedor correspondiente a tu tienda.
• El ID del contenedor suele tener este formato:

GTM-XXXXXXX

Ese ID es el que luego debe estar conectado en Pedix.

Paso 3: Crear una nueva etiqueta

Dentro de Google Tag Manager, ingresá a:

Etiquetas > Nueva

Poné un nombre claro para identificarla fácilmente.

Ejemplo:

Pop-up cupón Hot Sale

Luego hacé clic en Configuración de la etiqueta y elegí:

HTML personalizado

Paso 4: Pegar el código HTML del pop-up

En el campo de HTML personalizado, pegá el código completo del pop-up.

<!-- POPUP CUPON HOT SALE ADAPTATIVO - PEDIX / GTM -->
<style>
  #pedixHsOverlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 999999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.55);
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
  }

  #pedixHsModal {
    width: 100%;
    max-width: 430px;
    position: relative;
    box-sizing: border-box;
    border-radius: 24px;
    background: #ffffff;
    color: #222222;
    padding: 30px 22px 22px;
    text-align: center;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    border: 1px solid #ececec;
    animation: pedixHsPopIn 0.28s ease-out;
  }

  #pedixHsTopGlow {
    position: absolute;
    top: -55px;
    left: -30px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    opacity: 0.12;
    pointer-events: none;
  }

  #pedixHsBottomGlow {
    position: absolute;
    right: -70px;
    bottom: -70px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    opacity: 0.08;
    pointer-events: none;
  }

  #pedixHsClose {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: #f3f3f3;
    color: #666666;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    z-index: 3;
  }

  #pedixHsClose:hover {
    background: #ebebeb;
    color: #111111;
  }

  #pedixHsContent {
    position: relative;
    z-index: 2;
  }

  #pedixHsBadge {
    display: inline-block;
    margin-bottom: 12px;
    padding: 8px 14px;
    border-radius: 999px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
  }

  #pedixHsTitle {
    margin: 0;
    color: #111111;
    font-size: 30px;
    line-height: 1.05;
    font-weight: 900;
    letter-spacing: -0.5px;
  }

  #pedixHsSubtitle {
    margin: 12px 0 18px;
    color: #666666;
    font-size: 15px;
    line-height: 1.45;
  }

  #pedixHsCouponBox {
    margin: 18px 0 14px;
    padding: 16px;
    border-radius: 16px;
    background: #fafafa;
    border: 2px dashed #111111;
  }

  #pedixHsCouponLabel {
    margin: 0 0 6px;
    color: #666666;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
  }

  #pedixHsCouponCode {
    margin: 0;
    color: #111111;
    font-size: 28px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: 1.2px;
  }

  #pedixHsCheckoutInfo {
    margin: 0 0 16px;
    font-size: 13px;
    line-height: 1.45;
    color: #444444;
    background: #fff6dc;
    border: 1px solid #f3e0a0;
    border-radius: 12px;
    padding: 12px 12px;
  }

  #pedixHsButton {
    width: 100%;
    border: none;
    border-radius: 14px;
    padding: 15px 18px;
    color: #ffffff;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.15);
    transition: transform 0.15s ease, opacity 0.15s ease;
  }

  #pedixHsButton:hover {
    opacity: 0.94;
    transform: translateY(-1px);
  }

  #pedixHsMessage {
    display: none;
    margin-top: 12px;
    color: #1f8f4d;
    font-size: 13px;
    font-weight: 700;
  }

  #pedixHsSecondary {
    display: inline-block;
    margin-top: 14px;
    color: #666666;
    font-size: 13px;
    text-decoration: underline;
    cursor: pointer;
  }

  #pedixHsNote {
    margin: 14px 0 0;
    color: #777777;
    font-size: 12px;
    line-height: 1.45;
  }

  @keyframes pedixHsPopIn {
    from {
      opacity: 0;
      transform: translateY(16px) scale(0.97);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  @media (max-width: 480px) {
    #pedixHsModal {
      max-width: 100%;
      padding: 28px 18px 20px;
      border-radius: 20px;
    }

    #pedixHsTitle {
      font-size: 25px;
    }

    #pedixHsSubtitle {
      font-size: 14px;
    }

    #pedixHsCouponCode {
      font-size: 24px;
    }

    #pedixHsCheckoutInfo {
      font-size: 12px;
    }
  }
</style>

<div id="pedixHsOverlay">
  <div id="pedixHsModal">
    <div id="pedixHsTopGlow"></div>
    <div id="pedixHsBottomGlow"></div>

    <button id="pedixHsClose" type="button" aria-label="Cerrar">&times;</button>

    <div id="pedixHsContent">
      <div id="pedixHsBadge">Hot Sale</div>

      <h2 id="pedixHsTitle">10% OFF extra en tu compra</h2>

      <p id="pedixHsSubtitle">
        Aprovechá este beneficio exclusivo y usá tu cupón antes de finalizar el pedido.
      </p>

      <div id="pedixHsCouponBox">
        <p id="pedixHsCouponLabel">Cupón de descuento</p>
        <p id="pedixHsCouponCode">HOTSALE10</p>
      </div>

      <div id="pedixHsCheckoutInfo">
        Importante: copiá el cupón y aplicalo en el <strong>checkout, en el último paso de la compra</strong>, antes de confirmar tu pedido.
      </div>

      <button id="pedixHsButton" type="button">Copiar cupón</button>

      <div id="pedixHsMessage">Cupón copiado correctamente.</div>

      <div id="pedixHsSecondary">Seguir viendo productos</div>

      <p id="pedixHsNote">
        Promoción válida por tiempo limitado. El descuento se valida al ingresar el cupón en el checkout final.
      </p>
    </div>
  </div>
</div>

<script>
  (function () {
    /*
      ==============================
      CONFIGURACION EDITABLE
      ==============================
    */

    var couponCode = "HOTSALE10";
    var showDelayMs = 3000;
    var hideForHoursAfterClose = 24;
    var storageKey = "pedix_hotsale_coupon_popup_closed_until";

    /*
      Si querés redirigir después de copiar el cupón:
      var redirectUrl = "https://mitienda.com/categoria/hot-sale";
      Si no querés redirección, dejalo vacío.
    */
    var redirectUrl = "";
    var redirectDelayMs = 700;

    /*
      Color manual de respaldo.
      Se usa si no se detecta bien un color principal de la tienda.
    */
    var fallbackPrimaryColor = "#e53935";
    var fallbackSecondaryColor = "#ffb300";

    /*
      Si querés desactivar la detección automática de color:
      var useAdaptiveColors = false;
    */
    var useAdaptiveColors = true;

    /*
      ==============================
      ELEMENTOS
      ==============================
    */

    var overlay = document.getElementById("pedixHsOverlay");
    var modal = document.getElementById("pedixHsModal");
    var closeButton = document.getElementById("pedixHsClose");
    var copyButton = document.getElementById("pedixHsButton");
    var secondaryButton = document.getElementById("pedixHsSecondary");
    var message = document.getElementById("pedixHsMessage");
    var badge = document.getElementById("pedixHsBadge");
    var couponBox = document.getElementById("pedixHsCouponBox");
    var topGlow = document.getElementById("pedixHsTopGlow");
    var bottomGlow = document.getElementById("pedixHsBottomGlow");

    var title = document.getElementById("pedixHsTitle");
    var subtitle = document.getElementById("pedixHsSubtitle");
    var couponCodeEl = document.getElementById("pedixHsCouponCode");
    var checkoutInfo = document.getElementById("pedixHsCheckoutInfo");
    var note = document.getElementById("pedixHsNote");

    /*
      ==============================
      TEXTOS EDITABLES
      ==============================
    */

    title.innerHTML = "10% OFF extra en tu compra";
    subtitle.innerHTML = "Aprovechá este beneficio exclusivo y usá tu cupón antes de finalizar el pedido.";
    couponCodeEl.innerHTML = couponCode;
    checkoutInfo.innerHTML = 'Importante: copiá el cupón y aplicalo en el <strong>checkout, en el último paso de la compra</strong>, antes de confirmar tu pedido.';
    note.innerHTML = "Promoción válida por tiempo limitado. El descuento se valida al ingresar el cupón en el checkout final.";

    /*
      ==============================
      FUNCIONES
      ==============================
    */

    function getNow() {
      return new Date().getTime();
    }

    function shouldShowPopup() {
      var closedUntil = localStorage.getItem(storageKey);

      if (!closedUntil) {
        return true;
      }

      return getNow() > parseInt(closedUntil, 10);
    }

    function saveClosedState() {
      var hideDurationMs = hideForHoursAfterClose * 60 * 60 * 1000;
      var expiresAt = getNow() + hideDurationMs;
      localStorage.setItem(storageKey, expiresAt.toString());
    }

    function showPopup() {
      if (shouldShowPopup()) {
        overlay.style.display = "flex";
      }
    }

    function closePopup() {
      saveClosedState();
      overlay.style.display = "none";
    }

    function showCopiedState() {
      message.style.display = "block";
      copyButton.innerHTML = "Cupón copiado";

      if (redirectUrl !== "") {
        setTimeout(function () {
          window.location.href = redirectUrl;
        }, redirectDelayMs);
      }
    }

    function fallbackCopyCoupon() {
      var tempInput = document.createElement("input");
      tempInput.value = couponCode;
      document.body.appendChild(tempInput);
      tempInput.focus();
      tempInput.select();

      try {
        document.execCommand("copy");
      } catch (e) {}

      document.body.removeChild(tempInput);
      showCopiedState();
    }

    function copyCoupon() {
      if (navigator.clipboard && navigator.clipboard.writeText) {
        navigator.clipboard.writeText(couponCode).then(function () {
          showCopiedState();
        }, function () {
          fallbackCopyCoupon();
        });
      } else {
        fallbackCopyCoupon();
      }
    }

    function isUsefulColor(color) {
      if (!color) {
        return false;
      }

      if (color === "transparent") {
        return false;
      }

      if (color === "rgba(0, 0, 0, 0)") {
        return false;
      }

      if (color === "rgb(255, 255, 255)") {
        return false;
      }

      if (color === "rgb(0, 0, 0)") {
        return false;
      }

      return true;
    }

    function detectPrimaryColor() {
      var selectors = [
        "button",
        "a[class*='btn']",
        "a[class*='button']",
        "[class*='primary']",
        "[class*='cart']",
        "[class*='checkout']"
      ];

      var i;
      var j;

      for (i = 0; i < selectors.length; i++) {
        var list = document.querySelectorAll(selectors[i]);

        for (j = 0; j < list.length; j++) {
          var styles = window.getComputedStyle(list[j]);
          var bg = styles.backgroundColor;
          var color = styles.color;

          if (isUsefulColor(bg)) {
            return bg;
          }

          if (isUsefulColor(color)) {
            return color;
          }
        }
      }

      return "";
    }

    function parseRgbString(color) {
      var match = color.match(/\d+/g);

      if (!match || match.length < 3) {
        return null;
      }

      return {
        r: parseInt(match[0], 10),
        g: parseInt(match[1], 10),
        b: parseInt(match[2], 10)
      };
    }

    function lightenRgb(rgb, amount) {
      return {
        r: Math.min(255, Math.round(rgb.r + (255 - rgb.r) * amount)),
        g: Math.min(255, Math.round(rgb.g + (255 - rgb.g) * amount)),
        b: Math.min(255, Math.round(rgb.b + (255 - rgb.b) * amount))
      };
    }

    function rgbaString(rgb, alpha) {
      return "rgba(" + rgb.r + "," + rgb.g + "," + rgb.b + "," + alpha + ")";
    }

    function rgbString(rgb) {
      return "rgb(" + rgb.r + "," + rgb.g + "," + rgb.b + ")";
    }

    function applyColors() {
      var primaryColor = fallbackPrimaryColor;
      var secondaryColor = fallbackSecondaryColor;

      if (useAdaptiveColors) {
        var detected = detectPrimaryColor();

        if (detected !== "") {
          primaryColor = detected;

          var parsed = parseRgbString(detected);
          if (parsed) {
            var lighter = lightenRgb(parsed, 0.45);
            secondaryColor = rgbString(lighter);
          }
        }
      }

      badge.style.background = "linear-gradient(135deg, " + primaryColor + " 0%, " + secondaryColor + " 100%)";
      copyButton.style.background = "linear-gradient(135deg, " + primaryColor + " 0%, " + secondaryColor + " 100%)";
      couponBox.style.borderColor = primaryColor;
      topGlow.style.background = primaryColor;
      bottomGlow.style.background = secondaryColor;

      if (parseRgbString(primaryColor)) {
        copyButton.style.boxShadow = "0 12px 26px " + rgbaString(parseRgbString(primaryColor), 0.25);
      }
    }

    /*
      ==============================
      EVENTOS
      ==============================
    */

    closeButton.onclick = function () {
      closePopup();
    };

    secondaryButton.onclick = function () {
      closePopup();
    };

    copyButton.onclick = function () {
      copyCoupon();
    };

    overlay.onclick = function (event) {
      if (event.target === overlay) {
        closePopup();
      }
    };

    /*
      ==============================
      INIT
      ==============================
    */

    applyColors();

    setTimeout(function () {
      showPopup();
    }, showDelayMs);
  })();
</script>

Paso 5: Personalizar el cupón y los textos

Dentro del código, buscá esta sección:

var couponCode = "HOTSALE10";

Reemplazá HOTSALE10 por el código real de tu cupón.

Ejemplo:

var couponCode = "HOTSALE20";

Luego revisá los textos principales del pop-up. Dentro del código vas a encontrar líneas como estas:

title.innerHTML = "10% OFF extra en tu compra";
subtitle.innerHTML = "Aprovechá este beneficio exclusivo y usá tu cupón antes de finalizar el pedido.";
note.innerHTML = "Promoción válida por tiempo limitado. El descuento se valida al ingresar el cupón en el checkout final.";

Podés editarlas según tu promoción.

Ejemplo:

title.innerHTML = "15% OFF por Hot Sale";
subtitle.innerHTML = "Copiá el cupón y aplicalo antes de confirmar tu pedido.";
note.innerHTML = "Válido solo durante Hot Sale o hasta agotar stock.";

Paso 6: Revisar la aclaración del checkout

El pop-up incluye una aclaración importante para el cliente:

Importante: copiá el cupón y aplicalo en el checkout, en el último paso de la compra, antes de confirmar tu pedido.

Esto ayuda a evitar confusiones, ya que el cupón se valida cuando el cliente llega al checkout final.

Podés editar ese texto en esta parte del código:

checkoutInfo.innerHTML = 'Importante: copiá el cupón y aplicalo en el <strong>checkout, en el último paso de la compra</strong>, antes de confirmar tu pedido.';

Recomendación: mantené esta aclaración visible para que el cliente entienda dónde debe ingresar el cupón.

Paso 7: Personalizar los colores

El pop-up está preparado para adaptar automáticamente sus colores según la estética de tu tienda.

Esta opción viene activada por defecto:

var useAdaptiveColors = true;

Cuando está activa, el pop-up intenta detectar colores de botones, enlaces o elementos principales de la tienda.

Si no detecta un color adecuado, usa colores de respaldo:

var fallbackPrimaryColor = "#e53935";
var fallbackSecondaryColor = "#ffb300";

Usar colores automáticos

Dejá esta variable en true:

var useAdaptiveColors = true;

Esta es la opción recomendada si querés que el pop-up se adapte visualmente a tu tienda.

Usar colores manuales

Si preferís definir los colores de forma manual, cambiá la variable a false:

var useAdaptiveColors = false;

Luego editá los colores de respaldo:

var fallbackPrimaryColor = "#111111";
var fallbackSecondaryColor = "#f5c542";

Ejemplo para una marca con rojo y amarillo:

var fallbackPrimaryColor = "#e53935";
var fallbackSecondaryColor = "#ffb300";

Ejemplo para una marca sobria en negro y gris:

var fallbackPrimaryColor = "#111111";
var fallbackSecondaryColor = "#777777";

Paso 8: Configurar cuándo aparece el pop-up

Dentro del código vas a encontrar esta variable:

var showDelayMs = 3000;

Ese valor define cuánto tarda en aparecer el pop-up después de que carga la tienda.

3000 equivale a 3 segundos.

Ejemplos:

var showDelayMs = 2000;

Aparece después de 2 segundos.

var showDelayMs = 5000;

Aparece después de 5 segundos.

Recomendación: usá entre 3 y 5 segundos para no interrumpir al cliente apenas entra a la tienda.

Paso 9: Configurar cada cuánto vuelve a aparecer

El código incluye una función para que, si el cliente cierra el pop-up, no vuelva a aparecer durante un tiempo determinado.

La variable es:

var hideForHoursAfterClose = 24;

Esto significa que, si el cliente lo cierra, no volverá a verlo durante 24 horas.

Podés modificarlo:

var hideForHoursAfterClose = 12;

No vuelve a aparecer durante 12 horas.

var hideForHoursAfterClose = 48;

No vuelve a aparecer durante 48 horas.

Recomendación: usá 24 horas para no saturar al visitante.

Paso 10: Configurar una redirección opcional

Por defecto, cuando el cliente copia el cupón, el pop-up solo muestra un mensaje de confirmación.

Si querés que después de copiarlo el cliente sea redirigido a una categoría, colección o página específica, podés usar esta variable:

var redirectUrl = "";

Ejemplo:

var redirectUrl = "https://tutienda.com/categoria/hot-sale";

También podés configurar el tiempo de espera antes de redirigir:

var redirectDelayMs = 700;

700 equivale a 0,7 segundos.

Recomendación: dejá la redirección vacía si querés que el cliente siga navegando normalmente.

Paso 11: Configurar el activador en Google Tag Manager

Después de pegar y personalizar el código, bajá hasta la sección Activación.

Para una configuración simple, elegí:

All Pages

Esto permite que el pop-up se muestre en toda la tienda.

La frecuencia de aparición ya está controlada por el código mediante localStorage, por eso no aparecerá nuevamente durante el tiempo configurado si el cliente lo cierra.

Opción recomendada para Hot Sale

Usar:

All Pages

Y dentro del código:

var showDelayMs = 3000;
var hideForHoursAfterClose = 24;

De esta manera:

• El pop-up aparece después de 3 segundos.
• Se puede mostrar en toda la tienda.
• Si el cliente lo cierra, no vuelve a aparecer durante 24 horas.

Paso 12: Guardar la etiqueta

Una vez configurado el código y el activador, hacé clic en:

Guardar

Todavía no publiques los cambios. Primero conviene probar que todo funcione correctamente.

Paso 13: Probar con vista previa

En Google Tag Manager, hacé clic en:

Vista previa

Ingresá la URL de tu tienda Pedix.

Luego navegá por la tienda y verificá:

• Que el pop-up aparezca después del tiempo configurado.
• Que el diseño se vea correctamente.
• Que los colores se adapten a la tienda.
• Que el cupón mostrado sea correcto.
• Que el botón copie el cupón.
• Que aparezca el mensaje “Cupón copiado correctamente”.
• Que la “X” cierre el pop-up.
• Que al hacer clic fuera del pop-up también se cierre.
• Que la aclaración del checkout sea visible.
• Que se vea bien en celular.

Paso 14: Probar el botón de copiar cupón

Hacé clic en:

Copiar cupón

Luego pegalo en cualquier campo de texto para verificar que el código copiado sea correcto.

Ejemplo:

HOTSALE10

Después, hacé una prueba en la tienda:

1. Agregá un producto al carrito.
2. Avanzá hasta el checkout.
3. Llegá al último paso de la compra.
4. Pegá el cupón en el campo correspondiente.
5. Verificá que el descuento se aplique correctamente.

Paso 15: Publicar los cambios

Cuando hayas confirmado que todo funciona, volvé a Google Tag Manager y hacé clic en:

Enviar

Agregá un nombre de versión.

Ejemplo:

Pop-up cupón Hot Sale

También podés agregar una descripción:

Se agrega pop-up promocional con cupón de descuento para Hot Sale.

Luego publicá los cambios.

Paso 16: Verificar desde una ventana incógnita

Después de publicar, abrí tu tienda desde una ventana incógnita.

Esto permite probar la experiencia como si fueras un nuevo visitante.

Revisá nuevamente:

• Aparición del pop-up.
• Diseño en desktop.
• Diseño en mobile.
• Copiado del cupón.
• Aplicación del cupón en checkout.
• Cierre del pop-up.

Recomendaciones de uso

Mantené el mensaje simple

El pop-up debe comunicar el beneficio de forma rápida.

Una buena estructura es:

Descuento + cupón + dónde aplicarlo

Ejemplo:

10% OFF extra en tu compra
Cupón: HOTSALE10
Aplicalo en el checkout, en el último paso de la compra.

No uses demasiados pop-ups al mismo tiempo

Durante Hot Sale puede ser tentador mostrar muchas promociones, pero demasiados mensajes pueden afectar la experiencia de compra.

Lo ideal es usar un solo pop-up principal con una promoción clara.

Revisá que el cupón esté bien configurado

Antes de publicar, verificá que el cupón exista en Pedix y que sus condiciones estén activas.

Revisá especialmente:

• Código del cupón.
• Fechas de vigencia.
• Monto mínimo de compra.
• Productos o categorías incluidas.
• Límite de usos, si corresponde.

Usá una vigencia clara

Para generar urgencia, podés incluir una frase como:

Promoción válida durante Hot Sale o hasta agotar stock.

O también:

Válido solo por tiempo limitado.

Problemas frecuentes

El pop-up no aparece

Revisá lo siguiente:

1. Que la etiqueta esté publicada en Google Tag Manager.
2. Que el contenedor GTM esté conectado correctamente en Pedix.
3. Que el activador sea All Pages.
4. Que no hayas cerrado el pop-up recientemente.

Si lo cerraste, puede que no vuelva a aparecer hasta que pasen las horas configuradas.

Para probarlo de nuevo, podés:

• Abrir una ventana incógnita.
• Borrar el almacenamiento local del navegador.
• Cambiar el valor de storageKey en el código.

Ejemplo:

var storageKey = "pedix_hotsale_coupon_popup_closed_until_v2";

El cupón visible no coincide con el cupón copiado

Revisá esta línea:

var couponCode = "HOTSALE10";

Ese es el cupón que se copia.

También revisá que el cupón visible se actualice correctamente en esta línea:

couponCodeEl.innerHTML = couponCode;

No edites el cupón manualmente en el HTML si el código lo está tomando desde JavaScript.

Los colores no se ven como esperaba

Si la detección automática no toma el color correcto de la tienda, desactivala:

var useAdaptiveColors = false;

Y definí manualmente tus colores:

var fallbackPrimaryColor = "#e53935";
var fallbackSecondaryColor = "#ffb300";

El cupón no se aplica en el checkout

El pop-up solo muestra y copia el cupón. El descuento se valida en Pedix.

Revisá que:

1. El cupón esté creado en Pedix.
2. El código sea exactamente el mismo.
3. La promoción esté activa.
4. La compra cumpla las condiciones del cupón.
5. El cliente lo esté ingresando en el último paso del checkout.

Texto sugerido para el pop-up

Podés usar este contenido como base:

Hot Sale

10% OFF extra en tu compra

Aprovechá este beneficio exclusivo y usá tu cupón antes de finalizar el pedido.

Cupón de descuento:
HOTSALE10

Importante: copiá el cupón y aplicalo en el checkout, en el último paso de la compra, antes de confirmar tu pedido.

Botón:
Copiar cupón

Nota:
Promoción válida por tiempo limitado. El descuento se valida al ingresar el cupón en el checkout final.