Gratis

Confianza

Reseñas!

Crea un sistema de reseñas propio en Shopify.

Diseño limpio y visible
Aprueba o declina tu la reseña
Responsive para móvil

GRATIS

Promociones

Temporizador de oferta

Crea urgencia visual con un contador elegante para promociones y campañas especiales.

Mayor sensación de urgencia
Perfecto para campañas
Diseño atractivo

<div id="promo-timer" style="background:linear-gradient(135deg, #ff3c00, #ff9800); color:#fff; padding:20px; border-radius:14px; text-align:center; font-family:'Poppins', sans-serif; max-width:500px; margin:auto; box-shadow:0 4px 15px rgba(0,0,0,0.2);">

  <!-- 🟨 CAMBIA AQUÍ EL TÍTULO -->
  <h2>🎁 ¡20% DE DESCUENTO SOLO POR TIEMPO LIMITADO!</h2>

  <!-- 🟨 CAMBIA AQUÍ EL CÓDIGO DE CUPÓN -->
  <p>Usa el cupón: <span style="background:#fff; color:#ff3c00; padding:4px 10px; border-radius:6px; font-weight:bold;">OFERTA20</span></p>

  <div id="countdown">⏳ Cargando...</div>
</div>

<script>
document.addEventListener("DOMContentLoaded", function() {
  // 🟨 CAMBIA AQUÍ LA FECHA FINAL (Año, Mes-1, Día, Hora, Minuto, Segundo)
  var endDate = new Date(2025, 10, 10, 23, 59, 59).getTime();
  var countdownEl = document.getElementById("countdown");
  var timer = setInterval(function() {
    var now = new Date().getTime();
    var distance = endDate - now;
    if (distance <= 0) {
      clearInterval(timer);
      countdownEl.innerHTML = "🎉 ¡Promoción finalizada!";
      return;
    }
    var d = Math.floor(distance / (1000*60*60*24));
    var h = Math.floor((distance % (1000*60*60*24)) / (1000*60*60));
    var m = Math.floor((distance % (1000*60*60)) / (1000*60));
    var s = Math.floor((distance % (1000*60)) / 1000);
    countdownEl.innerHTML = d + "d " + h + "h " + m + "m " + s + "s";
  }, 1000);
});
</script>

GRATIS

Por mes

Ver demo

Gratis

Conversión

Botón flotante de WhatsApp

Haz que tus visitantes te escriban en segundos desde cualquier parte de la tienda.

Más consultas directas
Personalizable
Siempre visible

<!-- 💬 Botón flotante de chat genérico -->

<!-- 🟨 CAMBIA AQUÍ TU ENLACE (WhatsApp, Messenger, Telegram, etc.) -->
<a href="https://wa.me/5215512345678" target="_blank" style="position:fixed;bottom:20px;right:20px;background:linear-gradient(135deg,#4facfe,#00f2fe);color:#fff;padding:16px;border-radius:50%;box-shadow:0 4px 12px rgba(0,0,0,0.25);display:flex;align-items:center;justify-content:center;text-decoration:none;z-index:9999;transition:transform 0.2s;" onmouseover="this.style.transform='scale(1.1)';" onmouseout="this.style.transform='scale(1)';">

  <!-- 💭 Ícono genérico de chat -->
  <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" width="28" height="28" fill="currentColor">
    <path d="M20 2H4a2 2 0 0 0-2 2v20l4-4h14a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2zM6 9h12v2H6V9zm8 4H6v-2h8v2zm2-4H6V7h10v2z"></path>
  </svg>

</a>

GRATIS

Gran opción de entrada

Ver demo

Gratis

Contenido

Visor de PDF para tu tienda

Muestra catálogos, manuales o fichas técnicas dentro de tu sitio de forma elegante y profesional.

Ideal para catálogos y manuales
Vista integrada en tu tienda
Diseño responsivo

Gratis

Conversión

Cartel de anuncio

Pega un anuncio en cualquier sección de tu tienda

Diseño limpio y visible
anuncio de promo
redes o cualquier otro

<!-- 💬 Banner Promocional -->
<div style="background:linear-gradient(90deg,#ff9a9e,#fad0c4);color:#fff;padding:18px;border-radius:14px;text-align:center;font-family:'Poppins',sans-serif;box-shadow:0 4px 12px rgba(0,0,0,0.15);">

  <!-- 🟨 CAMBIA AQUÍ EL TEXTO -->
  <h3>🔥 ¡Ofertas de temporada! 20% de descuento en todos los accesorios 🔊</h3>

  <!-- 🟨 CAMBIA AQUÍ EL ENLACE -->
  <a href="/collections/ofertas" style="background:#fff;color:#ff4f4f;padding:8px 16px;border-radius:8px;text-decoration:none;font-weight:700;">Ver ofertas →</a>

</div>

Pago

Conversión

Subasta en tu tienda.

Crea un sistema para subastar productos en tu tienda.

Diseño limpio y visible
Pujas de clientes
Tiempo de finalización y ganador

<div>Pega aquí tu código para que el cliente lo copie</div>

pago

Conversión

Sistema de citas a tu medida.

Creamos tu sistema de cita y apartados, con todas las características que necesites.

Disponibilidad
Pagos y confirmación
Agrega tus servicios

Diseño moderno y limpio

Compatible con móvil

Instalación rápida

Ajustable a tu marca

Crea las secciones que necesita tu tienda:

En esta sección aprenderás a dar solución a tus problemas en Shopify.

⚡ Gestión Shopify desde tu celular

⚡Administra tu tienda Shopify desde una app. Gestiona ⭐reseñas, preguntas, alertas🔔 de precio y solicitudes de garantía en un solo panel móvil.

Una app que te permite administrar tu tienda Shopify desde tu móvil: reseñas, preguntas, alertas de precio y garantías — todo en un solo lugar.

Dueños de tiendas Shopify, multiples tiendas o emprendedores que quieren lucir muy profesional su tienda.

