Cómo personalizar widgets de reseñas
Aprende a personalizar la apariencia de los widgets de reseñas (por ejemplo, los bloques de tu tienda que muestran y aceptan reseñas de productos).
Widgets de reseñas disponibles
Klaviyo Reviews ofrece varios widget que puedes agregar a tu tienda:
- Widget de calificación con estrellas
Muestra tu calificación actual con estrellas para un producto en particular, y con mayor frecuencia se agrega debajo del nombre del producto.
- Widget de resumen de reseñas
Muestra un gráfico que desglosa todas las calificaciones que recibió un producto, las imágenes de usuarios enviadas con reseñas y los comentarios de clientes más comunes. Por lo general, se agrega cerca de la parte inferior de una página de producto.
- Widget de lista de reseñas
Muestra una lista de todas las reseñas publicadas y las preguntas de clientes, junto con una barra de búsqueda, filtros y los botones Escribir una reseña y Hacer una pregunta. La mayoría de las veces, se agrega inmediatamente debajo del widget de resumen de reseñas.
- Widget de reseñas de productos
Una combinación de los widgets de resumen de reseñas y lista de reseñas de arriba. Si agregas el widget de reseñas de productos al sitio, no necesitas agregar los widgets de lista de reseñas y resumen de reseñas por separado. - Widget de carrusel de reseñas destacadas
Muestra reseñas seleccionadas de cualquiera de tus productos. Esto puede destacarse en tu página de inicio, en una página de reseñas independiente o en cualquier otro lugar de tu sitio. Puedes seleccionar las reseñas que se muestran en este widget. Si están disponibles, las imágenes enviadas por clientes acompañan cada reseña; si no se envió ninguna imagen junto con la reseña, se usan las imágenes de producto.
- El widget de SEO/todas las reseñas muestra todas tus reseñas de todos los productos en una sola página. Usa este widget para mejorar tu SEO y ofrecer un solo lugar para que los clientes potenciales vean lo que les encanta a tus clientes actuales. Este widget se agrega con mayor frecuencia a una página independiente de Reseñas en tu sitio.
Estos widgets son totalmente personalizables, lo que significa que puedes elegir las fuentes y los colores de tu marca, así como seleccionar manualmente las reseñas que quieres destacar en el carrusel de reseñas destacadas.
Selecciona un idioma para los widgets de reseñas y las páginas de envío
De forma predeterminada, todo el contenido de Klaviyo Reviews está en inglés. Para seleccionar un idioma diferente:
- Ve a la pestaña Reseñas en Klaviyo.
- Haz clic en Configuración de reseñas.
- Selecciona General.
- En el menú Seleccionar idioma, elige tu idioma.
Actualizar el idioma de Klaviyo Reviews se aplica a:
- Página de envío de reseñas
- Widgets del sitio web
- Widget de calificación con estrellas
- Widget de resumen de reseñas
- Widget de lista de reseñas
- Widget de reseñas de productos
- Widget de carrusel de reseña destacada
No puedes actualizar la configuración de idioma para un solo widget; todos los widgets deben usar el mismo idioma. Todos los widget y la página de envío se actualizan de inmediato, incluidos los que ya están activos en tu sitio.
Actualizar el idioma para Klaviyo Reviews no se aplica a ninguna otra función de Klaviyo (p. ej., preguntas personalizadas, flujo, formulario de registro, páginas de preferencias, el contenido de reseñas enviadas por clientes, etc.). Estas deben traducirse y editarse manualmente.
Oculta los widget de reseñas hasta que un producto haya recibido reseñas
Estas instrucciones se aplican al widget de calificación por estrellas y al widget de lista de reseñas.
De forma predeterminada, un producto sin reseñas mostrará 0/5 estrellas y un mensaje que indica que aún no se han enviado reseñas. Si prefieres ocultar el widget hasta que recibas reseñas, sigue estos pasos:
- Abre la pestaña Reseñas en Klaviyo.
- Selecciona Configuración de reseñas.
- Haz clic en Widgets del sitio web.
- Selecciona Reseñas de productos o Calificación con estrellas.
- Abre el menú Estado vacío.
- Desactiva la configuración Mostrar con cero estrellas.
Cambiar la apariencia del widget
Sigue estos pasos para ajustar el estilo (por ejemplo, fuentes, colores y más) de cualquier widget de reseñas.
- Abre la pestaña Reseñas en Klaviyo.
- Selecciona Configuración de reseñas.
- Haz clic en Widgets del sitio web.
- Elige el widget que quieras editar.
- Haz clic en Diseño y estilo.
- Ajusta la apariencia del widget como quieras, incluidas las fuentes, los colores y el espaciado.
Cambiar una configuración en un widget de reseñas (por ejemplo, el color del botón) no afecta esa configuración en otros widget, con la excepción del widget SEO/todas las reseñas. Este widget hereda todas las configuraciones del widget de reseñas de productos. Para personalizar la apariencia del widget SEO/todas las reseñas, pero no la del widget de reseñas de productos, debes usar CSS personalizado.
Configuración de estilo de reseña disponible
Abre cada menú desplegable para obtener más información sobre las opciones de estilo disponibles para esa categoría.
Widget de reseñas de productos
En la sección Diseño y estilo de la configuración de estilo de reseñas de productos, puedes ajustar las siguientes configuraciones:
- Margen
Ajusta el espacio en la parte superior, inferior, izquierda o derecha del widget. - Color de fondo principal
Activa esta configuración para agregar un color de fondo a toda el área del widget. - Color de fondo secundario
Edita el color de ciertos elementos del widget, como las barras del histograma. - Color de acento
Edita el color que se usa para varios acentos, incluida la selección en una pregunta de rango y las insignias de revisor verificado. - Radio de esquina
Aplica esquinas redondeadas a toda el área del widget de reseñas de productos. Ten en cuenta que esto solo se ve si agregas un color de fondo principal. - Líneas de división
Agrega líneas opcionales entre cada reseña. - Fuente principal
Elige Heredar del sitio para usar la fuente existente de tu sitio o selecciona una fuente. La configuración de Fuente principal se aplica a todas las fuentes del widget, excepto:- La etiqueta #/5 en la sección Reseñas de clientes.
- La marca de tiempo en cada reseña.
- El texto de la etiqueta en el histograma de estrellas.
- El texto del marcador de posición en el campo de búsqueda.
- Fuente secundaria
Elige Heredar del sitio para usar la fuente existente del sitio o selecciona una fuente. La configuración de Fuente secundaria se aplica al histograma de estrellas, al campo de búsqueda, a la marca de tiempo de cada reseña y a la etiqueta #/5 en la sección Reseñas de clientes. - Tamaño, grosor y color de fuente
Ajusta el tamaño, el grosor y el color de las fuentes principal y secundaria, respectivamente. - Configuración de botones
- Color
Color del botón. - Radio de esquina
La redondez de las esquinas de los botones. Configúralo en 0 para no redondear. - Borde
Un borde de color alrededor del botón. - Especifica el color al pasar el cursor
Si los botones deben cambiar de color al pasar el cursor, activa esta configuración. - Relleno
Relleno dentro de cada botón, alrededor del texto del botón. Agregar relleno hará que el botón se vea más grande. - Fuente, tamaño de fuente, grosor de fuente, color de fuente
La fuente que se usa para los botones del widget.
- Color
- Configuración de calificación
- Color de relleno
El color de las estrellas seleccionadas (p. ej., si un producto tiene una calificación de 4/5 estrellas, las primeras 4 estrellas usan este color). - Color vacío
El color de las estrellas no seleccionadas (por ejemplo, si un producto tiene una calificación de 4/5 estrellas, la 5.ª estrella usa este color). - Borde
Un borde de color opcional que rodea todas las estrellas. - Espaciado
El espacio entre cada estrella. - Forma
Elige estilos alternativos de calificación, como estrellas puntiagudas, corazones redondeados y más. - Tamaño
- Resumen
El tamaño de las estrellas dentro del resumen de reseñas. - Reseña
El tamaño de las estrellas dentro de cada reseña de cliente.
- Resumen
- Color de relleno
- Configuración de filtros
La configuración deFiltros se aplica al campo de búsqueda y a los filtros de revisión.- Color de fondo
El color de fondo de los botones de filtro y la barra de búsqueda. - Ancho y color del trazo con actividad
El ancho y el color del borde que indica una opción de filtro con actividad (es decir, seleccionada). (Mínimo 1.) - Radio de esquina
El redondeo de las esquinas en el campo de búsqueda. Para no redondear, selecciona 0 px. - Ícono de búsqueda
Activa o desactiva el ícono de búsqueda de la lupa.
- Color de fondo
- Configuración de imágenes
- Radio de las esquinas de las imágenes de resumen
Redondeo en la selección de imágenes de resumen en el resumen de revisión. - Configuración del radio de las esquinas de las imágenes de reseñas
Redondeo en cada imagen dentro de reseñas individuales. - Revisar el tamaño de las imágenes
El tamaño de las imágenes incluidas con reseñas individuales.
- Radio de las esquinas de las imágenes de resumen
Carrusel de reseñas destacadas
En la sección Diseño de la configuración de estilo del carrusel de reseñas destacadas, puedes ajustar las siguientes opciones:
- Encabezado de sección
Agrega una etiqueta, Reseñas de clientes, a este widget. - Tipo de carrusel
Elige si el carrusel debe mostrar imágenes o solo texto. - Máximo de reseñas por página
Elige cuántas reseñas destacadas se mostrarán por página. - Límite de texto
Elige cuántas líneas de texto incluir en cada vista previa de reseña. - Margen
Ajusta el espacio en la parte superior, inferior, izquierda o derecha del widget. - Alineación del texto
Si el texto debe alinearse a la izquierda, a la derecha o al centro. - Elementos de la tarjeta
Activa o desactiva la opción para mostrar la fecha, el autor y la insignia de verificación de una reseña.
En la sección Estilo de la configuración de estilo del carrusel de reseñas destacadas, puedes ajustar la siguiente configuración:
- Configuración de fuente del encabezado de sección
Fuente, color de fuente y tamaño de fuente para el encabezado de sección. Ten en cuenta que Encabezado de sección debe estar habilitado en Diseño para que esta configuración se aplique a tu widget. - Altura de la imagen
Edita el tamaño de la imagen incluida con la vista previa de la reseña. - Radio de esquina
Modifica el redondeo de las esquinas en cada mosaico de reseña destacada. - Color de la tarjeta
Añade un color de fondo a cada mosaico de reseña. - Sombra
Agrega o quita una sombra de las tarjetas. - Borde
Agrega o quita un borde de las tarjetas. - Configuración de estilo de la calificación
- Color de relleno
El color de las estrellas seleccionadas (p. ej., si un producto tiene una calificación de 4/5 estrellas, las primeras 4 estrellas usan este color). - Color vacío
El color de las estrellas no seleccionadas (por ejemplo, si un producto tiene una calificación de 4/5 estrellas, la 5.ª estrella usa este color). - Borde
Un borde de color opcional que rodea todas las estrellas. - Espaciado
El espacio entre cada estrella. - Tamaño
El tamaño de las estrellas dentro de cada reseña de cliente. - Forma
Elige estilos alternativos de calificación, como estrellas puntiagudas, corazones redondeados y más.
- Color de relleno
- Configuración de la fuente del encabezado de reseña
Elige Heredar del sitio para usar la fuente existente del sitio, o selecciona una fuente y el tamaño, el grosor y el color de la fuente. - Revisar la configuración de fuente del cuerpo de la reseña
Elige Heredar del sitio para usar la fuente existente del sitio, o selecciona una fuente, así como el tamaño de fuente, el grosor y el color. - Configuración de la fuente de las etiquetas de fecha y nombre
Elige Heredar del sitio para usar la fuente de tu sitio existente, o selecciona una fuente y el tamaño, grosor y color de la fuente.
Una calificación con estrellas
- Margen
Ajusta el espacio en la parte superior, inferior, izquierda o derecha del widget. - Configuración de estilo de la calificación
- Color de relleno
El color de las estrellas seleccionadas (p. ej., si un producto tiene una calificación de 4/5 estrellas, las primeras 4 estrellas usan este color). - Color vacío
El color de las estrellas sin rellenar (es decir, no seleccionadas) (p. ej., si un producto tiene una calificación de 4/5 estrellas, la 5.ª estrella usa este color). - Borde
Un borde de color opcional que rodea todas las estrellas. - Espaciado
El espacio entre cada estrella. - Tamaño
El tamaño de las estrellas dentro de cada reseña de cliente. - Forma
Elige estilos alternativos de calificación, como estrellas puntiagudas, corazones redondeados y más.
- Color de relleno
- Fuente principal
Edita la fuente que se usa para el texto # calificaciones. Elige Heredar del sitio para usar la fuente existente del sitio o selecciona una fuente. - Tamaño, grosor y color de fuente
Ajusta el tamaño, el grosor y el color del texto # calificaciones.
Desactivar o activar filtros y acciones de reseñas
Permite que tus clientes filtren las reseñas por calificación, medios (es decir, si las reseñas incluyen imágenes) o por sus respuestas a preguntas personalizadas. Esto puede ayudar a los clientes potenciales a encontrar las reseñas más relevantes para ellos.
- Ve a la pestaña Reseñas en Klaviyo.
- Haz clic en Configuración de reseñas.
- Selecciona Widgets del sitio web.
- Selecciona Widget de reseñas de productos.
- Selecciona Revisar lista.
- Para mostrar u ocultar el botón y la pestaña de Preguntas y respuestas, o el botón Escribir una reseña, activa o desactiva esa selección en la tarjeta Acciones.
- Para eliminar o agregar la sección de filtros en el widget de la lista de reseñas, desactiva o activa el interruptor Filtros.
- Marca o desmarca cualquiera de estas configuraciones para determinar qué opciones de filtro aparecen: Barra de búsqueda, Ordenar (más recientes, más altos, más bajos), Calificación, Contenido multimedia, Preguntas personalizadas.
Acerca del filtrado de mayor relevancia
El filtro Más relevante destaca las reseñas que es más probable que los usuarios consideren útiles. Cuando se selecciona, las reseñas aparecerán en este orden:
- Reseñas con texto, imágenes o preguntas personalizadas enviadas desde el país del visitante
- Reseñas sin contenido (es decir, reseñas solo de calificación) enviadas desde el país del visitante
- Reseñas con texto, imágenes o preguntas personalizadas enviadas desde otros países
- Reseñas sin contenido (es decir, reseñas solo con calificación) enviadas desde otros países
Dentro de cada categoría, las reseñas se ordenan por fecha de envío, y la más reciente aparece primero.
Elige si quieres incluir imágenes de productos en el resumen de tus reseñas
Los resúmenes de reseñas incluyen una galería opcional de imágenes de productos enviadas por los clientes. Para activar o desactivar esta galería:
- Ve a la pestaña Reseñas en Klaviyo.
- Haz clic en Configuración de reseñas.
- Selecciona Widgets del sitio web.
- Selecciona el widget de reseñas de productos .
- Selecciona Resumen de la reseña y contenido multimedia.
- Activa o desactiva la configuración de Galería de imágenes.
Ocultar elementos de la lista de reseñas
Estas instrucciones aplican al widget de lista de reseñas.
Puedes ocultar elementos de la lista de reseñas (p. ej., autor de la reseña, respuesta de la tienda, marca de tiempo) si lo deseas. Para hacerlo:
- Abre la pestaña Reseñas en Klaviyo.
- Selecciona Configuración de reseñas.
- Haz clic en Widgets del sitio web.
- Elige Reseñas de producto.
- Haz clic en Lista de reseñas.
- Desactiva cualquier elemento que quieras ocultar.
Si desactivas Calificación con estrellas, Contenido multimedia y Preguntas personalizadas de la lista de reseñas, desaparecerán las opciones de configuración de Filtros de reseñas. Para que un visitante del sitio pueda filtrar su búsqueda, al menos un criterio de filtro (calificación de estrellas, medios o preguntas personalizadas) debe estar visible en la lista de reseñas.
Selecciona las reseñas que se mostrarán en el carrusel de reseñas destacadas
Las reseñas destacadas aparecerán en el carrusel de reseñas destacadas. Para elegir qué reseñas destacar:
- Navega hasta la pestaña Reseñas.
- Selecciona Todas las reseñas.
- Junto a una reseña que te gustaría destacar, haz clic en Destacar.
- Repite según sea necesario. Recomendamos seleccionar al menos 3-5 reseñas para destacar.
Recursos adicionales
- How to install Klaviyo Reviews on Shopify 2.0 themes
Learn how to install Klaviyo Reviews on your Shopify 2.0 store by installing the app and adding reviews widgets.
- How to install Klaviyo Reviews on Shopify (vintage themes and headless)
Learn how to install Klaviyo Reviews with a vintage Shopify theme or headless architecture. This process involves copying several code snippets and pasting them into your site’s code.
- How to install Klaviyo Reviews for WooCommerce
Learn how to install Klaviyo Reviews on your WooCommerce store and add reviews widgets. To learn about all the steps required to get started, head to Getting started with Klaviyo Reviews.