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

Objetivos de aprendizaje

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

Si utilizas un tema Shopify 2.0, puedes instalar Klaviyo Reviews sin utilizar código. Visita nuestro artículo sobre los primeros pasos con Klaviyo Reviews para saber más. Si utilizas WooCommerce, aprende a instalar Klaviyo Reviews para WooCommerce. 

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 Shopify tienda, comercio. Para los temas antiguos, activa el seguimiento in situ de Klaviyo. 

Instalación con arquitectura headless en Shopify

Para integrar Klaviyo Reviews con una tienda headless Shopify comercio, añade Klaviyo's JavaScript seguimiento snippet, también conocido como Klaviyo.js, a todas las páginas en las que quieras añadir el widget de reseñas (por ejemplo, páginas de productos). Es posible que ya hayas instalado este fragmento si has configurado el seguimiento in situ o el formulario de registro de Klaviyo. 

Aprende a instalar Klaviyo.js para Shopify tienda, comercio. 

Una vez que hayas añadido este script a tu sitio, procede copiando el fragmento de código de los pasos siguientes en el código de tu sitio.

Añade el fragmento de código

El fragmento de código que aparece a continuación permite que determinados widget de reseñas aparezcan en diferentes áreas de tu tienda, comercio. 

• El widget de valoración por estrellas muestra la valoración por estrellas actual de un producto concreto, y se instala con mayor frecuencia debajo del nombre de tu producto. 
• El widget de resumen de rese ñas muestra un gráfico en el que se desglosan todas las valoraciones seleccionadas para un producto, las imágenes de usuario enviadas con las reseñas y las opiniones más comunes que ha recibido el producto. Suele instalarse cerca de la parte inferior de la página de un producto. 
• El widget de reseñas de productos widget es una combinación del widget de resumen de reseñas y de lista de reseñas. Si añades las reseñas de productos widget a tu sitio, no necesitas añadir por separado el widget de lista de reseñas y el de resumen de reseñas.
• La lista de opiniones widget muestra una lista de todas las opiniones y preguntas de clientes publicadas, junto con una barra de búsqueda, filtros, un botón para escribir una opinión y un botón para hacer una pregunta. Suele instalarse inmediatamente debajo del widget de resumen de la reseña. 
• El widget de carrusel de reseñas destac adas muestra las reseñas destacadas de todos tus productos. Puede aparecer en tu página de inicio, en una página de opiniones independiente o en cualquier otro lugar de tu sitio. Puedes seleccionar las opiniones que aparecen en este widget. Si están disponibles, las imágenes enviadas por el cliente acompañan a cada opinión; las imágenes de tu producto se utilizan si no se ha enviado ninguna imagen junto a la opinión. 
• El widget SEO / Todas las opiniones muestra todas tus opiniones de todos los productos en una sola página. Utiliza este widget para mejorar tu SEO y proporcionar un único lugar para que los clientes potenciales vean lo que les gusta a tus clientes actuales. Este widget se suele añadir a una página de Opiniones independiente de tu sitio web.

Clasificación por estrellas widget

Utiliza la valoración por estrellas widget para destacar funciones/características la valoración media de un producto y el número de opiniones que ha recibido.

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

1. Abre tu Shopify tienda, comercio admin. 
2. En Canal de ventas haz clic en Tienda en línea. 
3. Haz clic en el menú de tres puntos situado junto a tu tema actual > Duplicar para crear un clon de tu tema actual. 
4. En el menú de tres puntos, haz clic en Editar código.
   
5. Busca "producto" en la barra de búsqueda de archivos y localiza el archivo utilizado para el contenido de tu página de producto. Puede ser producto.líquido, producto-plantilla.líquido, o algo similar. (Si utilizas una plantilla de página de producto personalizada, selecciónala en su lugar).
   
6. Selecciona el archivo y busca {{ product.title }} para localizar el código que muestra el título de tu producto.
   
7. Añade 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 tienda, comercio. 
11. Navega a una página de producto dentro de tu tienda, vista previa de comercio. Deberías ver un widget de estrella debajo del título del producto. 

Widget de reseñas de productos

Utiliza el widget de resumen de reseñas y lista de reseñas (o sólo el widget de reseñas de productos) para añadir un resumen y una lista de todas las reseñas publicadas para cada producto de tu sitio. 

Para instalar este widget: 

1. Abre tu Shopify tienda, comercio admin. 
2. En Canal de ventas haz clic en Tienda en línea. 
3. 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 borrador en lugar de tu tema actual. 
4. En el menú de tres puntos, haz clic en Editar código.
   
5. Busca "producto" en la barra de búsqueda de archivos y localiza el archivo utilizado para el contenido de tu página de producto. Puede ser producto.líquido, producto-plantilla.líquido, o algo similar. (Si utilizas una plantilla de página de producto personalizada, selecciónala en su lugar).
   
6. Selecciona el archivo y, a continuación, desplázate hasta la parte inferior (o hasta donde quieras que aparezca el resumen de las opiniones y el widget de la lista). 
7. Añade una nueva línea y 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 tienda, comercio. 
10. Navega a una página de producto dentro de tu tienda, vista previa de comercio para un producto que tenga opiniones. Deberías ver un widget de resumen de opiniones y vista de lista cerca de la parte inferior de la página.

Widget separado de resumen y lista de opiniones

Si prefieres instalar el widget de resumen de opinión y el de lista de opiniones por separado (en lugar de juntos, como se indica en la sección anterior), utiliza el siguiente fragmento de código: 

Resumen de la revisión widget

<div id="klaviyo-reviews-summary" data-id="{{product.id}}" ></div>

Revisar lista widget

<div id="klaviyo-reviews-list" data-id="{{product.id}}" ></div>

Carrusel de reseñas destacadas widget (opcional)

El carrusel de opiniones destacadas muestra opiniones seleccionadas a mano en cualquier página que elijas (por ejemplo, tu página de inicio). 

Para añadir un carrusel que muestre todas tus reseñas destacadas, primero debes seleccionar reseñas a funciones/características. 

1. En la navegación principal de Klaviyo, selecciona Reseñas. 
2. Haz clic en Todas las opiniones.
3. Junto a una reseña que te gustaría funciones/características, haz clic en funciones/características.
   

Una vez que hayas seleccionado varias reseñas para funciones/características de tu sitio, puedes instalar un carrusel de reseñas widget en cualquier página. Ve a la página en la que quieres que aparezca el carrusel y pega el siguiente fragmento en el código de esa página: 

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

SEO / Todas las opiniones widget (opcional)

El widget SEO / Todas las opiniones muestra todas las opiniones publicadas de cada producto. Añádelo a una página independiente de Reseñas o a tu página Acerca de.

<div id="klaviyo-revistas-todas" data-id="todas"></div>

Resultado

Una vez que hayas instalado el widget descrito en este artículo y configurado el nuevo tema, tus opiniones aparecerán en las páginas de producto (así como en cualquier otra página de tu sitio en la que las hayas instalado). 

Recursos adicionales

• Cómo crear preguntas de repaso personalizadas
• Referencia de los datos de Klaviyo Reviews