Comment installer Klaviyo Reviews sur Shopify (thèmes vintage et headless)

Objectif de cet article

Découvrez comment installer Klaviyo Reviews avec une architecture headless ou un thème vintage Shopify. Ce processus consiste à copier plusieurs extraits de code et à les coller dans le code de votre site.

Si vous utilisez un thème Shopify 2.0, vous pouvez installer Klaviyo Reviews sans utiliser de code. Pour en savoir plus, consultez notre article sur Démarrer avec Klaviyo Reviews. Si vous utilisez WooCommerce, découvrez comment installer Klaviyo Reviews pour WooCommerce.

Avant de commencer

Avant de coller ces extraits de code dans le code de votre site, ajoutez l’application Klaviyo Reviews à votre boutique Shopify. Pour les thèmes vintage, activez le tracking sur site de Klaviyo.

Installation d'une architecture sans tête sur Shopify

Pour intégrer Klaviyo Reviews à une boutique Shopify headless, ajoutez l’extrait de code JavaScript de Klaviyo (Klaviyo.js) à toutes les pages où vous souhaitez inclure des widgets d’avis, comme les pages de produits. Vous avez peut-être déjà installé cet extrait de code si vous avez configuré le tracking sur site ou les formulaires d’inscription de Klaviyo.

Découvrez comment installer Klaviyo.js pour les boutiques Shopify.

Après avoir installé Klaviyo.js, ajoutez les widgets à votre vitrine headless en suivant les étapes ci-dessous. Les instructions de modification de thème Shopify dans les sections de widget s’appliquent aux thèmes vintage.

1. Copiez chaque extrait de widget que vous souhaitez utiliser depuis les sections ci-dessous dans le modèle de page ou le composant où le widget doit apparaître.
2. Pour les widgets spécifiques à un produit, remplacez {{product.id}} par l’ID numérique du produit Shopify, par exemple data-id="123456789". Fournissez l’ID correct pour chaque page produit. Dans l’extrait d’évaluation par étoiles, remplacez également {{product.title}} et {{product.type}} par le titre et le type de ce produit.
3. Conservez data-id="all" inchangé pour le widget SEO / Tous les avis. L’extrait de code du carrousel d’avis mis en avant n’a pas besoin d’un ID de produit.
4. Enregistrez vos modifications et prévisualisez la vitrine. Vérifiez une page produit avec des avis publiés, ainsi que toutes les autres pages où vous avez ajouté des widgets, avant de déployer vos modifications.

Ajoutez les extraits de code

Les extraits de code ci-dessous permettent à certains widgets d’avis d’apparaître dans différentes zones de votre boutique.

• Le widget d’évaluation par étoiles affiche l’évaluation par étoiles actuelle d’un produit particulier et est le plus souvent installé sous le nom de votre produit.
• Le widget de synthèse des avis présente un tableau qui détaille toutes les évaluations sélectionnées pour un produit, les images d'utilisateurs soumises avec les avis et les commentaires les plus courants que le produit a reçus. Il est généralement installé au bas de la page d’un produit.
• Le widget des avis sur les produits est une combinaison des widgets "résumé des avis" et "liste des avis". Si vous ajoutez le widget d'avis sur les produits à votre site, vous n'avez pas besoin d'ajouter séparément les widgets de liste d'avis et de résumé d'avis.
• Le widget de la liste des avis affiche une liste de tous les avis publiés et de toutes les questions des clients, ainsi qu'une barre de recherche, des filtres, un bouton Écrire un avis et un bouton Poser une question. Il est généralement installé juste en dessous du widget de résumé de l’avis.
• Le widget de carrousel des avis mis en avant affiche les avis sur vos produits mis en évidence. Il peut être affiché sur votre page d’accueil, sur une page seule dédiée aux avis ou à tout autre endroit de votre site. Vous pouvez sélectionner les avis présentés dans ce widget. Si elles sont disponibles, les images envoyées par les clients sont apposées à chaque avis ; sinon, ce sont les images de vos produits qui sont utilisées si aucune image n’a été envoyée avec l’avis.
• Le widget SEO/Tous les avis affiche tous vos avis sur tous les produits sur une seule page. Utilisez-le pour améliorer votre référencement et offrir à vos clients potentiels un endroit unique pour voir ce que vos clients actuels aiment. Ce widget est le plus souvent ajouté à une page Avis autonome sur votre site.

Widget de classement par étoiles

Utilisez le widget d'évaluation par étoiles pour mettre en évidence l'évaluation moyenne d'un produit et le nombre d'avis qu'il a reçus.

Pour un thème vintage, installez ce widget sous le titre de votre produit :

1. Ouvrez l’interface d’administration de votre boutique Shopify.
2. Sous Canaux de vente, cliquez sur Boutique en ligne.
3. Cliquez sur le menu à trois points situé à côté de votre thème actuel > Dupliquer pour créer un clone de votre thème actuel.
4. Dans le menu à trois points du thème dupliqué, cliquez sur Modifier le code.
   

5. Recherchez "produit" dans la barre de recherche de fichiers et localisez le fichier utilisé pour le contenu de votre page produit. Il peut s'agir de product.liquid, product-template.liquid, ou quelque chose de similaire. (Si vous utilisez un modèle de page produit personnalisé, sélectionnez-le à la place.)
   