Instala la app, conecta Shopify y administra todo desde tu móvil.

299MXN/mes

💚 Cómo lo gestionas tú en tu app

📱 Control total desde móvil

✍ Reseñas & preguntas en un panel

🛠 Gestión de garantías al instante

↓ Lo que gestionas arriba → tu cliente lo vive abajo ↓

🛒 Cómo lo ven tus clientes en el sitio web:

🛒 Se muestra en el producto

⭐ Opiniones visibles y verificadas

¿Quieres esta integración en tu tienda Shopify?

Solicitar integración

Agenda una cita

Primero elige el tipo de servicio y luego selecciona tu fecha y horario.

Tipo de servicio

Calendario

Lun

Mar

Mié

Jue

Vie

Sáb

Dom

Las fechas en verde intenso tienen disponibilidad para reservar.

Horarios disponibles

Tus datos

    💬 Copia los códigos y pégalos en tu tienda
  
      ⭐RESEÑAS

      
          📜 Mostrar / ocultar código
        
          
          
          

          <div id="product-reviews" class="product-reviews compact">
  <h3 class="reviews-title">Opiniones de clientes</h3>

  <div id="approved-reviews"></div>

  <h4 style="margin-top:25px;font-weight:700;">Deja tu reseña</h4>

  <form id="review-form" class="review-form">
    <label for="review-name">Nombre</label>
    <input type="text" id="review-name" required placeholder="Tu nombre">

    <label for="review-email">Correo electrónico (opcional)</label>
    <input type="email" id="review-email" placeholder="tuemail@ejemplo.com">

    <label for="review-rating">Calificación</label>
    <select id="review-rating" required>
      <option value="">Selecciona ⭐</option>
      <option value="5">⭐⭐⭐⭐⭐</option>
      <option value="4">⭐⭐⭐⭐</option>
      <option value="3">⭐⭐⭐</option>
      <option value="2">⭐⭐</option>
      <option value="1">⭐</option>
    </select>

    <label for="review-comment">Comentario</label>
    <textarea id="review-comment" rows="3" required placeholder="Escribe tu opinión..."></textarea>

    <!-- Datos del producto -->
    <input type="hidden" id="review-store" value="viaseler.com">
    <input type="hidden" id="review-product" value="">
    <input type="hidden" id="review-handle" value="">
    <input type="hidden" id="review-product-id" value="">

    <button type="submit" class="review-btn">Enviar reseña</button>
  </form>
</div>



<style>
.product-reviews.compact {
  background: #ffffff;
  padding: 20px 22px;
  border-radius: 12px;
  margin-top: 25px;
  border: 1px solid #e6e6e6;
  font-size: 15px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  max-width: 600px;
}
.review-form { 
  display:flex; 
  flex-direction:column; 
  gap:14px; 
}
.review-form input, 
.review-form textarea, 
.review-form select {
  padding:10px; 
  border-radius:6px; 
  border:1px solid #ddd; 
  font-size:14px;
}
.review-btn {
  background-color:#d32f2f; 
  color:white; 
  padding:12px 18px; 
  border-radius:8px;
  font-weight:700; 
  border:none; 
  cursor:pointer;
}
.review-btn:hover { 
  opacity: 0.9; 
}
.review-item {
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 10px;
  margin-top: 10px;
}
.review-stars {
  color: #ffc107;
  font-size: 18px;
}
.review-author {
  font-weight: bold;
  margin: 3px 0;
}
.review-date {
  font-size: 12px;
  color: #888;
}
</style>

