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

Qué aprenderás

Aprenda 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 su sitio. 

Si está utilizando un tema Shopify 2.0, puede instalar Klaviyo Reviews sin utilizar código. Diríjase a nuestro artículo sobre cómo empezar con Klaviyo Reviews para obtener más información. Si utiliza WooCommerce, aprenda a instalar Klaviyo Reviews para WooCommerce. 

Antes de empezar

Antes de pegar estos fragmentos de código en el código de su sitio, añada la aplicación Klaviyo Reviews a su tienda Shopify. Para temas antiguos, active el seguimiento in situ de Klaviyo. 

Instalación con arquitectura headless en Shopify

Para integrar Klaviyo Reviews con una tienda Shopify headless, añada el fragmento de seguimiento JavaScript de Klaviyo, también conocido como Klaviyo.js, a todas las páginas en las que desee añadir widgets de reviews (por ejemplo, páginas de productos). Es posible que ya haya instalado este snippet si ha configurado el seguimiento in situ de Klaviyo o los formularios de registro. 

Aprenda a instalar Klaviyo.js para tiendas Shopify. 

Una vez que haya añadido este script a su sitio, siga los pasos que se indican a continuación.

Añada los fragmentos de código

Los fragmentos de código que aparecen a continuación permiten que determinados widgets de reseñas aparezcan en distintas zonas de su tienda. 

• El widget de valoración por estrellas muestra la valoración por estrellas actual de un producto concreto, y suele instalarse debajo del nombre de su 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 los usuarios enviadas con las reseñas y los comentarios 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 es una combinación de los widgets de resumen de reseñas y de lista de reseñas. Si añade el widget de reseñas de productos a su sitio, no necesitará añadir los widgets de lista de reseñas y resumen de reseñas por separado.
• El widget de la 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 para escribir una reseña y otro para hacer una pregunta. Suele instalarse inmediatamente debajo del widget de resumen de reseñas. 
• El widget de carrusel de reseñas destacadas muestra las reseñas destacadas de todos sus productos. Puede aparecer en su página de inicio, en una página de reseñas independiente o en cualquier otro lugar de su sitio web. Puede seleccionar las reseñas que aparecen en este widget. Si están disponibles, las imágenes enviadas por el cliente acompañan a cada reseña; las imágenes de su producto se utilizan si no se ha enviado ninguna imagen junto a la reseña. 
• El widget SEO / Todas las reseñas muestra todas sus reseñas de todos los productos en una sola página. Utilice este widget para mejorar su SEO y proporcionar un lugar único para que sus clientes potenciales vean lo que les gusta a sus clientes actuales. Este widget se suele añadir a una página de reseñas independiente de su sitio web.

Widget de valoración por estrellas

Utilice el widget de valoración por estrellas para mostrar de forma destacada 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 su producto: 

1. Abra el admin de su tienda Shopify. 
2. En Canales de venta, haga clic en Tienda en línea. 
3. Haga clic en el menú de tres puntos situado junto a su tema actual > Duplicar para crear un clon de su tema actual. 
4. En el menú de tres puntos, haga clic en Editar código.
   
5. Busque "producto" en la barra de búsqueda de archivos y localice el archivo utilizado para el contenido de su página de producto. Puede ser producto.líquido, producto-template.liquid, o algo similar. (Si utiliza una plantilla de página de producto personalizada, selecciónela en su lugar).
   
6. Seleccione el archivo y busque {{ product.title }} para localizar el código que muestra el título de su producto.
   
7. Añada una nueva línea debajo de este código. 
8. En la nueva línea, pegue 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. Pulse Guardar. 
10. Haga clic en Vista previa de la tienda. 
11. Navegue a una página de producto dentro de la vista previa de su tienda. Debería ver un widget de estrella debajo del título del producto. 

Widget de reseñas de productos

Utilice 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 su sitio. 

Para instalar este widget: 

1. Abra el admin de su tienda Shopify. 
2. En Canales de venta, haga clic en Tienda en línea. 
3. Haga clic en Personalizar junto a su tema actual para editarlo, o haga clic en el menú de tres puntos > Duplicar si desea editar un tema borrador en lugar de su tema actual. 
4. En el menú de tres puntos, haga clic en Editar código.
   
5. Busque "producto" en la barra de búsqueda de archivos y localice el archivo utilizado para el contenido de su página de producto. Puede ser producto.líquido, producto-template.liquid, o algo similar. (Si utiliza una plantilla de página de producto personalizada, selecciónela en su lugar).
   
6. Seleccione el archivo y, a continuación, desplácese hasta la parte inferior (o hasta donde desee que aparezca el widget de resumen y lista de reseñas). 
7. Añada una nueva línea y, a continuación, pegue este fragmento de código:
   <div id="klaviyo-reviews-all" data-id="{{product.id}}"></div>
   
8. Pulse Guardar. 
9. Haga clic en Vista previa de la tienda. 
10. Navegue a una página de producto dentro de la vista previa de su tienda para un producto que tenga reseñas. Debería ver un widget de resumen de reseñas y vista de lista cerca de la parte inferior de la página.

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

Si prefiere instalar los widgets de resumen de opiniones y lista de opiniones por separado (en lugar de juntos, como se indica en la sección anterior), utilice los siguientes fragmentos de código: 

Widget de resumen de revisión

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

Widget de lista de revisiones

<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 a mano en cualquier página que elija (por ejemplo, su página de inicio). 

Para añadir un carrusel que muestre todas sus opiniones destacadas, primero debe seleccionar las opiniones que desea destacar. 

1. En la navegación principal de Klaviyo, seleccione Reseñas. 
2. Haga clic en Todas las reseñas.
3. Junto a una reseña que desee destacar, haga clic en Destacar.
   

Una vez que haya seleccionado varias reseñas para presentarlas en su sitio, puede instalar un widget de carrusel de reseñas en cualquier página. Navegue hasta la página en la que desea que aparezca el carrusel y, a continuación, pegue 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 SEO / Todas las reseñas muestra todas las reseñas publicadas de cada producto. Añádalo a una página de reseñas independiente o a su página Acerca de.

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

Resultado

Una vez que haya instalado los widgets descritos en este artículo y haya puesto en marcha el nuevo tema, sus reseñas aparecerán en las páginas de productos (así como en cualquier otra página de su sitio en la que las haya instalado). 

Recursos adicionales

• Cómo crear preguntas de revisión personalizadas
• Referencia de datos de Klaviyo Reviews