6. Sélectionnez le fichier, puis recherchez {{ product.title }} pour localiser le code qui affiche le titre de votre produit.
   

7. Ajoutez une nouvelle ligne sous ce code.
8. Sur la nouvelle ligne, collez cet extrait de code :
   <div class="klaviyo-star-rating-widget" data-id="{{product.id}}" data-product-title="{{product.title}}"      data-product-type="{{product.type}}"></div>
   

9. Cliquez sur Enregistrer.
10. Cliquez sur Aperçu du magasin.
11. Accédez à la page d’un produit dans l’aperçu de votre boutique pour un produit qui a des avis publiés. Vous devriez voir un widget d’étoiles sous le titre du produit. Un produit sans avis peut voir son widget de classement par étoiles masqué par les paramètres de votre widget.

Widget d’évaluation des produits

Utilisez le widget de résumé et de liste d’avis (ou simplement le widget d’avis sur les produits) pour ajouter un résumé et une liste de tous les avis publiés pour chaque produit sur votre site.

Pour un thème vintage, installez ce widget dans le même thème que votre widget d’évaluation par étoiles :

1. Ouvrez l’interface d’administration de votre boutique Shopify.
2. Sous Canaux de vente, cliquez sur Boutique en ligne.
3. Sélectionnez le même thème que vous avez utilisé pour le widget d’évaluation par étoiles. Si vous avez ignoré ce widget, choisissez votre thème actuel pour le modifier, ou cliquez sur son menu à trois points > Dupliquer pour modifier une copie.
4. Dans le menu à trois points du thème sélectionné, cliquez sur Modifier le code.
   

5. Recherchez "produit" dans la barre de recherche de fichiers et localisez le fichier utilisé pour le contenu de votre page produit. Il peut s'agir de product.liquid, product-template.liquid, ou quelque chose de similaire. (Si vous utilisez un modèle de page produit personnalisé, sélectionnez-le à la place.)
   

6. Sélectionnez le fichier, puis allez tout en bas (ou à l’endroit où vous souhaitez que le résumé des avis et le widget de liste apparaissent).
7. Ajoutez une nouvelle ligne, puis collez cet extrait de code :
   <div id="klaviyo-reviews-all" data-id="{{product.id}}"></div>
   

8. Cliquez sur Enregistrer.
9. Cliquez sur Aperçu du magasin.
10. Accédez à la page d'un produit dans l'aperçu de votre magasin pour un produit qui a des avis. Vous devriez voir un résumé des critiques et un widget de liste vers le bas de la page.

Widgets distincts pour le résumé et la liste des avis

Si vous préférez installer les widgets de résumé et de liste d’avis séparément (plutôt qu’ensemble, comme indiqué dans la section ci-dessus), utilisez les extraits de code suivants :

Widget de résumé des avis

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

Widget de liste d’avis

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

Widget carrousel d'avis en vedette (facultatif)

Le carrousel d’avis mis en avant affiche des avis sélectionnés manuellement sur n’importe quelle page de votre choix (par exemple, votre page d’accueil).

Pour ajouter un carrousel affichant vos avis présentés, commencez par sélectionner des avis sur des produits publiés qui incluent le texte de l'avis. Les évaluations par étoiles sans texte et les avis sur la boutique ne peuvent pas être sélectionnés à l'aide du contrôle des fonctionnalités.

1. Dans la navigation principale de Klaviyo, sélectionnez Site Web > Avis.
2. Cliquez sur tous les commentaires.
3. En regard d’un avis que vous souhaitez mettre en avant, cliquez sur l’icône Mettre en avant. Si vous voyez plutôt Plus d’options de mise en avant, ouvrez-le et sélectionnez Ajouter aux avis mis en avant.

Une fois que vous avez sélectionné plusieurs avis à présenter sur votre site, vous pouvez installer un widget de carrousel d'avis sur n'importe quelle page. Naviguez jusqu’à la page où vous souhaitez que le carrousel apparaisse, puis collez l’extrait suivant dans le code de cette page :

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

Enregistrez vos modifications, puis prévisualisez la page pour confirmer que le carrousel affiche les avis que vous avez sélectionnés.

Widget SEO/Tous les avis (facultatif)

Le widget SEO/Tous les avis affiche tous les avis publiés pour chaque produit. Ajoutez-le à une page « Avis » autonome ou à votre page « À propos ». Collez l’extrait de code suivant à l’endroit où vous souhaitez que le widget apparaisse dans le code de cette page.

<div id="klaviyo-reviews-all" data-id="all"></div>

Enregistrez vos modifications, puis prévisualisez la page pour confirmer que le widget affiche vos avis publiés.

Résultat

Si vous avez modifié un thème Shopify dupliqué, publiez-le après avoir confirmé que les widgets s’affichent comme prévu dans votre aperçu. Pour une vitrine headless, déployez vos modifications après les avoir prévisualisées. Vos avis s’afficheront sur les pages produit et toutes les autres pages où vous avez installé les widgets.

Ressources supplémentaires