🚀 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 su tienda de Shopify. Puede usar la página de Widgets en el sitio (Onsite widgets) 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, puede insertar marcadores de posición (placeholders) de widgets directamente en el código de su tema. Este enfoque le permite posicionar los widgets exactamente donde los necesita, 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 le ayudará a integrarlos sin problemas en su tienda.

Uso de un marcador de posición con atributos de datos (data attributes)

Para insertar un widget de reseñas, cree 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 debe 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. Consulte 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 su tienda de Shopify

Puede agregar marcadores de posición a su tienda de Shopify de dos maneras:

Personalizador de temas: Vaya a Tienda online → Temas → haga clic en Personalizar, seleccione la página relevante y agregue una sección Liquid personalizado desde la pestaña Secciones. Inserte el código del marcador de posición en el área de texto.

Editar código: Vaya a Tienda online → Temas → ⋮ (menú de tres puntos) → Editar código, seleccione el archivo de plantilla liquid relevante 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 promedio con estrellas

El widget de Calificación promedio con estrellas muestra la calificación promedio del producto mediante un sistema de 5 estrellas y el número de reseñas. Cuando los clientes pasan el cursor sobre las estrellas, pueden ver un desglose de las calificaciones por número de estrellas. El enlace Ver todas las reseñas conduce a la lista completa de reseñas de productos.

Para mostrar el widget de calificación promedio con estrellas, use el siguiente marcador de posición:

Código:

<div 
    class="gw-rv-average-placeholder" 
    data-gw-product-id="1234567890" 
    style="display: block" 
></div>

Atributo: data-gw-product-id. Este es un 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. A diferencia del widget de Calificación con estrellas, no incluye un modo de desplazamiento del cursor con un desglose de las calificaciones.

Código:

<div 
    class="gw-rv-listing-average-placeholder" 
    data-gw-product-id="1234567890" 
    style="display: block" 
></div>

Atributo: El atributo data-gw-product-id especifica el identificador único para el producto cuyas reseñas promedio se mostrarán.

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>

Atributos:
- data-gw-product-id: especifica el identificador único para el producto cuyas reseñas se mostrarán.
- data-gw-lowest-rating (opcional): define la calificación mínima (1-5) para que las reseñas se incluyan en el deslizador. Por defecto es 1 .
- data-gw-only-pinned-reviews (opcional): si se establece en true, solo se mostrarán las reseñas destacadas. Por defecto es false.

Widget de lista de Preguntas y Respuestas

El widget de Lista de Preguntas y Respuestas muestra una sección de 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>

Atributos:
- data-gw-product-id: especifica el identificador único para el producto cuyas preguntas y respuestas se mostrarán.
- data-gw-add-question-button-enabled (opcional): controla la visibilidad del botón "Hacer una pregunta".
  - true: El botón se muestra.
  - false (por defecto): El botón está oculto.

Widget de encabezado de lista de reseñas

El widget de Encabezado de lista de reseñas muestra un resumen de 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="true" 
    data-gw-add-question-button-enabled="false" 
    style="display: block;" 
></div>

Atributos:
- data-gw-product-id: especifica el identificador único para el producto cuyas reseñas se mostrarán.
- data-gw-add-review-button-enabled (opcional): alterna la visibilidad del botón "Escribir una reseña". Por defecto: false.
- data-gw-add-question-button-enabled (opcional): alterna la visibilidad del botón "Hacer una pregunta". Por defecto: false.

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" 
    style="display: block" 
></div>

Atributos:
- data-gw-product-id: especifica el identificador único para el producto cuyas reseñas se mostrarán.
- data-gw-add-review-button-enabled (opcional): alterna la visibilidad del botón "Escribir una reseña". Por defecto: false.
- data-gw-reviews-per-page (opcional): Especifica el número de reseñas que se muestran por página. Por defecto: 5. Mínimo: 1. Máximo: 30.

Widget de página de reseñas

El ReviewsPageWidget muestra reseñas de 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: data-gw-reviews-per-page (opcional). Este atributo especifica el número de reseñas que se muestran por página. Por defecto: 10. Mínimo: 1. Máximo: 30.

Widget de reseñas en página de producto

El widget de Reseñas en página de producto muestra una calificación con 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, estas se muestran en un deslizador.

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>

Atributos:
- data-gw-product-id: especifica el identificador único para el producto cuyas reseñas se mostrarán.
- data-gw-reviews-per-page (opcional): especifica el número de reseñas que se muestran por página. Por defecto: 5. Mínimo: 1. Máximo: 30.
- data-gw-min-images-for-slider-visibility (opcional): define el número mínimo de imágenes requeridas para que el deslizador sea visible. Por defecto: 6.

Widget de deslizador de reseñas

El widget de Deslizador de reseñas (Reviews slider) presenta las reseñas de los clientes en un formato de deslizador horizontal, lo que permite 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="true"
    data-gw-reviews-sequence="default" 
    style="display: block" 
></div>

Atributos:
- data-gw-lowest-rating: (opcional): Define la calificación mínima (1-5) requerida para que las reseñas se incluyan en el deslizador. Por defecto: 4.
- data-gw-images-type: (opcional): Especifica el origen de las imágenes que se muestran en las reseñas. Por defecto: product_images.
  - product_images – Muestra imágenes relacionadas con el producto dentro de las reseñas.
  - reviews_images – Muestra imágenes cargadas por los usuarios desde sus reseñas.
- data-gw-only-pinned-reviews: (opcional): Si se establece en true, solo se muestran las reseñas destacadas se muestran. Por defecto: false.
- data-gw-reviews-sequence: (opcional): Controla el orden en que aparecen las reseñas en el deslizador. Por defecto: default.
  - default - Las reseñas se muestran en el orden de publicación.
  - shuffle - Aleatoriza el orden de las reseñas mostradas.

Widget de insignia de confianza de reseñas

El widget de Insignia de confianza de reseñas 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 tiene alguna pregunta o necesita ayuda, no dude en ponerse en contacto con nuestro equipo de soporte en [email protected] o a través del icono de chat en la esquina inferior derecha. ¡Estamos aquí para ayudarle! 🤗

Cómo agregar los widgets de la aplicación Growave Reviews usando marcadores de posición