🚀 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 temasde 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, seleccione el archivo de plantilla de Liquid correspondiente y agregue 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 de estrellas de reseñas
Este widget muestra la calificación promedio del producto mediante un sistema de 5 estrellas y la cantidad de reseñas. Al pasar el cursor sobre las estrellas se revela 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 |
| Obligatorio | Especifica el identificador único del producto cuyas reseñas promedio se mostrarán. |
Calificación promedio de productos de lista
Este widget muestra la calificación promedio de un producto utilizando un sistema de 5 estrellas, junto con la cantidad 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 |
| Obligatorio | Especifica el identificador único del producto. |
| Opcional | Si se establece en "true", habilita una información sobre herramientas con detalles de la calificación 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 control deslizante de reseñas de productos
Este widget muestra un mini control deslizante con reseñas de un producto específico. Se puede personalizar para mostrar solo reseñas destacadas o reseñas por encima de una 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 |
| Obligatorio | Especifica el identificador único del producto. |
| Opcional | Define la calificación mínima (1-5) para que las reseñas se incluyan en el control deslizante. El valor predeterminado es 1. |
| Opcional | Si se establece en true, solo se mostrarán las reseñas fijadas. El valor predeterminado es false. |
Widget de lista de preguntas y respuestas
Este widget muestra una sección de Q&A para un producto específico. Los clientes pueden explorar preguntas hechas anteriormente, enviar nuevas consultas y ver las respuestas del propietario de la tienda. Este widget ayuda a optimizar la atención al cliente al abordar 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 |
| Obligatorio | Especifica el identificador único del producto. |
| Opcional | Alterna la visibilidad del botón "Hacer una pregunta".
|
Widget de resumen de reseñas con IA
Este widget muestra resúmenes generados por IA de las reseñas de productos. Brinda a los clientes una descripción general rápida de lo que piensan los revisores sobre un producto sin 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 |
| Obligatorio | Especifica el identificador único del producto. |
Widget de encabezado de lista de reseñas
El widget de Encabezado de lista de reseñas muestra el resumen de calificación agregada de un producto y el desglose por estrellas. Sirve como 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 |
| Obligatorio | Especifica el identificador único del producto. |
| Opcional | Alterna la visibilidad del botón "Escribir una reseña". El valor predeterminado es |
| Opcional | Alterna 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 |
| Obligatorio | Especifica el identificador único del producto. |
| Opcional | Alterna la visibilidad del botón "Escribir una reseña". El valor predeterminado es |
| Opcional | Especifica la cantidad de reseñas que se mostrarán 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 la página de reseñas
Este widget muestra las reseñas de los clientes y admite tanto reseñas de productos como de tiendas. 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 la cantidad de reseñas que se mostrarán por página. El valor predeterminado es |
Widget de la página del producto de reseñas
Este widget muestra una calificación de estrellas agregada 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, se pueden mostrar en un control deslizante.
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 |
| Obligatorio | Especifica el identificador único del producto. |
| Opcional | Especifica la cantidad de reseñas que se mostrarán por página. El valor predeterminado es |
| Opcional | Especifica la cantidad mínima de imágenes requeridas para que el control deslizante sea visible. El valor predeterminado es |
Widget de control deslizante de reseñas
Este presenta las reseñas de los clientes en un formato de control deslizante horizontal, lo que permite a los usuarios navegar por múltiples reseñas. Cada reseña incluye una calificación, un comentario y los detalles del revisor, 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 control deslizante. El valor predeterminado es |
| Opcional | Especifica la fuente de las imágenes mostradas en las reseñas. Valores:
|
| Opcional | Si se establece en true, solo las reseñas destacadas se muestran. El valor predeterminado es |
| Opcional | Controla el orden en que aparecen las reseñas en el control deslizante. Valores:
|
| Opcional | Configuración receptiva de diapositivas por vista usando notación de puntos de interrupción. Admite operadores de comparación: >, >=, <, <=. Ejemplo: |
Widget de control deslizante de testimonios de reseñas
Este widget muestra reseñas de la tienda en un control deslizante horizontal utilizando tarjetas de testimonios solo de texto. Cada tarjeta incluye la calificación de estrellas, un título de reseña opcional, el texto de la reseña y el nombre del revisor. Dado que las reseñas de la tienda no están vinculadas a artículos específicos, no se incluyen imágenes del producto. Este widget es ideal para su página de inicio o páginas de destino para resaltar los comentarios generales de los clientes sobre su tienda.
📘Nota: Este widget muestra solo reseñas de la tienda. Para mostrar reseñas de productos junto con imágenes del producto, use el Widget de control deslizante de reseñas en su lugar.
Código:
<div
class="gw-rv-testimonials-slider-widget-placeholder"
data-gw-lowest-rating="4"
data-gw-only-pinned-reviews="false"
data-gw-sorting="mostRelevant"
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 control deslizante. Predeterminado: |
| Opcional | Si se establece en true, solo se muestran las reseñas destacadas. Predeterminado: |
| Opcional | Controla el orden en que aparecen las reseñas de la tienda en el control deslizante. El valor predeterminado es Valores: |
| Opcional | Configuración receptiva de diapositivas por vista usando notación de puntos de interrupción. Admite operadores de comparación: >, >=, <, <=. Ejemplo: |
Widget de insignia de confianza de reseñas
Este muestra una insignia de confianza compacta que muestra la calificación promedio agregada del producto en función de las reseñas de los clientes. Esta insignia ayuda a generar confianza en el cliente al presentar comentarios de usuarios reales 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 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 tiene alguna pregunta o necesita ayuda, comuníquese con nuestro equipo de soporte en [email protected] o a través del chat en la esquina inferior derecha de su panel de administración de Growave. ¡Estamos aquí para ayudarle! 🤗