Shopify : afficher la note et les avis Trustpilot sans app

Nous travaillons depuis plusieurs mois sur l’optimisation de boutiques Shopify et nous souhaitons partager notre approche pour intégrer les avis Trustpilot de manière performante et économique.

Les avis clients sont essentiels pour la conversion d’un site e-commerce, car ils rassurent les visiteurs et augmentent la confiance. Cependant, les apps Trustpilot traditionnelles injectent des scripts lourds qui ralentissent votre site et coûtent cher en abonnement mensuel.

Ce tutoriel vous explique comment afficher votre note Trustpilot de manière native sur Shopify, en utilisant Cloudflare Workers, Shopify Flow et Liquid.

Le Problème des Apps Shopify Classiques

La plupart des solutions de l’app store de Shopify fonctionnent ainsi :

Vous installez une app.
L’app injecte un script JS sur toutes vos pages.
Ce script fait des appels API au chargement de la page pour afficher un widget.

Les inconvénients :

Performance : Le navigateur du client doit télécharger et exécuter du code supplémentaire.
CLS (Cumulative Layout Shift) : Les widgets apparaissent souvent après le chargement, décalant le contenu.
Coût : Un abonnement mensuel souvent injustifié pour une simple fonctionnalité d’affichage.

La Solution : Cloudflare Worker + Shopify Flow

L’idée est de déporter la logique de récupération des avis en dehors du navigateur du client. Nous allons utiliser un Cloudflare Worker pour scraper la donnée et Shopify Flow pour l’automatiser.

L’Architecture

Cloudflare Worker : un petit script serveur qui va lire la page Trustpilot de votre entreprise et extraire la note (TrustScore), le nombre d’avis et les 20 derniers avis.
Shopify Flow : une automatisation qui se déclenche tous les jours, appelle notre Worker, et enregistre le résultat dans des Métachamps (Metafields) Shopify.
Liquid : votre thème affiche simplement la valeur du métachamp. Zéro requête externe au chargement de la page !

Étape 1 : Le Scraper (Cloudflare Worker)

Nous avons développé un micro-service sur Cloudflare Workers. C’est rapide, et gratuit (jusqu’à 100 000 appels par mois) et performant.

Le script effectue les actions suivantes :

Il reçoit une requête sécurisée par un token.
Il télécharge le code HTML de votre page Trustpilot.
Il analyse le contenu pour trouver la note. Nous utilisons une méthode robuste qui cherche d’abord dans les données JSON structurées (__NEXT_DATA__) injectées par Trustpilot (plus fiable que le HTML brut), avec un fallback sur des expressions régulières si nécessaire.
Il retourne un JSON propre : { "note": 4.8, "nombre_avis": 1250 }.

// Extrait simplifié du worker
const nextDataMatch = html.match(/<script id="__NEXT_DATA__" type="application\/json">(.*?)<\/script>/);
if (nextDataMatch) {
  const jsonData = JSON.parse(nextDataMatch[1]);
  note = jsonData.props.pageProps.businessUnit.trustScore;
  nombreAvis = jsonData.props.pageProps.businessUnit.numberOfReviews;
}

Étape 2 : L’Automatisation (Shopify Flow)

Pas besoin de serveur pour lancer ce script. Shopify Flow (l’outil d’automatisation gratuit de Shopify) peut le faire pour nous.
Note sur les forfaits Shopify : L’action « Send HTTP request » dans Shopify Flow n’est pas disponible sur le forfait Basic. Vous devez être sur le forfait Shopify (« Grow ») ou supérieur pour utiliser cette fonctionnalité.

Voici comment le configurer pas à pas :

1. Créer un nouveau workflow

Allez dans Apps > Shopify Flow.
Cliquez sur Create workflow.
Cliquez sur Select a trigger.

2. Configurer le déclencheur (Trigger)

Cherchez et sélectionnez « Scheduled time ».
Configurez-le pour se lancer tous les jours (ex: à 08:00 AM).
Cela permet de mettre à jour votre note quotidiennement sans action de votre part.

3. Appeler le Scraper (Action 1)

Cliquez sur le bouton (+) pour ajouter une action.
Cherchez « Send HTTP request ».
Remplissez les champs comme suit :
HTTP Method : GET
URL : https://trustpilot-scraper.******.workers.dev?url=https://fr.trustpilot.com/review/votresite.com
- Remplacez votresite.com par votre domaine Trustpilot.
Headers :
- Key : Authorization
- Value : Bearer my-secret-token (utilisez le même token que celui configuré dans Cloudflare).
Body : Laissez vide.
On client error (4XX response) : Ignore
On server error (5XX or 429 response) : Ignore

