Cómo instalar Klaviyo Reviews en Shopify (temas vintage y headless)

Objetivos del artículo

Aprende a instalar Klaviyo Reviews con un tema vintage de Shopify o una arquitectura headless. Este proceso implica copiar varios fragmentos de código y pegarlos en el código de tu sitio.

Si usas un tema de Shopify 2.0, puedes instalar Klaviyo Reviews sin usar código. Consulta nuestro artículo sobre primeros pasos con Klaviyo Reviews para obtener más información. Si usas WooCommerce, aprende cómo instalar Klaviyo Reviews para WooCommerce.

Antes de empezar

Antes de pegar estos fragmentos de código en el código del sitio, agrega la app de Klaviyo Reviews a tu tienda de Shopify. Para los temas vintage, habilita el seguimiento en el sitio de Klaviyo.

Instalación con arquitectura headless en Shopify

Para integrar Klaviyo Reviews con una tienda Shopify headless, agrega el fragmento de JavaScript de seguimiento de Klaviyo, también conocido como Klaviyo.js, a todas las páginas en las que quieras agregar widgets de reseñas (p. ej., páginas de producto). Es posible que ya hayas instalado este fragmento si configuraste el seguimiento en el sitio o el formulario de registro de Klaviyo.

Consulta cómo instalar Klaviyo.js para tiendas Shopify.

Una vez que hayas agregado este script al sitio, continúa copiando los fragmentos de código en los pasos de abajo en el código del sitio.

Agrega los fragmentos de código

Los fragmentos de código a continuación permiten que ciertos widget de reseñas aparezcan en diferentes áreas de tu tienda.

• El widget de calificación con estrellas muestra la calificación actual con estrellas de un producto específico y, por lo general, se instala debajo del nombre del producto.
• El widget de resumen de reseñas muestra una gráfica que desglosa todas las calificaciones seleccionadas para un producto, las imágenes de usuarios enviadas con reseñas y los comentarios más comunes que ha recibido el producto. Por lo general, se instala cerca de la parte inferior de una página de producto.
• El widget de reseñas de productos es una combinación de los widgets de resumen de reseñas y lista de reseñas. 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.
• 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. Por lo general, se instala inmediatamente debajo del widget de resumen de reseñas.
• El widget de carrusel de reseñas destacadas muestra reseñas destacadas de todos tus productos. Esto puede mostrarse en la página de inicio, en una página de reseñas independiente o en cualquier otra parte del sitio. Puedes seleccionar las reseñas que se muestran en este widget. Si están disponibles, las imágenes enviadas por los clientes acompañan cada reseña; se usan las imágenes del producto si no se envió ninguna imagen junto con la reseña.
• 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.

Widget de calificación con estrellas

Usa el widget de calificación con estrellas para mostrar de forma destacada la calificación promedio de un producto y la cantidad de reseñas que ha recibido.

Para instalar este widget debajo del título del producto:

1. Abre el panel de administración de tu tienda de Shopify.
2. En Canales de ventas, haz clic en Tienda online.
3. Haz clic en el menú de tres puntos junto a tu tema actual > Duplicar para crear un clon de tu tema actual.
4. En el menú de los tres puntos, haz clic en Editar código.
   

5. Busca "product" en la barra de búsqueda de archivos y ubica 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 usas una plantilla personalizada para la página del producto, selecciona esa en su lugar).
   

6. Selecciona el archivo y luego busca {{ product.title }} para ubicar el código que muestra el título del producto.
   

7. Agrega una nueva línea debajo de este código.
8. 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>
   

9. Haz clic en Guardar.
10. Haz clic en Vista previa de la tienda.
11. 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 resumen de reseñas y el widget de lista de reseñas (o solo el widget de reseñas de productos) para agregar un resumen y una lista de todas las reseñas publicadas de cada producto en tu sitio.

Para instalar este widget:

1. Abre el panel de administración de tu tienda de Shopify.
2. En Canales de ventas, haz clic en Tienda online.
3. Haz clic en Personalizar junto al 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.
4. En el menú de los tres puntos, haz clic en Editar código.
   

5. Busca "product" en la barra de búsqueda de archivos y ubica 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 usas una plantilla personalizada para la página del producto, selecciona esa en su lugar).
   

6. Selecciona el archivo y luego navega hasta el final (o a donde quieras que aparezca el widget de resumen y lista de reseñas).
7. Agrega una línea nueva y luego pega este fragmento de código:
   <div id="klaviyo-reviews-all" data-id="{{product.id}}"></div>
   

8. Haz clic en Guardar.
9. Haz clic en Vista previa de la tienda.
10. 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.

Widgets de resumen de reseñas y lista de reseñas separados

Si prefieres instalar los widget de resumen de reseñas y de lista de reseñas por separado (en lugar de juntos, como se describe en la sección anterior), utiliza los siguientes fragmentos de código:

Widget de resumen de reseñas

<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., la página de inicio).

Para agregar un carrusel que muestre todas tus reseñas destacadas, primero debes seleccionar las reseñas que se mostrarán como funciones.

1. En la navegación principal de Klaviyo, selecciona Reseñas.
2. Haz clic en Todas las reseñas.
3. 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 quieres que aparezca el carrusel y luego pega el siguiente fragmento en el código de esa página:

<div id="klaviyo-featured-reviews-carousel"></div>

SEO/Todas las reseñas widget (opcional)

El widget de SEO / Todas las reseñas muestra todas las reseñas publicadas en todos los productos. Agrega esto a una página de reseñas independiente o a la 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 tema nuevo, las reseñas aparecerán en todas las páginas de producto (así como en cualquier otra página de tu sitio donde las hayas instalado).

Recursos adicionales