---
title: Intégrer les composants Trustt Reviews dans les pages Shopify
description: Ce document s’adresse à des personnes ayant un profil d’intégrateur web Shopify.   Pour intégrer les composantes, vous devez déjà avoir créé un jeton d'accès API Shopify. Si vous souhaitez utiliser Tr
---

[Passer au contenu](https://support.trustt.io/fr/knowledge/intégrer-les-composants-trustt-reviews-dans-les-pages-shopify-2#main-content)

Français

Afficher le sous-menu pour les traductions

![trustt..png\]](https://support.trustt.io/hs-fs/hubfs/trustt..png?height=24&name=trustt..png)

Ouvrir la navigation principale

Fermer la navigation principale

- Français
  
  Afficher le sous-menu pour les traductions

 Bienvenue dans le centre d'aide !

- Il n'y a aucune suggestion car le champ de recherche est vide.

1. [Help Center](https://support.trustt.io/fr/knowledge?hsLang=fr)
2. [Installation Trustt Reviews](https://support.trustt.io/fr/knowledge/installation-trustt-reviews?hsLang=fr)
3. [Shopify](https://support.trustt.io/fr/knowledge/installation-trustt-reviews?hsLang=fr#shopify)

# Intégrer les composants Trustt Reviews dans les pages Shopify

Ce document s’adresse à des personnes ayant un profil d’intégrateur web Shopify.

### Sommaire

- **Fiche produit**
- **Aperçu produit**
- **Formulaire d’un produit**

 

Pour intégrer les composantes, vous devez déjà avoir [créé un jeton d'accès API Shopify.](https://support.trustt.io/fr/knowledge/comment-cr%C3%A9er-un-jeton-dacc%C3%A8s-api-shopify-2?hsLang=fr)

Si vous souhaitez utiliser Trustt Reviews sans afficher les avis, vous ne devez pas intégrer les composantes. Il vous suffit de créer le jeton d'accès. 

### Avant de commencer

Aller dans Boutiques en lignes \> **Themes**

Puis cliquer sur le bouton “ **…**” puis sur le sous-menu “**Modifier le code**“ :

![](https://support.trustt.io/hubfs/Knowledge%20Base%20Import/d33v4339jhl8k0.cloudfront.netdocsassets5e9458a304286364bc984077images63b6ec2cb31bcd14df2c415afile-ytFfVa9mr7-Aug-29-2023-09-39-05-3940-AM.png)

### Fiche produit

#### Statistiques d’avis

Dans le fichier **main.product.liquid** (fiche produit), sous la balise h1 du nom du produit veuillez ajouter le code suivant pour afficher la note moyenne (étoiles) et le nombre d’avis :

```
 {%- if product.metafields.trusttreviews.avgRating.value != blank -%}<div class="trusttreviews-product-extrablock"><a href="#avis-produit"><div class="avgrating"> <div class=""> <img src="{{ product.metafields.trusttreviews.urlRating.value }}" width="84" alt="Note moyenne"></div></div><div class="nbreviews">({{ product.metafields.trusttreviews.nbReviews.value }} avis)</div></a></div>{%- endif -%} 
```

Par exemple :

```
 <h1 class="product__title" {{ block.shopify_attributes }}>{{ product.title | escape }}</h1>{%- if product.metafields.trusttreviews.avgRating.value != blank -%}<div class="trusttreviews-product-extrablock"><a href="#avis-produit"><div class="avgrating"> <div class=""><img src="{{ product.metafields.trusttreviews.urlRating.value }}" width="84" alt="Note moyenne"> </div></div><div class="nbreviews">({{ product.metafields.trusttreviews.nbReviews.value }} avis)</div></a></div>{%- endif -%} 
```

![](https://support.trustt.io/hubfs/Knowledge%20Base%20Import/d33v4339jhl8k0.cloudfront.netdocsassets5e9458a304286364bc984077images63b6edc2d0b6de7e3be2a650file-GJF1JLJW68-Aug-29-2023-09-39-05-8034-AM.png)

Si votre produit a des avis et que le nombre d’avis reste à 0, veuillez re-enregistrer le jeton d’API dans Trustt pour relancer la synchronisation des données produits

Si les changements ne sont pas effectifs immédiatement sur votre page produit, veuillez recharger votre page (F5 ou Cmd+R) ou attendre environ 1 minute le temps que le cache de la page Shopify se réinitialise.

#### Surcharge des rich snippets

Pour surcharger les rich snippet, cherchez la ligne :

Et ajoutez le code suivant pour surcharger les rich snippets du produit scannés par les SERPs (Google, …) :

Par exemple :

```
<script type="application/ld+json">
```

Et ajoutez le code suivant pour surcharger les rich snippets du produit scannés par les SERPs (Google, …) :

```
 {%- if product.metafields.trusttreviews.nbReviews.value != blank -%}"aggregateRating": [{"@type": "AggregateRating","ratingValue": "{{ product.metafields.trusttreviews.avgRating.value }}","reviewCount": "{{ product.metafields.trusttreviews.nbReviews.value }}", "worstRating": "1", "bestRating": "5"}],{%- endif -%} 
```

Par exemple : 

```
  <script type="application/ld+json">  {    "@context": "http://schema.org/",    "@type": "Product",    "name": {{ product.title | json }},    "url": {{ shop.url | append: product.url | json }},    {% if seo_media -%}      {%- assign media_size = seo_media.preview_image.width | append: 'x' -%}      "image": [        {{ seo_media | img_url: media_size | prepend: "https:" | json }}      ],    {%- endif %}    "description": {{ product.description | strip_html | json }},    {% if product.selected_or_first_available_variant.sku != blank -%}      "sku": {{ product.selected_or_first_available_variant.sku | json }},    {%- endif %}    "brand": {      "@type": "Thing",      "name": {{ product.vendor | json }}    },  {% if product.metafields.trusttreviews.nbReviews.value != blank -%}    "aggregateRating": [{"@type": "AggregateRating","ratingValue": "{{ product.metafields.trusttreviews.avgRating.value }}","reviewCount": "{{ product.metafields.trusttreviews.nbReviews.value }}", "worstRating": "1", "bestRating": "5"}],  {%- endif %}    "offers": [     {%- for variant in product.variants -%}        {          "@type" : "Offer",          {%- if variant.sku != blank -%}            "sku": {{ variant.sku | json }},          {%- endif -%}          "availability" : "http://schema.org/{% if variant.available %}InStock{% else %}OutOfStock{% endif %}",          "price" : {{ variant.price | divided_by: 100.00 | json }},          "priceCurrency" : {{ cart.currency.iso_code | json }},          "url" : {{ shop.url | append: variant.url | json }}        }{% unless forloop.last %},{% endunless %}      {%- endfor -%}    ]  }</script> 
```

#### Affichage des avis

Copiez le code suivant à la 1ère ligne du fichier  **product-recommandation.liquid** pour afficher les avis sur la fiche produit :

```
 <div id="trustbeauty_review_thread"></div>  <script>  var trustbeauty_config = {      apiKey : '{{ shop.metafields.trusttreviews.apiKey.value }}',      productId : {{product.id}},      lang : (Shopify.locale || 'FR').toUpperCase(), // code ISO2 [FR, EN, ..] shop_locale.iso_code: '{{shop_locale.iso_code}}' '{{shop.published_locales[0]}}'      nbCols : 2,      nbReviews : 6,      order : 'date_desc'  };  (function() {      var d = document, s = d.createElement('script');     s.src = 'https://app.trustt.io/static/js/embed/trustbeauty-review.min.js';      s.setAttribute('data-timestamp', +new Date());      (d.head || d.body).appendChild(s);  })();  </script>  <noscript>Merci d'activer Javascript pour afficher les avis produit</noscript> 
```

![](https://support.trustt.io/hubfs/Knowledge%20Base%20Import/d33v4339jhl8k0.cloudfront.netdocsassets5e9458a304286364bc984077images63b6ef76e0d50f55558401a0file-p19iRALRp7-3.png)

### Aperçu produit

Ouvrez le fichier **product-card.liquid** ou **card-product.liquid** (preview d’un produit, par exemple affiché sur la homepage ou dans la liste des produits d’une catégorie) et ajoutez le code suivant :

Sous le ou les H3 (fichier product-card) :

```
 {%- if product_card_product.metafields.trusttreviews.avgRating.value  != blank -%}<div class="trusttreviews-product-extrablock">    <div class="avgrating">          <div class="rating5-sm-r450">             <img src="{{ product_card_product.metafields.trusttreviews.urlRating.value }}" width="84" alt="Note moyenne">        </div>    </div>    <div class="nbreviews">({{ product_card_product.metafields.trusttreviews.nbReviews.value }} avis)</div></div>{%- endif -%} 
```

Si votre thème contient un fichier card-product :

```
 {%- if card_product.metafields.trusttreviews.avgRating.value  != blank -%}<div class="trusttreviews-product-extrablock">    <div class="avgrating">          <div class="rating5-sm-r450">             <img src="{{ card_product.metafields.trusttreviews.urlRating.value }}" width="84" alt="Note moyenne">          </div>    </div>    <div class="nbreviews">({{ card_product.metafields.trusttreviews.nbReviews.value }} avis)</div></div>{%- endif -%} 
```

Par exemple :

```
 <h3 class="card-information__text h5">    <a href="{{ product_card_product.url | default: '#' }}" class="full-unstyled-link">        {{ product_card_product.title | escape }}    </a></h3>{%- if product_card_product.metafields.trusttreviews.avgRating.value  != blank -%}<div class="trusttreviews-product-extrablock">    <div class="avgrating">          <div class="rating5-sm-r450">             <img src="{{ product_card_product.metafields.trusttreviews.urlRating.value }}" width="84" alt="Note moyenne">          </div>    </div>    <div class="nbreviews">({{ product_card_product.metafields.trusttreviews.nbReviews.value }} avis)</div></div>{%- endif -%}  
```

![](https://support.trustt.io/hubfs/Knowledge%20Base%20Import/d33v4339jhl8k0.cloudfront.netdocsassets5e9458a304286364bc984077images63b6f04ef6d1fb09b86ce7a0file-k3txo3v47y-Aug-29-2023-09-39-06-3041-AM.png)

### Formulaire d'un produit

Les métadonnées de vos produits propulsées par Trustt sont disponibles dans chacune de vos fiches produit 

![](https://support.trustt.io/hubfs/Knowledge%20Base%20Import/d33v4339jhl8k0.cloudfront.netdocsassets5e9458a304286364bc984077images63b7e892d0b6de7e3be2a74afile-jHxGwtPm8b-3.png)

- [Ressources Métier](https://support.trustt.io/fr/knowledge/ressources-m%C3%A9tier?hsLang=fr)
- [Configuration marque & programme ambassadeur](https://support.trustt.io/fr/knowledge/configuration-marque-programme-ambassadeur?hsLang=fr#main-content)

    - [Création marque et intégrations (Pas à pas)](https://support.trustt.io/fr/knowledge/configuration-marque-programme-ambassadeur?hsLang=fr#cr%C3%A9ation-marque-et-int%C3%A9grations-pas-%C3%A0-pas)
    - [Compte et configuration](https://support.trustt.io/fr/knowledge/configuration-marque-programme-ambassadeur?hsLang=fr#compte-et-configuration)
    - [Programme ambassadeur](https://support.trustt.io/fr/knowledge/configuration-marque-programme-ambassadeur?hsLang=fr#programme-ambassadeur)
- [Installation Trustt Reviews](https://support.trustt.io/fr/knowledge/installation-trustt-reviews?hsLang=fr#main-content)

    - [Shopify](https://support.trustt.io/fr/knowledge/installation-trustt-reviews?hsLang=fr#shopify)
    - [Wordpress](https://support.trustt.io/fr/knowledge/installation-trustt-reviews?hsLang=fr#wordpress)
    - [Prestashop](https://support.trustt.io/fr/knowledge/installation-trustt-reviews?hsLang=fr#prestashop)
    - [Magento](https://support.trustt.io/fr/knowledge/installation-trustt-reviews?hsLang=fr#magento)
- [Création campagne](https://support.trustt.io/fr/knowledge/cr%C3%A9ation-campagne?hsLang=fr#main-content)

    - [Concevoir sa campagne](https://support.trustt.io/fr/knowledge/cr%C3%A9ation-campagne?hsLang=fr#concevoir-sa-campagne)
    - [Paramétrer la campagne (premiers pas)](https://support.trustt.io/fr/knowledge/cr%C3%A9ation-campagne?hsLang=fr#param%C3%A9trer-la-campagne-premiers-pas)
    - [Cas particuliers campagne](https://support.trustt.io/fr/knowledge/cr%C3%A9ation-campagne?hsLang=fr#cas-particuliers-campagne)
    - [UGC de qualité et contenus créatifs](https://support.trustt.io/fr/knowledge/cr%C3%A9ation-campagne?hsLang=fr#ugc-de-qualit%C3%A9-et-contenus-cr%C3%A9atifs)
    - [Questions fréquentes - campagne](https://support.trustt.io/fr/knowledge/cr%C3%A9ation-campagne?hsLang=fr#questions-fr%C3%A9quentes-campagne)
    - [Créer une campagne évènement](https://support.trustt.io/fr/knowledge/cr%C3%A9ation-campagne?hsLang=fr#cr%C3%A9er-une-campagne-%C3%A9v%C3%A8nement)
- [Sélection des ambassadeurs](https://support.trustt.io/fr/knowledge/s%C3%A9lection-des-ambassadeurs?hsLang=fr#main-content)

    - [Sélection du panel](https://support.trustt.io/fr/knowledge/s%C3%A9lection-des-ambassadeurs?hsLang=fr#s%C3%A9lection-du-panel)
    - [Augmenter le nombre de candidatures](https://support.trustt.io/fr/knowledge/s%C3%A9lection-des-ambassadeurs?hsLang=fr#augmenter-le-nombre-de-candidatures)
- [Pilotage campagne](https://support.trustt.io/fr/knowledge/pilotage-campagne?hsLang=fr#main-content)

    - [Gestion des envois](https://support.trustt.io/fr/knowledge/pilotage-campagne?hsLang=fr#gestion-des-envois)
    - [Gestion des avis](https://support.trustt.io/fr/knowledge/pilotage-campagne?hsLang=fr#gestion-des-avis)
    - [Utiliser le CRM](https://support.trustt.io/fr/knowledge/pilotage-campagne?hsLang=fr#utiliser-le-crm)
    - [Données de campagne](https://support.trustt.io/fr/knowledge/pilotage-campagne?hsLang=fr#donn%C3%A9es-de-campagne)
    - [Fonctionnalités e-commerce](https://support.trustt.io/fr/knowledge/pilotage-campagne?hsLang=fr#fonctionnalit%C3%A9s-e-commerce)
    - [Emails et optins](https://support.trustt.io/fr/knowledge/pilotage-campagne?hsLang=fr#emails-et-optins)
- [Gestion des avis](https://support.trustt.io/fr/knowledge/gestion-des-avis?hsLang=fr#main-content)

    - [Gestion des avis](https://support.trustt.io/fr/knowledge/gestion-des-avis?hsLang=fr#gestion-des-avis)
- [Utiliser le CRM](https://support.trustt.io/fr/knowledge/utiliser-le-crm?hsLang=fr)

[![Chill listening crop-3](https://support.trustt.io/hs-fs/hubfs/Logo-simplifi%C3%A9-violet.png?width=24&height=24&name=Logo-simplifi%C3%A9-violet.png "Chill listening crop-3")](https://www.trustt.io/)

Copyright © 2026, Trustt