4. Vérifier la réponse (Condition)

Ajoutez une Condition après la requête HTTP.
Configurez :
Variable : sendHttpRequest.status
Règle : Égal à 200
Cela garantit que le worker a bien répondu avant de modifier vos metafields.

5. Parser le JSON (Action « Run code »)

Dans la branche « Then » (Si la condition est vraie), ajoutez une action « Run code » pour parser le JSON retourné.

Define inputs :

query {
  sendHttpRequest {
    body
  }
}

Define outputs :

type Output {
  rating: Float!
  reviewCount: Int!
  reviews: String!
}

Write code :

export default function main(input) {
  const data = JSON.parse(input.sendHttpRequest.body);

  // Convert reviews array to JSON string for metafield
  const reviewsJson = JSON.stringify(data.reviews);

  return {
    rating: data.rating,
    reviewCount: data.review_count,
    reviews: reviewsJson
  };
}

6. Mettre à jour les Metafields

Après l’action « Run code », ajoutez trois actions « Update shop metafield » :

Metafield 1 : Note (Rating)

Champ méta : Sélectionnez ou créez Trustpilot Rating au niveau du Shop (namespace: custom, key: trustpilot_rating)
Type : Decimal
Value : {{runCode.rating}}

Metafield 2 : Nombre d’avis (Review Count)

Champ méta : Sélectionnez ou créez Trustpilot Review Count (namespace: custom, key: trustpilot_review_count)
Type : Integer
Value : {{runCode.reviewCount}}

Metafield 3 : Liste des avis (Reviews)

Champ méta : Sélectionnez ou créez Trustpilot Reviews (namespace: custom, key: trustpilot_reviews)
Type : JSON
Value : {{runCode.reviews}}

7. Activer le workflow

Cliquez sur « Turn on workflow » en haut à droite. Votre boutique se mettra désormais à jour automatiquement chaque jour !
Voici le flow Shopify complet :

Configuration de la Sécurité (Secrets)

Pour éviter que n’importe qui ne lance votre scraper, il est crucial de protéger votre Worker avec un token.

1. Côté Cloudflare (Worker) :
Dans votre terminal, lancez la commande suivante pour définir votre token secret (par exemple mon_super_token_secret) :

npx wrangler secret put AUTH_TOKEN

Le code du worker pourra alors vérifier ce token via env.AUTH_TOKEN.

2. Côté Shopify (Flow) :
Dans l’action « Send HTTP request », ajoutez simplement le header suivant en remplaçant par votre token :

Key : Authorization
Value : Bearer mon_super_token_secret

Ainsi, seul votre Shopify pourra déclencher le scraping.
Dépannage : Si vous obtenez une erreur 401 Unauthorized ou si le workflow échoue, vérifiez que :
Vous avez bien exécuté la commande npx wrangler secret put AUTH_TOKEN.
Le token saisi dans cette commande est exactement le même que celui mis dans Shopify Flow (attention aux espaces !).
Vous avez bien redéployé le worker après avoir ajouté le secret (parfois nécessaire).

Étape 3 : L’Affichage (Liquid)

C’est là que la magie opère pour la performance. Dans votre thème (header, footer, fiche produit), vous avez juste à écrire du Liquid standard :

<div class="c-main-rating">
  <span class="c-main-rating__score">{{ shop.metafields.custom.trustpilot_rating }} / 5</span>
  <span class="c-main-rating__reviews">{{ shop.metafields.custom.trustpilot_review_count }} avis</span>
</div>

Le serveur Shopify injecte la valeur directement dans le HTML généré. Aucun délai, aucun script tiers, aucun impact sur le Core Web Vitals.

Afficher la liste des avis avec style Trustpilot

Si vous avez configuré le metafield trustpilot_reviews, voici comment afficher les avis avec un design professionnel similaire à Trustpilot.

Étape 1 : Ajouter le CSS

Ajoutez ce CSS dans votre fichier de styles (par exemple assets/theme.css ou dans une balise <style>) :

.c-trustpilot-reviews {
  display: grid;
  gap: 1.5rem;
  margin: 2rem 0;
}

.c-review {
  padding: 1.5rem;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
}

.c-review__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.c-review__stars {
  width: 100px;
  height: 20px;
  display: block;
}

.c-review__author {
  font-weight: 600;
  color: #191919;
  font-size: 0.875rem;
}

.c-review__title {
  font-size: 1rem;
  font-weight: 600;
  color: #191919;
  margin: 0.5rem 0;
  line-height: 1.4;
}