<script>
document.addEventListener("DOMContentLoaded", function () {
  // =====================================================
  // PEGA AQUÍ TU URL DE GOOGLE APPS SCRIPT
  // Ejemplo:
  // https://script.google.com/macros/s/XXXX/exec
  // o
  // https://script.google.com/macros/s/XXXX/exec?token=ABC
  // =====================================================
  const endpoint = "PEGA_LA_URL_DE_TU_SCRIPT_AQUI";

  const container = document.getElementById("approved-reviews");
  const form = document.getElementById("review-form");

  const safeVal = (id) => {
    const el = document.getElementById(id);
    return el ? String(el.value || "").trim() : "";
  };

  const normalize = (value) => {
    return String(value || "")
      .trim()
      .toLowerCase()
      .normalize("NFD")
      .replace(/[\u0300-\u036f]/g, "");
  };

  const escapeHtml = (str) => {
    return String(str || "").replace(/[&<>"']/g, function (m) {
      return ({
        "&": "&amp;",
        "<": "&lt;",
        ">": "&gt;",
        '"': "&quot;",
        "'": "&#39;"
      })[m];
    });
  };

  const pick = (obj, keys) => {
    for (const k of keys) {
      if (obj && obj[k] !== undefined && obj[k] !== null && obj[k] !== "") {
        return obj[k];
      }
    }
    return "";
  };

  const getProductFromJson = () => {
    const el = document.getElementById("current-product-json");
    if (!el) return {};
    try {
      return JSON.parse(el.textContent);
    } catch (e) {
      return {};
    }
  };

  const getHandleFromUrl = () => {
    const match = window.location.pathname.match(/\/products\/([^\/\?\#]+)/i);
    return match ? decodeURIComponent(match[1]) : "";
  };

  const productJson = getProductFromJson();

  const store = safeVal("review-store") || window.location.hostname;
  const product = safeVal("review-product") || productJson.title || document.title.replace(/\s*\|.*$/, "").trim();
  const productHandle = safeVal("review-handle") || productJson.handle || getHandleFromUrl();
  const productId = safeVal("review-product-id") || String(productJson.id || "").trim();

  console.log("Producto detectado:", {
    store,
    product,
    productHandle,
    productId
  });

  const endpointUrl = (() => {
    try { return new URL(endpoint); } catch(e){ return null; }
  })();

  const token = endpointUrl ? endpointUrl.searchParams.get("token") : null;
  const baseEndpoint = endpointUrl ? (endpointUrl.origin + endpointUrl.pathname) : endpoint;

  if (!endpoint || endpoint.includes("PEGA_LA_URL_DE_TU_SCRIPT_AQUI")) {
    container.innerHTML = "<p style='color:#666;'>(Modo demo) Aquí aparecerán las reseñas cuando conectes tu script.</p>";
  } else {
    container.innerHTML = "<p style='color:#666;'>Cargando reseñas...</p>";
  }

  form.addEventListener("submit", function(e) {
    e.preventDefault();

    if (!endpoint || endpoint.includes("PEGA_LA_URL_DE_TU_SCRIPT_AQUI")) {
      alert("Falta conectar el script. Pega la URL de tu script.");
      return;
    }

    const name = safeVal("review-name");
    const email = safeVal("review-email");
    const rating = safeVal("review-rating");
    const comment = safeVal("review-comment");

    if (!name || !rating || !comment) {
      alert("Completa los campos obligatorios.");
      return;
    }

    const data = new FormData();
    data.append("action", "review");
    if (token) data.append("token", token);

    data.append("store", store);
    data.append("product", product);
    data.append("handle", productHandle);
    data.append("product_id", productId);

    data.append("name", name);
    data.append("email", email);
    data.append("rating", rating);
    data.append("comment", comment);

    fetch(baseEndpoint, {
      method: "POST",
      body: data,
      mode: "no-cors"
    })
    .then(() => {
      alert("¡Gracias por tu reseña! Será aprobada pronto.");
      form.reset();
    })
    .catch(err => {
      console.error("POST error:", err);
      alert("No se pudo enviar la reseña.");
    });
  });

  if (endpoint && !endpoint.includes("PEGA_LA_URL_DE_TU_SCRIPT_AQUI")) {
    const url = `${baseEndpoint}?type=review${token ? `&token=${encodeURIComponent(token)}` : ""}`;

    fetch(url)
      .then(r => r.json())
      .then(reviews => {
        const filtered = (reviews || []).filter(r => {
          const rHandle = normalize(pick(r, ["Handle", "handle"]));
          const rProductId = String(pick(r, ["ProductID", "product_id", "productId"])).trim();
          const rProduct = normalize(pick(r, ["Producto", "product", "Product"]));
          const estado = normalize(pick(r, ["Estado", "estado", "Status", "status"]));

          const approved = (estado === "aprobado" || estado === "approved");

          const matchById = productId && rProductId && String(productId) === rProductId;
          const matchByHandle = productHandle && rHandle && normalize(productHandle) === rHandle;
          const matchByProduct = product && rProduct && normalize(product) === rProduct;

          return approved && (matchById || matchByHandle || matchByProduct);
        });

        if (!filtered.length) {
          container.innerHTML = "<p style='color:#666;'>Aún no hay reseñas publicadas.</p>";
          return;
        }

        filtered.sort((a, b) => {
          const fa = new Date(pick(a, ["Fecha", "fecha", "Timestamp", "Date"]));
          const fb = new Date(pick(b, ["Fecha", "fecha", "Timestamp", "Date"]));
          return fb - fa;
        });

        let html = "";
        filtered.forEach(r => {
          const rating = parseInt(pick(r, ["Rating", "rating"]), 10) || 0;
          const nombre = escapeHtml(pick(r, ["Nombre", "name", "Name"]) || "Cliente");
          const comentario = escapeHtml(pick(r, ["Comentario", "comment", "Comment"]) || "");
          const fecha = escapeHtml(pick(r, ["Fecha", "fecha", "Timestamp", "Date"]) || "");

          html += `
            <div class="review-item">
              <div class="review-stars">${"⭐".repeat(Math.max(0, rating))}</div>
              <p class="review-author">${nombre}</p>
              <p>${comentario}</p>
              <p class="review-date">${fecha}</p>
            </div>
          `;
        });

        container.innerHTML = html;
      })
      .catch(err => {
        console.error("GET error:", err);
        container.innerHTML = "<p style='color:#666;'>No se pudieron cargar las reseñas.</p>";
      });
  }
});
</script>

          ✅ ¡Copiado!

          
          
            Copiado: 0 veces
          
        

    

      ❓PREGUNTAS Y RESPUESTAS

      
          📜 Mostrar / ocultar código
        
          
          
          

          <div id="qa-box" style="background:#f8f9fc;border-radius:12px;padding:20px;margin-top:25px;">
  <h3 style="color:#0d1b45;font-size:22px;font-weight:800;margin-bottom:10px;">PREGUNTAS Y RESPUESTAS</h3>

  <div id="qa-container" style="background:#fff;border-radius:10px;padding:18px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;">
    <div id="qa-list" style="flex:1;min-width:220px;">
      <p style="margin:0;font-size:17px;font-weight:600;color:#222;">¿Tiene alguna pregunta?</p>
      <p style="margin:3px 0 0 0;color:#666;">Sé el primero en hacer una pregunta.</p>
    </div>

    <button id="show-qa-form" type="button" style="background:#1e73be;color:#fff;border:none;padding:12px 22px;border-radius:40px;font-size:16px;cursor:pointer;display:flex;align-items:center;gap:6px;margin-top:10px;">
      <span style="background:#fff;color:#1e73be;border-radius:50%;width:22px;height:22px;display:flex;align-items:center;justify-content:center;font-weight:bold;">?</span>
      Haz una pregunta
    </button>
  </div>

  <form id="qa-form" style="display:none;background:#fff;border-radius:10px;padding:15px;margin-top:15px;">
    <label style="font-weight:600;">Tu nombre</label>
    <input type="text" id="qa-name" required style="width:100%;padding:8px;border:1px solid #ccc;border-radius:8px;margin-bottom:10px;">

    <label style="font-weight:600;">Tu correo (opcional)</label>
    <input type="email" id="qa-email" placeholder="correo@ejemplo.com" style="width:100%;padding:8px;border:1px solid #ccc;border-radius:8px;margin-bottom:10px;">

    <label style="font-weight:600;">Tu pregunta</label>
    <textarea id="qa-question" required rows="3" placeholder="Escribe tu pregunta..." style="width:100%;padding:8px;border:1px solid #ccc;border-radius:8px;margin-bottom:10px;"></textarea>

    <!-- Datos automáticos del producto -->
    <input type="hidden" id="qa-store" value="viaseler.com">
    <input type="hidden" id="qa-product" value="">
    <input type="hidden" id="qa-handle" value="">
    <input type="hidden" id="qa-product-id" value="">

    <button type="submit" style="background:#1e73be;color:#fff;border:none;padding:10px 18px;border-radius:8px;cursor:pointer;">Enviar pregunta</button>
  </form>

  <div id="qa-items" style="margin-top:15px;"></div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
  // =====================================================
  // 🔥 PEGA LA URL DE TU SCRIPT AQUI
  // Ejemplo:
  // https://script.google.com/macros/s/XXXX/exec
  // o
  // https://script.google.com/macros/s/XXXX/exec?token=ABC
  // =====================================================
  const endpoint = "PEGA_LA_URL_DE_TU_SCRIPT_AQUI";

  const list = document.getElementById('qa-items');
  const form = document.getElementById('qa-form');
  const toggleBtn = document.getElementById('show-qa-form');

  const store = document.getElementById('qa-store').value;
  const product = document.getElementById('qa-product').value;
  const handle = document.getElementById('qa-handle').value;
  const productId = document.getElementById('qa-product-id').value;

  const endpointUrl = (() => {
    try { return new URL(endpoint); } catch(e){ return null; }
  })();

  const token = endpointUrl ? endpointUrl.searchParams.get("token") : null;
  const baseEndpoint = endpointUrl ? (endpointUrl.origin + endpointUrl.pathname) : endpoint;

  const pick = (obj, keys) => {
    for (const k of keys) {
      if (obj && obj[k] !== undefined && obj[k] !== null && obj[k] !== "") return obj[k];
    }
    return "";
  };

  toggleBtn.addEventListener('click', () => {
    form.style.display = form.style.display === 'none' ? 'block' : 'none';
  });

  async function loadQuestions() {
    list.innerHTML = "";

    if (!endpoint || endpoint.includes("PEGA_LA_URL_DE_TU_SCRIPT_AQUI")) {
      document.getElementById('qa-list').innerHTML =
        "<p style='margin:0;font-size:17px;font-weight:600;color:#222;'>(Modo demo) Aquí se mostrarán preguntas aprobadas.</p>";
      return;
    }

    try {
      const url = `${baseEndpoint}?type=question${token ? `&token=${encodeURIComponent(token)}` : ""}`;
      const res = await fetch(url);
      const questions = await res.json();

      const filtered = (questions || []).filter(q => {
        const qHandle = String(pick(q, ["Handle", "handle"])).trim();
        const qProductId = String(pick(q, ["ProductID", "product_id", "productId"])).trim();
        const estado = String(pick(q, ["Estado", "estado", "Status", "status"])).trim().toLowerCase();

        const matchById = productId && qProductId && qProductId === String(productId).trim();
        const matchByHandle = qHandle === handle;
        const approved = (estado === "aprobado" || estado === "approved");

        return approved && (matchById || matchByHandle);
      });

      if (!filtered.length) return;

      document.getElementById('qa-list').innerHTML =
        "<p style='margin:0;font-weight:600;font-size:17px;'>Preguntas recientes:</p>";

      filtered.sort((a, b) => {
        const fa = new Date(pick(a, ["Fecha", "fecha", "Timestamp", "Date"]));
        const fb = new Date(pick(b, ["Fecha", "fecha", "Timestamp", "Date"]));
        return fb - fa;
      });

      filtered.forEach(q => {
        const nombre = pick(q, ["Nombre", "name", "Name"]);
        const pregunta = pick(q, ["Pregunta", "question", "Question"]);
        const respuesta = pick(q, ["Respuesta", "answer", "Answer"]);

        const div = document.createElement('div');
        div.style = "background:#fff;border-radius:8px;padding:10px 14px;margin-top:10px;border:1px solid #eee;";
        div.innerHTML = `
          <p style="margin:0;font-weight:600;color:#0d1b45;">${nombre || "Cliente"}</p>
          <p style="margin:3px 0 8px 0;">${pregunta || ""}</p>
          ${String(respuesta).trim() !== ""
            ? `<p style="margin:0;color:#2e7d32;font-weight:500;">${respuesta}</p>`
            : "" }
        `;
        list.appendChild(div);
      });

    } catch (err) {
      console.error(err);
    }
  }

  form.addEventListener('submit', async e => {
    e.preventDefault();

    if (!endpoint || endpoint.includes("PEGA_LA_URL_DE_TU_SCRIPT_AQUI")) {
      alert("Falta conectar el script. Pega la URL de tu script.");
      return;
    }

    const data = new FormData();
    data.append("action", "question");
    if (token) data.append("token", token);

    data.append("store", store);
    data.append("product", product);
    data.append("handle", handle);
    data.append("product_id", productId);

    data.append("name", document.getElementById('qa-name').value);
    data.append("email", document.getElementById('qa-email').value);
    data.append("question", document.getElementById('qa-question').value);

    try {
      await fetch(baseEndpoint, {
        method: "POST",
        mode: "no-cors",
        body: data
      });

      alert("Tu pregunta fue enviada y se publicará al ser aprobada.");
      form.reset();
      form.style.display = 'none';
      loadQuestions();

    } catch (err) {
      console.error(err);
      alert("Error al enviar la pregunta.");
    }
  });

  loadQuestions();
});
</script>

          ✅ ¡Copiado!

          
          
            Copiado: 0 veces
          
        

    

      📢 ALERTAS PRECIO

      
          📜 Mostrar / ocultar código
        
          
          
          

          <!-- BOTÓN PARA ABRIR POPUP -->
<button id="openPriceAlert"
  style="margin-top:12px;background:#ffcc00;border:none;padding:10px 15px;
  border-radius:6px;font-weight:bold;cursor:pointer;">
  🔔 Notificarme cuando baje de precio
</button>

<!-- POPUP DE ALERTA -->
<div id="popupAlert"
  style="display:none;position:fixed;top:0;left:0;width:100%;height:100%;
  background:rgba(0,0,0,0.5);z-index:9999;
  align-items:flex-start;justify-content:center;padding-top:80px;">

  <div style="background:white;padding:20px;border-radius:10px;max-width:350px;width:90%;
  box-shadow:0 4px 20px rgba(0,0,0,0.2);position:relative;">

      <span id="closePopup"
        style="position:absolute;top:10px;right:14px;font-size:20px;
        cursor:pointer;font-weight:bold;color:#333;">×</span>

      <h3 style="margin-top:0;">🔔 Crear alerta de precio</h3>
      <p style="font-size:14px;color:#444;">
        Te avisaremos por correo cuando baje de precio.
      </p>

      <label>Email:</label>
      <input id="pa_email" type="email" placeholder="Correo electrónico"
        style="width:100%;padding:8px;margin-bottom:10px;border-radius:5px;border:1px solid #ccc;">

      <label>Precio objetivo:</label>
      <input id="pa_target" type="number" step="0.01" inputmode="decimal"
        placeholder="Ej. 499"
        style="width:100%;padding:8px;margin-bottom:10px;border-radius:5px;border:1px solid #ccc;">

      <button id="pa_button"
        style="width:100%;padding:10px;background:#000;color:#fff;border:none;border-radius:5px;cursor:pointer;">
        Crear alerta
      </button>

      <p id="pa_msg" style="margin-top:10px;color:green;font-weight:bold;display:none;">
        ✔️ Alerta creada
      </p>
  </div>
</div>



<script>
setTimeout(() => {
  // =====================================================
  // PEGA AQUÍ TU URL DEL SCRIPT
  // https://script.google.com/macros/s/XXXX/exec
  // o
  // https://script.google.com/macros/s/XXXX/exec?token=ABC
  // =====================================================
  const endpoint = "PEGA_AQUI_TU_URL_DEL_SCRIPT";

  const popup = document.getElementById("popupAlert");
  const openBtn = document.getElementById("openPriceAlert");
  const closeBtn = document.getElementById("closePopup");
  const btn = document.getElementById("pa_button");
  const msg = document.getElementById("pa_msg");

  if (!popup || !openBtn || !closeBtn || !btn) {
    console.error("PriceAlert: faltan elementos. Pega TODO el bloque en Custom Liquid del producto.");
    return;
  }

  // Token opcional en endpoint
  let baseEndpoint = endpoint;
  let token = "";
  try {
    const u = new URL(endpoint);
    token = u.searchParams.get("token") || "";
    baseEndpoint = u.origin + u.pathname;
  } catch (e) {}

  const safeString = (v) => String(v == null ? "" : v).trim();

  const normalizeMoneyNumber = (value) => {
    const n = Number(value);
    if (isNaN(n)) return 0;
    return n;
  };

  const getHandleFromUrl = () => {
    const match = window.location.pathname.match(/\/products\/([^\/\?\#]+)/i);
    return match ? decodeURIComponent(match[1]) : "";
  };

  const getProductJson = () => {
    const el = document.getElementById("pa-product-json");
    if (!el) return {};
    try {
      return JSON.parse(el.textContent);
    } catch (e) {
      return {};
    }
  };

  const getMetaProduct = () => {
    if (window.meta && window.meta.product) {
      return window.meta.product;
    }
    return {};
  };

  const productJson = getProductJson();
  const metaProduct = getMetaProduct();

  const productId =
    safeString(productJson.id) ||
    safeString(metaProduct.id);

  const productName =
    safeString(productJson.title) ||
    safeString(metaProduct.title) ||
    document.title.replace(/\s*\|.*$/, "").trim();

  const handle =
    safeString(productJson.handle) ||
    safeString(metaProduct.handle) ||
    getHandleFromUrl();

  const store =
    "viaseler.com" ||
    window.location.hostname;

  let priceActual = 0;

  // Intenta tomar precio de variante seleccionada primero
  if (productJson.selected_or_first_available_variant && productJson.selected_or_first_available_variant.price != null) {
    priceActual = normalizeMoneyNumber(productJson.selected_or_first_available_variant.price) / 100;
  } else if (productJson.price != null) {
    priceActual = normalizeMoneyNumber(productJson.price) / 100;
  } else {
    // Respaldo: intentar leer precio del DOM
    const possiblePriceEl = document.querySelector(
      '[data-product-price], .price-item--sale, .price-item--regular, .price .money, .price__regular .price-item'
    );
    if (possiblePriceEl) {
      const txt = possiblePriceEl.textContent || "";
      const cleaned = txt.replace(/[^\d.,]/g, "").replace(/,/g, "");
      const maybe = parseFloat(cleaned);
      if (!isNaN(maybe)) priceActual = maybe;
    }
  }

  console.log("PriceAlert producto detectado:", {
    store,
    productId,
    productName,
    handle,
    priceActual
  });

  // Abrir popup
  openBtn.addEventListener("click", () => {
    msg.style.display = "none";
    popup.style.display = "flex";
    document.body.style.overflow = "hidden";

    setTimeout(() => {
      const emailEl = document.getElementById("pa_email");
      if (emailEl) emailEl.focus();
    }, 50);
  });

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

  closeBtn.addEventListener("click", closePopup);

  popup.addEventListener("click", (e) => {
    if (e.target === popup) closePopup();
  });

  btn.addEventListener("click", function () {
    if (!endpoint || endpoint.includes("PEGA_AQUI")) {
      alert("Modo demo. Conecta tu endpoint del script.");
      return;
    }

    const email = safeString(document.getElementById("pa_email").value);
    const target = safeString(document.getElementById("pa_target").value);

    if (!email || !target) {
      alert("Por favor ingresa tu email y el precio objetivo.");
      return;
    }

    if (!productName && !handle && !productId) {
      alert("No se pudo detectar el producto actual. Revisa que este bloque esté en la plantilla del producto.");
      return;
    }

    window.__priceAlertSent = window.__priceAlertSent || {};
    const key = (productId || handle || productName) + "|" + email.toLowerCase();

    if (window.__priceAlertSent[key]) {
      alert("Ya registraste una alerta para este producto con este correo.");
      return;
    }

    const params = new URLSearchParams();
    params.append("action", "pricealert");
    params.append("store", store);
    params.append("name", "Cliente Shopify");
    params.append("email", email);
    params.append("product", productName);
    params.append("handle", handle);
    params.append("product_id", productId);
    params.append("currentprice", String(priceActual));
    params.append("targetprice", String(target));
    if (token) params.append("token", token);

    fetch(baseEndpoint, {
      method: "POST",
      mode: "no-cors",
      body: params
    })
    .then(() => {
      msg.style.display = "block";
      closePopup();
      window.__priceAlertSent[key] = true;
      document.getElementById("pa_email").value = "";
      document.getElementById("pa_target").value = "";
    })
    .catch(() => {
      msg.style.display = "block";
      closePopup();
      window.__priceAlertSent[key] = true;
      document.getElementById("pa_email").value = "";
      document.getElementById("pa_target").value = "";
    });
  });

}, 300);
</script>

          ✅ ¡Copiado!

          
          
            Copiado: 0 veces
          
        

    

      🛡️GARANTIAS

      
          📜 Mostrar / ocultar código
        
          
          
          

          <!-- BOTÓN -->
<button id="openWarranty"
style="margin-top:15px;background:#1a73e8;color:white;border:none;padding:12px 18px;
border-radius:6px;font-weight:bold;cursor:pointer;">
🛠 Solicitar garantía
</button>

<!-- POPUP -->
<div id="popupWarranty"
style="display:none;position:fixed;top:0;left:0;width:100%;height:100%;
background:rgba(0,0,0,0.5);z-index:9999;align-items:flex-start;justify-content:center;padding-top:80px;">

  <div style="background:white;padding:20px;border-radius:10px;max-width:420px;width:90%;
  box-shadow:0 4px 20px rgba(0,0,0,0.2);position:relative;">

    <span id="closeWarranty"
    style="position:absolute;top:10px;right:14px;font-size:22px;cursor:pointer;">×</span>

    <h3 style="margin-top:0;">Solicitud de garantía</h3>

    <p style="font-size:13px;color:#555;margin-top:-5px;">
      ⚠ Recuerda cumplir con nuestras políticas de garantía antes de enviar tu solicitud.
    </p>

    <input type="hidden" id="w-store" value="viaseler.com">
    <input type="hidden" id="w-product" value="">
    <input type="hidden" id="w-handle" value="">
    <input type="hidden" id="w-product-id" value="">

    <label>Nombre completo</label>
    <input type="text" id="w-name">

    <label>Correo electrónico</label>
    <input type="email" id="w-email">

    <label>Número de pedido</label>
    <input type="text" id="w-order">

    <label>Describe el problema</label>
    <textarea id="w-issue" rows="3"></textarea>

    <label>Evidencia (URL de fotos o video)</label>
    <input type="url" id="w-evidence" placeholder="Link de Google Drive, Dropbox, etc">

    <button id="warranty-btn"
    style="width:100%;padding:12px;background:#1a73e8;color:white;border:none;border-radius:6px;margin-top:10px;">
      Enviar solicitud
    </button>

    <p id="warranty-message" style="margin-top:10px;font-weight:bold;"></p>

  </div>
</div>



<style>
#popupWarranty input,
#popupWarranty textarea{
  width:100%;
  margin-bottom:10px;
  padding:10px;
  border-radius:6px;
  border:1px solid #ccc;
  box-sizing:border-box;
}
</style>

<script>
setTimeout(() => {

  // =====================================
  // SOLO CAMBIAR ESTA LÍNEA
  // =====================================
  const endpoint = "PEGA_AQUI_TU_URL_DEL_SCRIPT";

  let baseEndpoint = endpoint;
  let token = "";

  try {
    const u = new URL(endpoint);
    token = u.searchParams.get("token") || "";
    baseEndpoint = u.origin + u.pathname;
  } catch(e) {}

  const popup = document.getElementById("popupWarranty");
  const openBtn = document.getElementById("openWarranty");
  const closeBtn = document.getElementById("closeWarranty");
  const btn = document.getElementById("warranty-btn");
  const msg = document.getElementById("warranty-message");

  if (!popup || !openBtn || !closeBtn || !btn || !msg) {
    console.error("Warranty: faltan elementos del bloque.");
    return;
  }

  const safeVal = (id) => {
    const el = document.getElementById(id);
    return el ? String(el.value || "").trim() : "";
  };

  const getProductJson = () => {
    const el = document.getElementById("warranty-product-json");
    if (!el) return {};
    try {
      return JSON.parse(el.textContent);
    } catch (e) {
      return {};
    }
  };

  const getHandleFromUrl = () => {
    const match = window.location.pathname.match(/\/products\/([^\/\?\#]+)/i);
    return match ? decodeURIComponent(match[1]) : "";
  };

  const productJson = getProductJson();

  const store = safeVal("w-store") || window.location.hostname;
  const productName = safeVal("w-product") || String(productJson.title || "").trim() || document.title.replace(/\s*\|.*$/, "").trim();
  const handle = safeVal("w-handle") || String(productJson.handle || "").trim() || getHandleFromUrl();
  const productId = safeVal("w-product-id") || String(productJson.id || "").trim();

  console.log("Warranty producto detectado:", {
    store,
    productName,
    handle,
    productId
  });

  // Abrir popup
  openBtn.onclick = () => {
    popup.style.display = "flex";
    document.body.style.overflow = "hidden";
    msg.innerText = "";
    msg.style.color = "";
  };

  // Cerrar popup
  function closePopup() {
    popup.style.display = "none";
    document.body.style.overflow = "";
  }

  closeBtn.onclick = closePopup;

  popup.addEventListener("click", (e) => {
    if (e.target === popup) {
      closePopup();
    }
  });

  // Enviar garantía
  btn.addEventListener("click", async () => {
    if (!endpoint || endpoint.includes("PEGA_AQUI")) {
      msg.style.color = "red";
      msg.innerText = "Modo demo. Conecta tu endpoint.";
      return;
    }

    const name = safeVal("w-name");
    const email = safeVal("w-email");
    const order = safeVal("w-order");
    const issue = safeVal("w-issue");
    const evidence = safeVal("w-evidence");

    if (!name || !email || !order || !issue) {
      msg.style.color = "red";
      msg.innerText = "Completa nombre, correo, pedido y problema.";
      return;
    }

    if (!productName) {
      msg.style.color = "red";
      msg.innerText = "No se pudo detectar el producto actual.";
      return;
    }

    btn.disabled = true;
    btn.innerText = "Enviando...";
    msg.style.color = "#444";
    msg.innerText = "Enviando solicitud...";

    const data = new URLSearchParams();
    data.append("action", "warranty");

    if (token) data.append("token", token);

    // Coincide con tu Sheet
    data.append("store", store);
    data.append("name", name);
    data.append("email", email);
    data.append("order", order);
    data.append("product", productName);
    data.append("issue", issue);
    data.append("evidence", evidence);

    // Opcionales por si luego los quieres guardar
    data.append("handle", handle);
    data.append("product_id", productId);

    fetch(baseEndpoint, {
      method: "POST",
      mode: "no-cors",
      body: data
    })
    .then(() => {
      msg.style.color = "green";
      msg.innerText = "Solicitud enviada correctamente ✔";
      btn.innerText = "Enviado";

      document.getElementById("w-name").value = "";
      document.getElementById("w-email").value = "";
      document.getElementById("w-order").value = "";
      document.getElementById("w-issue").value = "";
      document.getElementById("w-evidence").value = "";

      setTimeout(() => {
        closePopup();
        btn.disabled = false;
        btn.innerText = "Enviar solicitud";
      }, 1200);
    })
    .catch(() => {
      msg.style.color = "green";
      msg.innerText = "Solicitud enviada correctamente ✔";
      btn.innerText = "Enviado";

      setTimeout(() => {
        closePopup();
        btn.disabled = false;
        btn.innerText = "Enviar solicitud";
      }, 1200);
    });
  });

}, 300);
</script>

          ✅ ¡Copiado!

          
          
            Copiado: 0 veces
          
        

    

      📢 CÓDIGO PARA APPSCRIPT

      
          📜 Mostrar / ocultar código
        
          
          
          

          // ===============================================
// API Shopify ↔ Google Sheets (con ID automático)
// - GET: ?type=question | ?type=review
// - POST: action=question|review|warranty|pricealert (form-data o JSON)
// - Genera ID único por fila (UUID) para AppSheet Key
// ===============================================


// ===============================================
// CONFIGURACIÓN
// ===============================================
const SHEET_ID = "1ts-gr2QM5rxe3i9JNkm0WDYMdj5jqFiDweCCXLM9JfY";

// Nombres exactos de tus hojas
const SHEET_REVIEWS   = "Reseñas";
const SHEET_QUESTIONS = "Preguntas";
const SHEET_WARRANTY  = "Garantías";
const SHEET_ALERTS    = "Price Alerts"; // <-- si tu hoja se llama "Price Alerts", cambia a "Price Alerts"

// (Opcional) Token anti-spam. Si lo dejas vacío "", NO se valida.
const API_TOKEN = ""; // ejemplo: "mi_token_super_secreto_123"


// ===============================================
// GET → Shopify carga preguntas / reseñas
// ===============================================
function doGet(e) {
  try {
    const ss = SpreadsheetApp.openById(SHEET_ID);
    const type = ((e && e.parameter && e.parameter.type) ? e.parameter.type : "").toLowerCase();

    // (Opcional) Validación de token también en GET
    if (API_TOKEN) {
      const t = (e && e.parameter) ? (e.parameter.token || "") : "";
      if (t !== API_TOKEN) return text_("unauthorized");
    }

    if (type === "question") {
      const sheet = ss.getSheetByName(SHEET_QUESTIONS);
      return sheetToJson_(sheet);
    }

    if (type === "review") {
      const sheet = ss.getSheetByName(SHEET_REVIEWS);
      return sheetToJson_(sheet);
    }

    return text_("invalid type");
  } catch (err) {
    return text_("error: " + err);
  }
}


// ===============================================
// POST → Shopify envía reseñas / preguntas / garantías / alertas
// ===============================================
function doPost(e) {
  try {
    const ss = SpreadsheetApp.openById(SHEET_ID);
    const payload = readPayload_(e);

    // Seguridad opcional
    if (API_TOKEN && payload.token !== API_TOKEN) {
      return text_("unauthorized");
    }

    const action = (payload.action || "").toLowerCase();

    // ID único por registro (ideal para AppSheet Key)
    const id = Utilities.getUuid();

    // ⭐ RESEÑAS
    // Encabezados: ID | Fecha | Tienda | Nombre | Email | Producto | Handle | Rating | Comentario | Estado
    if (action === "review") {
      ss.getSheetByName(SHEET_REVIEWS).appendRow([
        id,
        new Date(),
        payload.store || "",
        payload.name || "",
        payload.email || "",
        payload.product || "",
        payload.handle || "",
        payload.rating || "",
        payload.comment || payload.comentario || "",
        "Pendiente"
      ]);
      return text_("review saved");
    }

    // ⭐ PREGUNTAS
    // Encabezados: ID | Fecha | Tienda | Nombre | Email | Producto | Handle | Pregunta | Estado | Respuesta
    if (action === "question") {
      ss.getSheetByName(SHEET_QUESTIONS).appendRow([
        id,
        new Date(),
        payload.store || "",
        payload.name || "",
        payload.email || "",
        payload.product || "",
        payload.handle || "",
        payload.question || payload.pregunta || "",
        "Pendiente",
        ""
      ]);
      return text_("question saved");
    }

    // ⭐ GARANTÍAS
    // Encabezados: ID | Fecha | Tienda | Nombre | Email | Pedido | Producto | Problema | Evidencia URL | Estado
    if (action === "warranty") {
      ss.getSheetByName(SHEET_WARRANTY).appendRow([
        id,
        new Date(),
        payload.store || "",
        payload.name || "",
        payload.email || "",
        payload.order || payload.pedido || "",
        payload.product || "",
        payload.issue || payload.problem || payload.problema || payload.description || "",
        payload.evidence || payload.evidencia || payload.evidence_url || "",
        "Pendiente"
      ]);
      return text_("warranty saved");
    }

    // ⭐ ALERTAS DE PRECIO
    // Encabezados: ID | Fecha | Tienda | Nombre | Email | Producto | Handle | Precio actual | Precio objetivo
    if (action === "pricealert") {
      ss.getSheetByName(SHEET_ALERTS).appendRow([
        id,
        new Date(),
        payload.store || "",
        payload.name || "",
        payload.email || "",
        payload.product || "",
        payload.handle || "",
        payload.currentprice || payload.precio_actual || payload.precioactual || "",
        payload.targetprice || payload.precio_objetivo || payload.precioobjetivo || ""
      ]);
      return text_("pricealert saved");
    }

    return text_("invalid action");
  } catch (err) {
    return text_("error: " + err);
  }
}


// ===============================================
// HELPERS
// ===============================================

// Respuesta texto
function text_(msg) {
  return ContentService
    .createTextOutput(String(msg))
    .setMimeType(ContentService.MimeType.TEXT);
}

// Lee payload tanto de form-data/urlencoded (e.parameter) como JSON (postData)
function readPayload_(e) {
  try {
    if (e && e.postData && e.postData.contents) {
      const ct = (e.postData.type || "").toLowerCase();
      if (ct.includes("application/json")) {
        return JSON.parse(e.postData.contents || "{}");
      }
    }
  } catch (_) {
    // si el JSON viene mal, cae a e.parameter
  }
  return (e && e.parameter) ? e.parameter : {};
}

// Convierte hoja a JSON usando la fila 1 como headers
function sheetToJson_(sheet) {
  const values = sheet.getDataRange().getValues();
  if (!values || values.length === 0) {
    return ContentService.createTextOutput("[]").setMimeType(ContentService.MimeType.JSON);
  }

  const headers = values[0];
  const data = values.slice(1);

  const rows = data
    .filter(r => r.some(cell => cell !== "" && cell !== null)) // ignora filas completamente vacías
    .map(r => {
      const obj = {};
      headers.forEach((h, i) => {
        // si hay header vacío, lo ignoramos para evitar keys raras en JSON
        if (h !== "" && h !== null && typeof h !== "undefined") obj[String(h)] = r[i];
      });
      return obj;
    });

  return ContentService
    .createTextOutput(JSON.stringify(rows))
    .setMimeType(ContentService.MimeType.JSON);
}


// ===============================================
// OPCIONAL: Rellenar IDs a filas antiguas (1 sola vez)
// - Útil si ya agregaste la columna "ID" pero tienes filas viejas sin ID.
// - Corre esta función manualmente desde Apps Script (Run).
// ===============================================
function backfillMissingIds_() {
  const ss = SpreadsheetApp.openById(SHEET_ID);

  // Lista de hojas a corregir
  const sheets = [
    ss.getSheetByName(SHEET_REVIEWS),
    ss.getSheetByName(SHEET_QUESTIONS),
    ss.getSheetByName(SHEET_WARRANTY),
    ss.getSheetByName(SHEET_ALERTS),
  ].filter(Boolean);

  sheets.forEach(sheet => {
    const lastRow = sheet.getLastRow();
    const lastCol = sheet.getLastColumn();
    if (lastRow < 2) return;

    // Asumimos que "ID" es la primera columna (col 1)
    const idRange = sheet.getRange(2, 1, lastRow - 1, 1);
    const ids = idRange.getValues();

    let changed = false;
    for (let i = 0; i < ids.length; i++) {
      const v = ids[i][0];
      if (!v) {
        ids[i][0] = Utilities.getUuid();
        changed = true;
      }
    }
    if (changed) idRange.setValues(ids);
  });

  Logger.log("Backfill listo.");
}

          ✅ ¡Copiado!

          
          
            Copiado: 0 veces
          
        

    

📄 Copia la plantilla de Google Sheets

Descarga la plantilla con todas las tablas listas para conectar Shopify, Google Sheets y Apps Script.

📄 Copiar plantilla

Se abrirá Google Sheets y podrás crear tu propia copia automáticamente.

Inicia desde cero Shopify

“En esta sección aprenderás todo sobre Shopify: tutoriales, apps, automatización y estrategias para vender más”.

Tu carrito esta vacío

Tu carrito

Total estimado

Mejora tu tienda con módulos modernos, visuales y listos!

Reseñas!

Temporizador de oferta

Botón flotante de WhatsApp

Visor de PDF para tu tienda

Cartel de anuncio

Subasta en tu tienda.

Sistema de citas a tu medida.

Crea las secciones que necesita tu tienda:

💚 Cómo lo gestionas tú en tu app

🛒 Cómo lo ven tus clientes en el sitio web:

¿Quieres esta integración en tu tienda Shopify?

💬 Copia los códigos y pégalos en tu tienda

⭐RESEÑAS

❓PREGUNTAS Y RESPUESTAS

📢 ALERTAS PRECIO

🛡️GARANTIAS

📢 CÓDIGO PARA APPSCRIPT

📄 Copia la plantilla de Google Sheets

Inicia desde cero Shopify

País/región