🚀 Disponibilidad de la función
Estos widgets de la aplicación de Reseñas están disponibles para los usuarios de Growave 2.0 (aquellos que se unieron a nosotros después del 22 de enero de 2024).
Growave ofrece múltiples formas de agregar widgets de reseñas a tu tienda de Shopify. Puedes usar la página de Widgets en el sitio en el panel de administración de Growave para colocar automáticamente widgets en las páginas relevantes o agregarlos manualmente a través del personalizador de temas de Shopify.
Para tener un mayor control sobre la ubicación, puedes insertar marcadores de posición de widgets directamente en el código de tu tema. Este enfoque te permite posicionar los widgets exactamente donde los necesitas, incluyendo secciones o páginas personalizadas que no están cubiertas por los ajustes predeterminados. Cada widget requiere un nombre de clase específico y puede admitir atributos adicionales para su personalización.
Esta guía proporciona los códigos de marcador de posición y los atributos necesarios para cada widget de reseñas, lo que te ayudará a integrarlos sin problemas en tu tienda.
Uso de un marcador de posición con atributos de datos
Para insertar un widget de reseñas, crea un elemento <div> vacío con el nombre de clase correspondiente. Shopify oculta los bloques <div> vacíos en el modo incrustado, por lo que debes agregar style="display:block" para garantizar la visibilidad.
Algunos widgets de reseñas requieren atributos de datos para funcionar correctamente. Estos atributos transmiten información esencial, como los ID de los productos. Consulta los detalles de cada widget a continuación para conocer los atributos requeridos.
Ejemplo:
<div
class="widget-placeholder-class-name"
style="display:block"
data-gw-attribute1="value1"
data-gw-attribute2="value2"
></div>
Agregar el widget a tu tienda de Shopify
Puedes agregar marcadores de posición a tu tienda de Shopify de dos maneras:
Personalizador de temas: Ve a Tienda online → Temas → haz clic en Personalizar, selecciona la página relevante y agrega una sección Liquid personalizado desde la pestaña Secciones. Inserta el código del marcador de posición en el área de texto.
Editar código: Ve a Tienda online → Temas → ⋮ (menú de tres puntos) → Editar código, selecciona el archivo de plantilla liquid relevante y agrega el código del marcador de posición directamente en el HTML.
Widgets de la aplicación de Reseñas
Los siguientes widgets están disponibles para mostrar reseñas de productos:
Widget de calificación promedio con estrellas
Este widget muestra la calificación promedio del producto mediante un sistema de 5 estrellas y el número de reseñas. Al pasar el cursor sobre las estrellas, se muestra un desglose detallado de las calificaciones. Los usuarios pueden hacer clic en "Ver todas las reseñas" para obtener comentarios más detallados.
Vista predeterminada:
Estado al pasar el cursor:
Código:
<div
class="gw-rv-star-rating-widget-placeholder"
data-gw-product-id="1234567890"
style="display: block"
></div>
Atributo | Requisito | Descripción |
| Requerido | Especifica el identificador único para el producto cuya calificación promedio se mostrará. |
Calificación promedio del producto en listados
Este widget muestra la calificación promedio de un producto mediante un sistema de 5 estrellas, junto con el número total de reseñas.
Código:
<div
class="gw-rv-listing-average-placeholder"
data-gw-product-id="1234567890"
data-gw-show-reviews-tooltip="false"
data-gw-hide-if-no-reviews="false"
style="display: block"
></div>
Atributo | Requisito | Descripción |
| Requerido | Especifica el identificador único para el producto. |
| Opcional | Si se establece en "true", habilita un tooltip con información detallada de las calificaciones al pasar el cursor. El valor predeterminado es false. |
| Opcional | Si se establece en "true", el widget se ocultará cuando no haya reseñas. El valor predeterminado es false. |
Widget de mini deslizador de reseñas de productos
Este widget muestra un mini deslizador con reseñas para un producto específico. Se puede personalizar para mostrar solo reseñas destacadas o reseñas por encima de cierta calificación.
Código:
<div
class="gw-rv-mini-slider-widget-placeholder"
data-gw-product-id="1234567890"
data-gw-lowest-rating="4"
data-gw-only-pinned-reviews="true"
style="display: block"
></div>
Atributo | Requisito | Descripción |
| Requerido | Especifica el identificador único para el producto. |
| Opcional | Define la calificación mínima (1-5) para que las reseñas se incluyan en el deslizador. El valor predeterminado es 1. |
| Opcional | Si se establece en true, solo se mostrarán las reseñas destacadas. El valor predeterminado es false. |
Widget de lista de Preguntas y Respuestas
Este widget muestra una sección de preguntas y respuestas (Q&A) para un producto específico. Los clientes pueden explorar las preguntas realizadas anteriormente, enviar nuevas consultas y ver las respuestas del propietario de la tienda. Este widget ayuda a agilizar la atención al cliente al abordar las preguntas comunes directamente en la página del producto.
Código:
<div
class="gw-rv-questions-list-widget-placeholder"
data-gw-product-id="1234567890"
data-gw-add-question-button-enabled="false"
style="display: block"
></div>
Atributo | Requisito | Descripción |
| Requerido | Especifica el identificador único para el producto. |
| Opcional | Controla la visibilidad del botón "Hacer una pregunta".
|
Widget de resumen de IA de reseñas
Este widget muestra resúmenes generados por IA de las reseñas de productos. Proporciona a los clientes una descripción general rápida de lo que opinan los usuarios sobre un producto sin necesidad de leer todas las reseñas individuales.
Código:
<div
class="gw-rv-ai-summary-widget-placeholder"
data-gw-product-id="1234567890"
style="display: block"
></div>
Atributo | Requisito | Descripción |
| Requerido | Especifica el identificador único para el producto. |
Widget de encabezado de lista de reseñas
El widget de Encabezado de lista de reseñas muestra el resumen de la calificación agregada de un producto y brinda opciones para que los usuarios envíen reseñas o hagan preguntas. Sirve como la sección de encabezado para las listas de reseñas, lo que fomenta la interacción del cliente.
Código:
<div
class="gw-rv-reviews-list-header-widget-placeholder"
data-gw-product-id="1234567890"
data-gw-add-review-button-enabled="false"
data-gw-add-question-button-enabled="false"
style="display: block;"
></div>
Atributo | Requisito | Descripción |
| Requerido | Especifica el identificador único para el producto. |
| Opcional | Controla la visibilidad del botón "Escribir una reseña". El valor predeterminado es |
| Opcional | Controla la visibilidad del botón "Hacer una pregunta". El valor predeterminado es |
Widget de lista de reseñas
El widget de Lista de reseñas muestra una lista desplazable y filtrable de reseñas de clientes con comentarios detallados. Admite opciones dinámicas de filtrado y clasificación para ayudar a los usuarios a navegar y encontrar reseñas relevantes.
Código:
<div
class="gw-rv-reviews-list-widget-placeholder"
data-gw-product-id="1234567890"
data-gw-add-review-button-enabled="false"
data-gw-reviews-per-page="15"
data-gw-reviews-filters="onlyWithPhotos,onlyProductReviews"
style="display: block"
></div>
Atributo | Requisito | Descripción |
| Requerido | Especifica el identificador único para el producto. |
| Opcional | Controla la visibilidad del botón "Escribir una reseña". El valor predeterminado es |
| Opcional | Especifica el número de reseñas a mostrar por página. El valor predeterminado es |
| Opcional | Aplica uno o más filtros predefinidos. Se pueden combinar varios valores usando una coma. Valores: |
Widget de página de reseñas
Este widget muestra las reseñas de los clientes, admitiendo tanto reseñas de productos como de la tienda. Permite a los usuarios clasificar las reseñas por relevancia, buscar dentro de las reseñas y enviar nuevas reseñas directamente en la página.
Código:
<div
class="gw-rv-reviews-page-widget-placeholder"
data-gw-reviews-per-page="15"
style="display: block"
></div>
Atributo | Requisito | Descripción |
| Opcional | Especifica el número de reseñas a mostrar por página. El valor predeterminado es |
Widget de reseñas en página de producto
Este widget muestra una calificación agregada con estrellas y una lista de reseñas de clientes para un producto específico. Los usuarios pueden escribir y enviar reseñas, ordenarlas por relevancia e interactuar con reseñas individuales dándoles "me gusta". Si una reseña contiene imágenes, estas se pueden mostrar en un carrusel.
Código:
<div
class="gw-rv-main-widget-placeholder"
data-gw-product-id="1234567890"
data-gw-reviews-per-page="15"
data-gw-min-images-for-slider-visibility="3"
style="display: block"
></div>
Atributo | Requisito | Descripción |
| Requerido | Especifica el identificador único para el producto. |
| Opcional | Especifica el número de reseñas a mostrar por página. El valor predeterminado es |
| Opcional | Especifica el número mínimo de imágenes requeridas para que el carrusel sea visible. El valor predeterminado es |
Carrusel de reseñas
Este widget presenta las reseñas de los clientes en un formato de carrusel horizontal, permitiendo a los usuarios navegar por múltiples reseñas. Cada reseña incluye una calificación, comentario y detalles del autor, lo que lo hace ideal para destacar comentarios positivos.
Código:
<div
class="gw-rv-reviews-slider-widget-placeholder"
data-gw-lowest-rating="4"
data-gw-images-type="product_images"
data-gw-only-pinned-reviews="false"
data-gw-reviews-sequence="default"
style="display: block"
></div>
Atributo | Requisito | Descripción |
| Opcional | Define la calificación mínima (1-5) requerida para que las reseñas se incluyan en el carrusel. El valor predeterminado es |
| Opcional | Especifica el origen de las imágenes que se muestran en las reseñas. Valores:
|
| Opcional | Si se establece en true, solo se muestran las reseñas destacadas. El valor predeterminado es |
| Opcional | Controla el orden en que aparecen las reseñas en el carrusel. Valores:
|
| Opcional | Configuración adaptable de diapositivas por vista utilizando la notación de breakpoints. Admite operadores de comparación: >, >=, <, <=. Ejemplo: |
Widget de insignia de confianza de reseñas
Este widget muestra una insignia de confianza compacta que presenta la calificación promedio agregada del producto basada en las reseñas de los clientes. Esta insignia ayuda a generar confianza en los clientes al presentar comentarios reales de los usuarios en un formato visualmente atractivo. Por lo general, incluye la calificación promedio, el número total de reseñas y una representación de la calificación basada en estrellas.
Código:
<div
class="gw-rv-trust-badge-widget-placeholder"
style="display: block"
></div>
Este widget no requiere atributos adicionales.
Si tienes alguna pregunta o necesitas ayuda, por favor ponte en contacto con nuestro equipo de soporte en [email protected] o a través del chat en la esquina inferior derecha de tu panel de administración de Growave. ¡Estamos aquí para ayudarte! 🤗