.c-review__text {
  color: #191919;
  line-height: 1.6;
  margin: 0.75rem 0;
  font-size: 0.9375rem;
}

.c-review__meta {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  color: #6b7280;
  font-size: 0.8125rem;
  margin-top: 0.75rem;
}

.c-review__date {
  color: #6b7280;
}

.c-review__verified {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: #00b67a;
  font-weight: 500;
}

.c-review__verified::before {
  content: "✓";
  font-weight: bold;
}

Étape 2 : Code Liquid pour afficher tous les avis

{% if shop.metafields.custom.trustpilot_reviews %}
  {% assign reviews = shop.metafields.custom.trustpilot_reviews.value %}

  <div class="c-trustpilot-reviews">
    {% for review in reviews %}
      <div class="c-review">
        <div class="c-review__header">
          <div class="c-review__author">{{ review.author }}</div>
          {% if review.rating %}
            <img 
              src="https://cdn.trustpilot.net/brand-assets/4.1.0/stars/stars-{{ review.rating }}.svg" 
              alt="{{ review.rating }} étoiles sur 5"
              class="c-review__stars"
              width="100"
              height="20"
              loading="lazy"
            >
          {% endif %}
        </div>

        {% if review.title != blank %}
          <h3 class="c-review__title">{{ review.title }}</h3>
        {% endif %}

        {% if review.text != blank %}
          <p class="c-review__text">{{ review.text }}</p>
        {% endif %}

        <div class="c-review__meta">
          {% if review.date %}
            {% assign date_parts = review.date | split: "-" %}
            {% assign year = date_parts[0] %}
            {% assign month = date_parts[1] %}
            {% assign day = date_parts[2] %}
            {% assign formatted_date = day | append: " " | append: month | append: " " | append: year | date: "%d %B %Y" %}
            <time class="c-review__date" datetime="{{ review.date }}">{{ formatted_date }}</time>
          {% endif %}

          {% if review.verified %}
            <span class="c-review__verified">Achat vérifié</span>
          {% endif %}
        </div>
      </div>
    {% endfor %}
  </div>
{% endif %}

Option alternative : Afficher uniquement les avis 4★ et 5★

{% if shop.metafields.custom.trustpilot_reviews %}
  {% assign reviews = shop.metafields.custom.trustpilot_reviews.value %}
  {% assign filtered_reviews = reviews | where_exp: "review", "review.rating >= 4" %}

  {% if filtered_reviews.size > 0 %}
    <div class="c-trustpilot-reviews">
      {% for review in filtered_reviews %}
        <div class="c-review">
          <div class="c-review__header">
            <div class="c-review__author">{{ review.author }}</div>
            {% if review.rating %}
              <img 
                src="https://cdn.trustpilot.net/brand-assets/4.1.0/stars/stars-{{ review.rating }}.svg" 
                alt="{{ review.rating }} étoiles sur 5"
                class="c-review__stars"
                width="100"
                height="20"
                loading="lazy"
              >
            {% endif %}
          </div>

          {% if review.title != blank %}
            <h3 class="c-review__title">{{ review.title }}</h3>
          {% endif %}

          {% if review.text != blank %}
            <p class="c-review__text">{{ review.text }}</p>
          {% endif %}

          <div class="c-review__meta">
            {% if review.date %}
              {% assign date_parts = review.date | split: "-" %}
              {% assign year = date_parts[0] %}
              {% assign month = date_parts[1] %}
              {% assign day = date_parts[2] %}
              {% assign formatted_date = day | append: " " | append: month | append: " " | append: year | date: "%d %B %Y" %}
              <time class="c-review__date" datetime="{{ review.date }}">{{ formatted_date }}</time>
            {% endif %}

            {% if review.verified %}
              <span class="c-review__verified">Achat vérifié</span>
            {% endif %}
          </div>
        </div>
      {% endfor %}
    </div>
  {% endif %}
{% endif %}

Tips : Formatage de la date selon la locale

Le filtre date: « %d %B %Y » de Liquid utilise automatiquement la locale configurée dans Shopify. Si votre boutique est en français, vous obtiendrez « 29 octobre 2025 ». Si elle est en anglais, vous obtiendrez « 29 October 2025 ».

Pour forcer une locale spécifique indépendamment des paramètres de la boutique, vous pouvez créer un snippet personnalisé avec une traduction manuelle des mois.

Bonus : Le JSON-LD pour le SEO

Pour que Google affiche ces belles étoiles dans les résultats de recherche (Rich Snippets), vous devez inclure ces données dans votre balisage structuré (Schema.org).

Voici comment l’intégrer proprement. Pour le thème Horizon, ouvrez le fichier snippets/meta-tags.liquid et ajoutez ce code tout en bas :

