Product Q&A para tu tienda online
Widget de preguntas y respuestas con IA para las páginas de producto de tu tienda online.
Requisito: Tienda online conectada
Este plugin requiere tener tu tienda online (Shopify, WooCommerce, PrestaShop o VTEX) conectada a WAzion para obtener la información de los productos. Si aún no la has conectado, ve a Dashboard → Integraciones.
¿Qué es Product Q&A?
Product Q&A es un widget que se integra en las páginas de producto de tu tienda online. Permite a los visitantes hacer preguntas específicas sobre el producto y recibir respuestas instantáneas de la IA, basadas en la información real del producto.
- • Respuestas basadas en título, descripción, variantes y stock del producto
- • No requiere configurar prompt (pero puedes añadir instrucciones adicionales)
- • Soporte multiidioma con traducción automática
- • 10 temas de diseño para combinar con tu tienda
- • Estadísticas de preguntas por producto
Cómo activar el plugin
- Abre el Dashboard de WAzion
- Ve a “Plugins“ → “Product Q&A“
- Activa el interruptor “Plugin activo“
- Añade tu dominio en “Dominios Autorizados“ (ej: mitienda.myshopify.com)
- Copia el código de integración
- Pégalo en la página de producto de tu tienda (en Shopify: main-product.liquid)
Código de integración
Este es el código que necesitas añadir a la página de producto de tu tienda:
<!-- WAzion Product Q&A --> <div id="wazion-product-qa"></div> <script> (function(w,d,s,t,p){ if(w.WazionProductQA)return; w.WazionProductQA={token:t,productId:p}; var js=d.createElement(s);js.async=true; js.src='https://www.wazion.com/plugins/product-qa/embed.js'; js.dataset.token=t;js.dataset.product=p; d.body.appendChild(js); })(window,document,'script','TU_TOKEN_AQUI','{{ product.id }}'); </script> <!-- /WAzion Product Q&A -->
Nota: {{ product.id }} es una variable de Liquid que Shopify reemplaza automáticamente con el ID del producto actual. No la modifiques.
Disponible en todas las plataformas
Product Q&A funciona con Shopify, WooCommerce, PrestaShop y VTEX. El widget se integra en la página de producto de cualquier plataforma. Más abajo encontrarás guías de instalación paso a paso para cada plataforma:
La sincronización de FAQs al storefront (metafields) está disponible para Shopify. Para las demás plataformas, las FAQs se generan automáticamente en el dashboard.
Guía paso a paso: Instalación en Shopify Guía Shopify
Sigue estos pasos detallados para añadir el widget de Product Q&A a las páginas de producto de tu tienda Shopify.
Accede al editor de código del tema
En tu panel de administración de Shopify:
- Haz clic en Tienda online en el menú lateral izquierdo
- Selecciona Temas
- En tu tema actual (el que dice “Actual“), haz clic en los tres puntos (...)
- En el menú desplegable, selecciona Editar código
Consejo: Antes de hacer cambios, considera duplicar tu tema como respaldo. Ve a los tres puntos y selecciona “Duplicar“.
Busca el archivo de la página de producto
En el panel lateral izquierdo del editor de código:
Temas Online Store 2.0 (Dawn, etc.)
- Expande la carpeta Sections
- Busca y haz clic en main-product.liquid
Temas antiguos (Vintage, Debut, etc.)
- Expande la carpeta Templates
- Busca product.liquid o product-template.liquid
¿No lo encuentras? Usa Ctrl+F (o Cmd+F en Mac) en la lista de archivos y busca “product“.
Encuentra dónde insertar el código
Busca un buen lugar para el widget. Recomendamos colocarlo después de la descripción del producto:
Buscar referencias comunes:
Usa Ctrl+F (Cmd+F en Mac) para buscar estas referencias:
- • product.description
- • product-form
- • add-to-cart
- • buy-buttons
Ubicación ideal: Después del formulario de añadir al carrito o después de la descripción del producto.
Pega el código del widget
Inserta el siguiente código en la ubicación que elegiste:
<!-- WAzion Product Q&A Widget --> <div id="wazion-product-qa" style="margin: 20px 0;"></div> <script> (function(w,d,s,t,p){ if(w.WazionProductQA)return; w.WazionProductQA={token:t,productId:p}; var js=d.createElement(s);js.async=true; js.src='https://www.wazion.com/plugins/product-qa/embed.js'; js.dataset.token=t;js.dataset.product=p; d.body.appendChild(js); })(window,document,'script','TU_TOKEN_AQUI','{{ product.id }}'); </script> <!-- /WAzion Product Q&A Widget -->
¡Importante! Reemplaza TU_TOKEN_AQUI con el token que aparece en tu Dashboard de WAzion → Plugins → Product Q&A.
Guarda los cambios
Haz clic en el botón Guardar en la esquina superior derecha del editor de código.
Verifica la instalación
- Abre tu tienda en una ventana de incógnito
- Ve a cualquier página de producto
- Deberías ver el widget de Product Q&A
- Haz una pregunta de prueba para verificar que funciona
Método alternativo: Crear un bloque de sección (Online Store 2.0)
Este método te permite añadir/quitar el widget desde el personalizador visual sin tocar código cada vez:
- En el editor de código, ve a la carpeta Snippets
- Haz clic en Añadir un nuevo snippet
- Nómbralo wazion-product-qa (se creará como wazion-product-qa.liquid)
- Pega el código del widget y guarda
- Ahora en main-product.liquid, donde quieras el widget, añade:
{% render 'wazion-product-qa' %}
Así puedes mover o quitar el widget fácilmente editando solo una línea.
Guía paso a paso: Instalación en WooCommerce Guía WooCommerce
Sigue estos pasos detallados para añadir el widget de Product Q&A a las páginas de producto de tu tienda WooCommerce.
Accede al editor de temas o usa un plugin de snippets
En tu panel de administración de WordPress:
- Ve a Apariencia → Editor de temas
- O usa un plugin como Code Snippets para añadir código sin modificar archivos del tema directamente
Consejo: Siempre usa un tema hijo (child theme) para modificaciones. Si actualizas el tema padre, perderás los cambios realizados directamente en él.
Localiza la plantilla de producto individual
Busca el archivo de plantilla de producto en tu tema:
Ubicación habitual
- • woocommerce/single-product.php
- • woocommerce/content-single-product.php
¿No lo encuentras? Si tu tema no tiene estos archivos, cópialos desde wp-content/plugins/woocommerce/templates/ a tu tema hijo manteniendo la misma estructura de carpetas.
Busca la ubicación ideal para el widget
Recomendamos colocar el widget después del resumen del producto:
Referencias comunes:
- • woocommerce_after_single_product_summary
- • woocommerce_after_single_product
- • Antes del cierre del contenedor del producto
Inserta el código del widget
Pega el siguiente código en la ubicación que elegiste:
<!-- WAzion Product Q&A --> <div id="wazion-product-qa"></div> <script> (function(w,d,s,t,p){ if(w.WazionProductQA)return; w.WazionProductQA={token:t,productId:p}; var js=d.createElement(s);js.async=true; js.src='https://www.wazion.com/plugins/product-qa/embed.js'; js.dataset.token=t;js.dataset.product=p; d.body.appendChild(js); })(window,document,'script','TU_TOKEN_AQUI','<?php echo get_the_ID(); ?>'); </script>
¡Importante! Reemplaza TU_TOKEN_AQUI con el token que aparece en tu Dashboard de WAzion → Plugins → Product Q&A. La función get_the_ID() obtiene automáticamente el ID del producto en WooCommerce.
Guarda los cambios
Guarda el archivo modificado. Si estás usando el editor de temas de WordPress, haz clic en Actualizar archivo. Si usas un plugin de snippets, activa el snippet.
Verifica la instalación
- Abre tu tienda en una ventana de incógnito
- Ve a cualquier página de producto
- Deberías ver el widget de Product Q&A
- Haz una pregunta de prueba para verificar que funciona
Método alternativo: Usar functions.php con hook de WooCommerce
Este método inserta el widget automáticamente usando el sistema de hooks de WooCommerce, sin editar plantillas:
// Añadir en functions.php del tema hijo add_action('woocommerce_after_single_product_summary', function() { $product_id = get_the_ID(); echo '<div id="wazion-product-qa"></div> <script> (function(w,d,s,t,p){ if(w.WazionProductQA)return; w.WazionProductQA={token:t,productId:p}; var js=d.createElement(s);js.async=true; js.src="https://www.wazion.com/plugins/product-qa/embed.js"; js.dataset.token=t;js.dataset.product=p; d.body.appendChild(js); })(window,document,"script","TU_TOKEN_AQUI","' . esc_attr($product_id) . '"); </script>'; }, 25);
El número 25 indica la prioridad. Ajústalo para cambiar la posición del widget respecto a otros elementos (menor = más arriba).
Guía paso a paso: Instalación en PrestaShop Guía PrestaShop
Sigue estos pasos detallados para añadir el widget de Product Q&A a las páginas de producto de tu tienda PrestaShop.
Accede al editor de temas o edita por FTP
En tu panel de administración de PrestaShop:
- Ve a Diseño → Editor de temas
- O accede a los archivos del tema directamente por FTP para mayor control
Consejo: Haz una copia de seguridad de la plantilla antes de modificarla. En FTP, copia el archivo antes de editarlo.
Localiza la plantilla de producto
Busca el archivo de plantilla de producto en tu tema:
Ubicación habitual
- • themes/TU_TEMA/templates/catalog/product.tpl
Busca la ubicación ideal para el widget
Recomendamos colocar el widget después de la descripción del producto:
Referencias comunes en Smarty:
- • {block name='product_description'}
- • {block name='product_footer'}
- • Al final del contenido del producto
Inserta el código del widget
Pega el siguiente código en la ubicación que elegiste:
<!-- WAzion Product Q&A --> <div id="wazion-product-qa"></div> <script> (function(w,d,s,t,p){ if(w.WazionProductQA)return; w.WazionProductQA={token:t,productId:p}; var js=d.createElement(s);js.async=true; js.src='https://www.wazion.com/plugins/product-qa/embed.js'; js.dataset.token=t;js.dataset.product=p; d.body.appendChild(js); })(window,document,'script','TU_TOKEN_AQUI','{$product.id}'); </script>
Nota: Usa {$product.id} para obtener el ID del producto. En algunos temas también puedes usar {$product.id_product} como alternativa.
¡Importante! Reemplaza TU_TOKEN_AQUI con el token que aparece en tu Dashboard de WAzion → Plugins → Product Q&A.
Guarda y limpia la caché
Después de guardar los cambios en la plantilla:
- Ve a Parámetros Avanzados → Rendimiento
- Haz clic en Limpiar caché
Importante: PrestaShop cachea las plantillas Smarty. Si no limpias la caché, no verás los cambios.
Verifica la instalación
- Abre tu tienda en una ventana de incógnito
- Ve a cualquier página de producto
- Deberías ver el widget de Product Q&A
- Haz una pregunta de prueba para verificar que funciona
Método alternativo: Usar un módulo de código personalizado
Si prefieres no editar la plantilla directamente, puedes usar un módulo de PrestaShop que permita insertar código HTML/JS en hooks específicos. Busca módulos como “Custom HTML/JS“ en el marketplace de PrestaShop y asígnalo al hook displayProductAdditionalInfo o displayFooterProduct.
Guía paso a paso: Instalación en VTEX Guía VTEX
Sigue estos pasos detallados para añadir el widget de Product Q&A a las páginas de producto de tu tienda VTEX.
Accede al CMS de VTEX
En tu Admin de VTEX:
VTEX IO (Store Framework)
Ve a Storefront → Store Theme. Edita el archivo store/blocks/product.jsonc en tu repositorio del tema.
Legacy CMS
Ve a Storefront → CMS → Layout. Localiza el template de producto y edita el placeholder de contenido.
Añade el script del widget (VTEX IO)
Para VTEX IO, la forma más fiable de insertar scripts es a través del Admin:
Opción recomendada: Scripts personalizados del Admin
- Ve a Storefront → CMS → Pages
- Selecciona la página de producto y accede a Configuración avanzada → Scripts personalizados
- Pega el código del widget del paso 4
Opción alternativa: Store Theme con bloque HTML
Si tu Store Theme tiene habilitado allowScripts: true en bloques HTML, puedes usar un bloque html#wazion-qa en product.jsonc. Ten en cuenta que VTEX IO no ejecuta scripts inline en bloques HTML por defecto.
Localiza el template de producto (Legacy CMS)
Si usas el CMS Legacy, localiza el placeholder de contenido del producto en el template y busca una ubicación adecuada después de la descripción.
Inserta el código del widget
Usa el siguiente código que lee el ID del producto desde un atributo data:
<!-- WAzion Product Q&A --> <div id="wazion-product-qa" data-product-id="VTEX_PRODUCT_ID_VARIABLE"></div> <script> (function(w,d,s,t){ if(w.WazionProductQA)return; var el = d.getElementById('wazion-product-qa'); var pid = el ? el.dataset.productId : ''; w.WazionProductQA={token:t,productId:pid}; var js=d.createElement(s);js.async=true; js.src='https://www.wazion.com/plugins/product-qa/embed.js'; js.dataset.token=t;js.dataset.product=pid; d.body.appendChild(js); })(window,document,'script','TU_TOKEN_AQUI'); </script>
Nota: Reemplaza VTEX_PRODUCT_ID_VARIABLE con la variable que corresponda a tu entorno. Para VTEX IO (Store Theme): usa {productContext.product.productId}. Para Legacy CMS: usa el control $product.Id de VTEX.
¡Importante! Reemplaza TU_TOKEN_AQUI con el token que aparece en tu Dashboard de WAzion → Plugins → Product Q&A.
Publica los cambios
VTEX IO
Publica tu tema con vtex publish desde la terminal.
Legacy CMS
Guarda los cambios directamente en el CMS. Se aplican inmediatamente.
Verifica la instalación
- Abre tu tienda en una ventana de incógnito
- Ve a cualquier página de producto
- Deberías ver el widget de Product Q&A
- Haz una pregunta de prueba para verificar que funciona
Detección de producto en VTEX
Si el widget no detecta correctamente el ID del producto, verifica que el atributo data-product-id del div contiene el ID numérico correcto del producto. Para VTEX IO usa {productContext.product.productId} en tu Store Theme. Para Legacy CMS usa el control $product.Id.
Solución de problemas
El widget no aparece en la página de producto
- → Verifica que el plugin está activado en Dashboard → Plugins → Product Q&A
- → Comprueba que tu dominio está en la lista de dominios autorizados
- → Verifica que tu tienda online está conectada a WAzion
- → Abre la consola del navegador (F12 → Console) y busca errores en rojo
- → Prueba en ventana de incógnito para descartar problemas de caché
Error “Token inválido“ o “Dominio no autorizado“
- → Copia el token directamente desde el Dashboard, sin espacios
- → Añade tu dominio exacto a los autorizados: mitienda.myshopify.com Y mitienda.com
- → Espera unos segundos después de guardar cambios en el Dashboard
El widget aparece pero dice “Error al cargar producto“
- → Verifica que tu tienda online está conectada en Dashboard → Integraciones
- → Asegúrate de no haber modificado la variable del ID de producto en el código
- → El producto debe estar publicado y visible en la tienda
El widget aparece en el lugar incorrecto
- → Mueve el código a otra ubicación en la plantilla de producto de tu plataforma
- → Busca referencias como “product__description“ para colocarlo debajo
- → Usa el estilo margin en el div para ajustar espaciado: style=“margin: 30px 0;“
No sé qué archivo editar en mi tema
Archivos comunes según el tema:
- Dawn, Craft, Sense: sections/main-product.liquid
- Debut: sections/product-template.liquid
- Brooklyn: templates/product.liquid
- Minimal: sections/product-template.liquid
Si tu tema no está en la lista, busca archivos que contengan “product“ en Sections o Templates.
Opciones de configuración
Dominios Autorizados
Lista de dominios donde el widget puede funcionar. Por seguridad, solo se permite el uso desde dominios autorizados.
- • mitienda.myshopify.com
- • mitienda.com (dominio personalizado)
- • * (cualquier dominio - solo para desarrollo)
Temas de Diseño
10 temas prediseñados para adaptar el widget a tu tienda:
Textos del Widget
Personaliza los textos que ve el visitante:
- • Título del widget (ej: “Preguntas sobre este producto“)
- • Placeholder del campo de texto
- • Texto del botón de preguntar
Los textos se traducen automáticamente al idioma del visitante.
Instrucciones para la IA (opcional)
Puedes añadir información adicional que la IA tendrá en cuenta al responder:
- • Políticas de envío y devolución
- • Promociones activas
- • Instrucciones especiales (ej: “No mencionar productos de la competencia“)
- • Información de contacto
Este campo es opcional. Sin instrucciones adicionales, la IA responderá usando solo la información del producto de tu tienda online.
Configuración de Idioma
Auto-detectar
Detecta el idioma del navegador del visitante automáticamente.
Idioma fijo
Siempre mostrar en un idioma específico.
Con selector
Auto-detecta pero permite al visitante cambiar manualmente el idioma.
Protección Anti-Abuso
Limita el número de preguntas por visitante para proteger tu cuenta:
- • Máximo de preguntas por período (ej: 20 preguntas)
- • Ventana de tiempo en minutos (ej: 60 minutos)
Estadísticas y Visor de Preguntas
Métricas de uso
- • Preguntas totales
- • Preguntas en los últimos 7 días
- • Preguntas de hoy
- • Visitantes únicos (24h)
Productos más consultados
Visualiza un ranking de los 5 productos con más preguntas. Útil para identificar qué productos generan más dudas.
Visor de Preguntas
Revisa todas las preguntas realizadas por los visitantes:
- • Filtro por período: Hoy, 7 días, 30 días, 90 días, 1 año, todas, o rango personalizado
- • Lista paginada: Navega por todas las preguntas (10 por página)
- • Detalle completo: Ver pregunta, respuesta de la IA, producto, idioma y URL
- • Estado FAQ: Cada pregunta muestra si ya esta publicada como FAQ
- • Publicar manualmente: Publica cualquier pregunta como FAQ con un clic
Nuevo: La columna “FAQ“ muestra el estado de cada pregunta: un tick verde si esta sincronizada con tu tienda, badge amarillo si esta pendiente de sincronizar, o un boton + para publicarla manualmente.
FAQ Pública en tu tienda Nuevo
Publica automáticamente las preguntas frecuentes de tus clientes como FAQs en los productos de tu tienda online. Mejora tu SEO con Schema.org FAQPage y reduce las preguntas repetidas.
¿Qué es la FAQ Pública?
Cuando un cliente hace una pregunta genérica sobre un producto (por ejemplo: “¿Es resistente al agua?“ o “¿Cuál es el tiempo de envío?“), la IA evalúa si esa pregunta y respuesta serían útiles para otros clientes.
Si la IA decide que es una buena FAQ, se publica automáticamente. En Shopify se sincroniza directamente al metafield del producto para mostrarla en tu tema. Para WooCommerce, PrestaShop y VTEX, las FAQs se generan automáticamente en el dashboard y quedan disponibles para su consulta.
Mejor SEO
Google muestra tus FAQs como rich snippets
Menos preguntas
Los clientes ven respuestas antes de preguntar
100% automático
Sin moderación manual necesaria
Cómo funciona
-
1
Evaluación IA
Cuando un cliente hace una pregunta, la IA evalúa si es genérica (útil para otros) y no contiene datos personales.
-
2
Traducción automática
Si el cliente pregunta en otro idioma, la FAQ se traduce automáticamente al idioma principal de tu tienda.
-
3
Anti-duplicados
Se verifica que no exista ya una FAQ similar (80% similitud) antes de publicar.
-
4
Publicación en tu tienda
La FAQ se publica en tu tienda. En Shopify se guarda en el metafield wazion.faqs del producto. En otras plataformas, las FAQs quedan disponibles en el dashboard para su consulta.
Cómo activar la FAQ Pública
- Ve a Dashboard → Plugins → Product Q&A
- Busca la sección “FAQ Pública“
- Activa el interruptor “Activar FAQ pública“
- Si aparece un aviso de permiso, haz clic en “Verificar permiso“
- Configura el máximo de FAQs por producto (1-20)
- Guarda los cambios
Sobre el permiso (Shopify): Para escribir FAQs en Shopify necesitas el permiso “write_products“. Si no lo tienes, ve a tu panel de Shopify → Apps → WAzion → Permisos para añadirlo.
Gestión de FAQs publicadas
Aunque las FAQs se publican automáticamente, tienes control total desde el Dashboard:
- • Ver FAQs: Lista de todas las FAQs publicadas, filtradas por producto o estado
- • Publicar manualmente: Desde “Últimas Preguntas“ puedes publicar cualquier pregunta como FAQ con un clic
- • Despublicar: Quita una FAQ de tu tienda pero la mantiene en tu historial
- • Republicar: Vuelve a publicar una FAQ previamente despublicada
- • Eliminar: Borra permanentemente una FAQ
Mostrar FAQs en tu tema Shopify Integración Shopify
Necesitas añadir dos códigos en tu archivo main-product.liquid:
1. Código visual (HTML)
Muestra las FAQs a tus clientes. Añádelo donde quieras que aparezcan:
<!-- WAzion Product FAQs -->
{% assign faqs_data = product.metafields.wazion.faqs.value %}
{% if faqs_data.faqs.size > 0 %}
<div class="product-faqs">
<h3 class="product-faqs__title">Preguntas Frecuentes</h3>
{% for faq in faqs_data.faqs %}
<details class="product-faqs__item">
<summary class="product-faqs__question">{{ faq.q }}</summary>
<div class="product-faqs__answer">{{ faq.a | newline_to_br }}</div>
</details>
{% endfor %}
</div>
{% endif %}
2. JSON-LD para SEO (Google Rich Snippets)
Invisible para usuarios, pero Google lo usa para mostrar FAQs en resultados de búsqueda. Añádelo al final del archivo:
<!-- WAzion FAQs JSON-LD for SEO -->
{% assign faqs_data = product.metafields.wazion.faqs.value %}
{% if faqs_data.faqs.size > 0 %}
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [
{% for faq in faqs_data.faqs %}
{
"@type": "Question",
"name": {{ faq.q | json }},
"acceptedAnswer": {
"@type": "Answer",
"text": {{ faq.a | json }}
}
}{% unless forloop.last %},{% endunless %}
{% endfor %}
]
}
</script>
{% endif %}
Código 1: Sin estilos para que herede de tu tema. Personaliza con CSS.
Código 2: Google Rich Snippets en resultados de búsqueda.
¿Qué preguntas NO se publican?
La IA filtra automáticamente las preguntas que no son aptas para FAQ pública:
- ✗ Preguntas con datos personales (nombres, emails, teléfonos)
- ✗ Consultas sobre pedidos específicos (números de pedido, tracking)
- ✗ Quejas o problemas individuales
- ✗ Preguntas muy específicas que no aplicarían a otros clientes
- ✗ Preguntas duplicadas (similares a FAQs ya publicadas)
Product Q&A vs Chat Web
| Característica | Product Q&A | Chat Web |
|---|---|---|
| Propósito | Preguntas sobre un producto específico | Asistente general para todo el sitio |
| Contexto de la IA | Información del producto de tu tienda online | Tu prompt personalizado |
| Ubicación | Página de producto | Cualquier página (flotante o embebido) |
| Requiere tienda online | Sí | No |
| Configuración de prompt | Opcional (instrucciones adicionales) | Recomendado |