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.

Une fois que vous avez ajouté ce script à votre site, copiez les extraits de code fournis aux étapes ci-dessous et ajoutez-les au code de votre site.

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 installer 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, 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. Naviguez vers une page de produit dans l'aperçu de votre magasin. Vous devriez voir un widget d’étoiles sous le titre du produit.

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 installer ce widget :

1. Ouvrez l’interface d’administration de votre boutique Shopify.
2. Sous Canaux de vente, cliquez sur Boutique en ligne.
3. Cliquez sur Personnaliser à côté de votre thème actuel pour le modifier, ou cliquez sur le menu à trois points > Dupliquer si vous souhaitez plutôt modifier un thème en brouillon plutôt que votre thème en ligne.
4. Dans le menu à trois points, 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 tous les avis présentés, vous devez d’abord sélectionner les avis à présenter.

1. Dans la navigation principale de Klaviyo, sélectionnez Avis.
2. Cliquez sur tous les commentaires.
3. En regard d’un avis que vous souhaitez mettre en avant, cliquez sur Mettre 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>

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 ».

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

Résultat

Une fois que vous avez installé les widget décrits dans cet article et que vous avez mis le nouveau thème en ligne, vos commentaires apparaîtront sur les pages des produits (ainsi que sur toutes les autres pages de votre site où vous les avez installés).