{% if shop.metafields.custom.trustpilot_rating and shop.metafields.custom.trustpilot_reviews %}
  {% assign reviews = shop.metafields.custom.trustpilot_reviews.value %}

  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Organization",
    "name": "{{ shop.name }}",
    "url": "{{ shop.url }}",
    "aggregateRating": {
      "@type": "AggregateRating",
      "ratingValue": "{{ shop.metafields.custom.trustpilot_rating }}",
      "reviewCount": "{{ shop.metafields.custom.trustpilot_review_count }}",
      "bestRating": "5",
      "worstRating": "1"
    },
    "review": [
      {% for review in reviews limit: 10 %}
      {
        "@type": "Review",
        "author": {
          "@type": "Person",
          "name": "{{ review.author }}"
        },
        "datePublished": "{{ review.date }}",
        "reviewBody": "{{ review.text | escape }}",
        "name": "{{ review.title | escape }}",
        "reviewRating": {
          "@type": "Rating",
          "ratingValue": "{{ review.rating }}",
          "bestRating": "5",
          "worstRating": "1"
        }
      }{% unless forloop.last %},{% endunless %}
      {% endfor %}
    ]
  }
  </script>
{% endif %}

Cela permet d’associer officiellement la note à votre organisation aux yeux des moteurs de recherche, sans dépendre d’un widget lent.

Bonnes Pratiques et Considérations Légales

Scraping responsable

Cette solution utilise le scraping de pages publiques de Trustpilot. Voici les bonnes pratiques à respecter :

Ce qui rend cette approche acceptable :

Fréquence raisonnable : 1 requête par jour (via Shopify Flow) est largement acceptable
User-Agent réaliste : Le Worker utilise un User-Agent de navigateur standard
IPs distribuées : Cloudflare Workers utilisent plusieurs IPs, évitant tout pattern suspect
Données publiques : Vous ne scrapez que des informations publiquement accessibles sur votre propre profil

Risques potentiels :

Trustpilot pourrait modifier la structure HTML de leurs pages (nécessiterait une mise à jour du Worker)
En cas de scraping trop fréquent ou abusif, Trustpilot pourrait bloquer l’accès

Recommandations :

Gardez la fréquence à 1 fois par jour maximum
Surveillez les logs de votre Worker pour détecter d’éventuelles erreurs
Si vous avez un fort volume, envisagez l’API officielle Trustpilot

Pour la plupart des boutiques e-commerce, la solution présentée ici (1 requête/jour) est largement suffisante et sans risque.

Étape	Technologie	Rôle	Avantage
1. Scraping	Cloudflare Worker	Récupère la note et les avis depuis Trustpilot	Contourne les scripts lourds côté client
2. Automatisation	Shopify Flow	Déclenche le scraping tous les jours	Mise à jour automatique sans maintenance
3. Stockage	Metafields Shopify	Stocke les données (JSON) dans Shopify	Accès instantané aux données (Backend)
4. Affichage	Liquid & CSS	Affiche la note et les étoiles	Rendu HTML natif, 0 Layout Shift
5. SEO	JSON-LD (Schema.org)	Structure les données pour Google	Affiche les étoiles dans les résultats de recherche

Conclusion

Cette approche présente des avantages majeurs :

Performance maximale : Pas d’app qui alourdit le front-end.
SEO Friendly : Le contenu est dans le HTML initial.
Économique : Pas d’abonnement mensuel à une app tierce.
Fiable : La mise à jour est asynchrone. Si Trustpilot est lent ou down, votre site reste rapide et affiche la dernière valeur connue.

C’est un excellent exemple de la puissance de l’architecture « Headless » ou découplée, même au sein d’un thème Shopify classique.

Notre approche chez Prestarocket

Chez Prestarocket, nous utilisons un seul Worker Cloudflare pour toutes les boutiques que nous gérons. Cela nous permet de :

Déployer rapidement : Une fois le Worker configuré, l’intégration sur une nouvelle boutique prend quelques minutes
Mutualiser les développements : Le même endpoint peut être utilisé sur Shopify, PrestaShop, ou toute autre plateforme e-commerce
Maintenir facilement : Une seule base de code à maintenir pour tous nos clients
Évolutivité : Ajouter de nouvelles fonctionnalités (cache, analytics, etc.) bénéficie à tous les projets

Cette approche multi-plateforme illustre parfaitement comment les solutions modernes (Workers, APIs) permettent de créer des composants réutilisables et performants, indépendamment de la stack technique du site.

Bonus, nous avons la même approche pour récupérer la note et les avis Avis Vérifiés.