Cómo instalar Klaviyo Reviews en Shopify (temas antiguos y headless)
Qué aprenderás
Descubre cómo instalar Klaviyo Reviews con un tema de Shopify vintage o una arquitectura headless. Este proceso implica copiar varios fragmentos de código y pegarlos en el código de tu sitio.
Si utilizas un tema de Shopify 2.0, puedes instalar Klaviyo Reviews sin usar código. Para saber más, lee nuestro artículo sobre cómo dar los primeros pasos con Klaviyo Reviews. Si usas WooCommerce, consulta cómo instalar Klaviyo Reviews para WooCommerce.
Este proceso requiere editar directamente los archivos de tu tema en Shopify. Si no te sientes cómodo haciéndolo por tu cuenta, ponte en contacto con tu desarrollador o contacta con un socio de Klaviyo para obtener ayuda.
Antes de empezar
Antes de pegar estos fragmentos de código en el código de tu sitio, añade la aplicación Klaviyo Reviews a tu tienda Shopify. Para temas vintage, habilita el seguimiento in situ de Klaviyo.
Instalación con arquitectura headless en Shopify
Para integrar Klaviyo Reviews con una tienda headless de Shopify, añade el fragmento de seguimiento de JavaScript de Klaviyo, también conocido como Klaviyo.js, a todas las páginas en las que quieras añadir widgets de reseñas (p. ej., páginas de producto). Puede que ya hayas instalado este fragmento si has configurado el seguimiento onsite de Klaviyo o los formularios de registro.
Consulta cómo instalar Klaviyo.js para tiendas de Shopify.
Una vez que hayas añadido este script a tu sitio, sigue copiando los fragmentos de código de los pasos que se indican a continuación en el código de tu sitio.
Añade los fragmentos de código
Los fragmentos de código que aparecen a continuación permiten que determinados widget de reseñas aparezcan en distintas áreas de tu tienda.
- El widget de valoración con estrellas muestra la valoración con estrellas actual de un producto en concreto y, por lo general, se instala debajo del nombre del producto.
- El widget de resumen de reseñas muestra un gráfico que desglosa todas las valoraciones seleccionadas para un producto, las imágenes de usuarios enviadas con las reseñas y los comentarios más comunes que ha recibido el producto. Normalmente, se instala cerca de la parte inferior de la página de un producto.
- El widget de reseñas de productos es una combinación de los widget de resumen de reseñas y de lista de reseñas. Si añades el widget de reseñas de productos a tu sitio, no necesitas añadir los widget de lista de reseñas y de resumen de reseñas por separado.
- El widget de lista de reseñas muestra una lista de todas las reseñas publicadas y las preguntas de los clientes, junto con una barra de búsqueda, filtros, un botón Escribir una reseña y un botón Hacer una pregunta. Normalmente se instala justo debajo del widget de resumen de reseñas.
- El widget de carrusel de reseñas destacadas muestra reseñas destacadas de todos tus productos. Se puede destacar 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 destacan en este widget. Si están disponibles, las imágenes enviadas por los clientes acompañan a cada reseña; se usan las imágenes de tus productos si no se envió ninguna imagen con la reseña.
- El widget de SEO/todos los widgets de 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 único lugar para que los clientes potenciales vean lo que les encanta a tus clientes actuales. Este widget se añade con mayor frecuencia a una página independiente de Reseñas en tu sitio.
Widget de valoración por estrellas
Utiliza el widget de valoración con estrellas para mostrar de forma destacada la valoración media de un producto y el número de reseñas que ha recibido.
Para instalar este widget debajo del título de tu producto:
- Abre el administrador de tu tienda de Shopify.
- En Canales de ventas, haz clic en Tienda online.
- Haz clic en el menú de tres puntos junto a tu tema actual > Duplicar para crear un clon de tu tema actual.
- En el menú de los tres puntos, haz clic en Editar código.
- Busca «product» en la barra de búsqueda de archivos y localiza el archivo que se usa para el contenido de tu página de producto. Podría ser product.liquid, product-template.liquid, o algo similar. (Si utilizas una plantilla de página de producto personalizada, selecciona esa en su lugar).
- Selecciona el archivo y, a continuación, busca {{ product.title }} para encontrar el código que muestra el título de tu producto.
- Añade una nueva línea debajo de este código.
- En la nueva línea, pega este fragmento de código:
<div class="klaviyo-star-rating-widget" data-id="{{product.id}}" data-product-title="{{product.title}}" data-product-type="{{product.type}}"></div>
- Pulsa Guardar.
- Haz clic en Vista previa de la tienda.
- Ve a una página de producto dentro de la vista previa de tu tienda. Deberías ver un widget de estrellas debajo del título del producto.
Widget de reseñas de productos
Usa el widget de resumen de reseñas y el widget de lista de reseñas (o solo el widget de reseñas de productos) para añadir un resumen y una lista de todas las reseñas publicadas de cada producto en tu sitio.
Para instalar los widgets de resumen y lista por separado, ve a la sección widgets de resumen de reseñas y lista de reseñas por separado más abajo.
Para instalar este widget:
- Abre el administrador de tu tienda de Shopify.
- En Canales de ventas, haz clic en Tienda online.
- Haz clic en Personalizar junto a tu tema actual para editarlo, o haz clic en el menú de tres puntos > Duplicar si quieres editar un tema en borrador en lugar del tema activo.
- En el menú de los tres puntos, haz clic en Editar código.
- Busca «product» en la barra de búsqueda de archivos y localiza el archivo que se usa para el contenido de tu página de producto. Podría ser product.liquid, product-template.liquid, o algo similar. (Si utilizas una plantilla de página de producto personalizada, selecciona esa en su lugar).
- Selecciona el archivo y, a continuación, ve hasta el final (o hasta donde quieras que aparezcan el resumen de reseñas y el widget de lista).
- Añade una nueva línea y, a continuación, pega este fragmento de código:
<div id="klaviyo-reviews-all" data-id="{{product.id}}"></div>
- Pulsa Guardar.
- Haz clic en Vista previa de la tienda.
- Ve a una página de producto dentro de la vista previa de tu tienda para un producto que tenga reseñas. Deberías ver un resumen de reseñas y un widget de vista de lista cerca de la parte inferior de la página.
Separar los widgets de resumen de reseñas y lista de reseñas
Si prefieres instalar los widget de resumen de reseñas y lista de reseñas por separado (en lugar de juntos, como se describe en la sección anterior), utiliza los siguientes fragmento de código:
Widget de resumen de revisión
<div id="klaviyo-reviews-summary" data-id="{{product.id}}"></div>
Widget de lista de reseñas
<div id="klaviyo-reviews-list" data-id="{{product.id}}"></div>
Widget de carrusel de reseñas destacadas (opcional)
El carrusel de reseñas destacadas muestra reseñas seleccionadas manualmente en cualquier página que elijas (p. ej., tu página de inicio).
Para añadir un carrusel que muestre todas tus reseñas destacadas, primero debes seleccionar las reseñas que quieres destacar.
- Desde la navegación principal de Klaviyo, selecciona Reviews.
- Haz clic en Todas las reseñas.
- Junto a una reseña que quieras destacar, haz clic en Funciones.
Una vez que hayas seleccionado varias reseñas para destacar en tu sitio, puedes instalar un widget de carrusel de reseñas en cualquier página. Ve a la página donde quieras que aparezca el carrusel y, a continuación, pega el siguiente fragmento en el código de esa página:
<div id="klaviyo-featured-reviews-carousel"></div>
Widget SEO / Todas las reseñas (opcional)
El widget de SEO / Todas las reseñas muestra todas las reseñas publicadas de cada producto. Añádelo a una página independiente de reseñas o a tu página Acerca de.
<div id="klaviyo-reviews-all" data-id="all"></div>
Resultado
Una vez que hayas instalado los widgets descritos en este artículo y hayas activado el nuevo tema, tus reseñas aparecerán en todas las páginas de productos (así como en cualquier otra página de tu sitio donde los hayas instalado).
Recursos adicionales
- Cómo crear preguntas de reseñas personalizadas
Descubre cómo añadir preguntas para que tus clientes las respondan cuando reseñen tus productos. Las respuestas pueden ayudar a contextualizar su reseña y proporcionar datos valiosos sobre tus productos. Si tus clientes responden a preguntas personalizadas de reseñas, los futuros navegantes del sitio pueden filtrar las reseñas en función de sus respuestas.
- Referencia de datos de reseñas de Klaviyo Reviews
Obtén información sobre los datos adicionales disponibles en Klaviyo cuando empieces a usar reseñas. Estos datos se dividen en dos grandes categorías: métricas de entrega (solo Shopify) y métricas de reseñas (disponibles para WooCommerce y Shopify).