Comment personnaliser l’app Product Reviews Shopify pour un rendu pro en 2026

Tu as installé l’app Product Reviews de Shopify sur ta boutique — c’est un excellent choix. Elle est gratuite, légère, rapide à charger et parfaitement intégrée à l’écosystème Shopify. Mais soyons honnêtes : le design par défaut est vraiment minimaliste. Trop minimaliste. Des avis en liste verticale, des étoiles grises, aucune mise en forme… difficile d’inspirer confiance à tes visiteurs avec ça.

La bonne nouvelle, c’est qu’avec quelques lignes de CSS, tu peux complètement transformer l’apparence de tes avis clients. Dans ce tutoriel, je vais te montrer exactement comment passer d’un rendu basique à un affichage en 3 colonnes, avec des étoiles jaunes, un fond blanc par avis, et une adaptation parfaite sur mobile.

Pas besoin de toucher au code Liquid, pas besoin de compétences avancées. Juste du CSS, et c’est tout.

Pourquoi garder l’app Product Reviews malgré son design par défaut

Avant de plonger dans le code, une chose importante : beaucoup de marchands Shopify abandonnent Product Reviews pour des alternatives payantes comme Judge.me ou Loox, uniquement à cause du design. C’est dommage, car cette app officielle a des avantages réels.

D’abord, elle est entièrement gratuite et maintenue directement par Shopify — pas de frais mensuels cachés. Ensuite, elle est ultra-légère : contrairement à certaines apps d’avis tierces qui chargent des scripts lourds et ralentissent ton temps de chargement, Product Reviews a un impact minimal sur les performances. Si tu t’es donné du mal pour optimiser la vitesse de ta boutique, c’est un point non négligeable.

Enfin, ses données structurées sont bien gérées pour le SEO : les étoiles peuvent apparaître dans les résultats Google, ce qui améliore ton taux de clic.

Le seul vrai problème, c’est l’esthétique. Et ça, on peut le régler en 5 minutes.

Ce qu’on va obtenir

Voici les modifications que le code CSS va apporter :

• Les avis s’affichent sur 3 colonnes (au lieu d’une liste verticale)
• Chaque avis est sur un fond blanc, avec une légère bordure discrète
• Les étoiles passent en jaune (#ffbb00) pour être bien visibles
• Le conteneur global prend un fond gris clair (#F5F5F5) pour délimiter la section
• Sur mobile, les avis s’affichent en colonne unique automatiquement
• La pagination est proprement gérée avec un clear: both

Le résultat est beaucoup plus professionnel et rassure davantage les visiteurs qui arrivent sur tes fiches produits.

Étape 1 — Accéder à l’éditeur de thème Shopify

La méthode varie légèrement selon que tu utilises un thème OS 2.0 ou un thème Legacy, mais le principe est le même.

Pour un thème OS 2.0 (Dawn, Speedfly, Refresh…) :

1. Dans ton admin Shopify, va dans Boutique en ligne → Thèmes
2. Sur ton thème actif, clique sur Actions → Modifier le code
3. Dans la colonne de gauche, ouvre le dossier Assets
4. Cherche le fichier base.css ou theme.css (selon ton thème)
5. Rends-toi tout en bas du fichier

Pour un thème Legacy :

1. Même navigation : Boutique en ligne → Thèmes → Actions → Modifier le code
2. Dans Assets, cherche theme.scss.liquid, timber.scss.liquid ou style.scss.liquid
3. Va tout en bas du fichier

Étape 2 — Ajouter le CSS de personnalisation

Copie-colle le bloc de code suivant à la fin du fichier CSS de ton thème :

/* ==============================
   Personnalisation Product Reviews
   ============================== */

/* Conteneur global des avis */
.spr-container {
  border-color: #ECECEC;
  background: #F5F5F5 !important;
}

/* Chaque avis individuel — disposition en 3 colonnes */
.spr-review {
  width: 31%;
  margin: 0 1% !important;
  min-height: 250px;
  display: inline-block;
  float: left;
  padding: 20px 25px !important;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  background: #fff;
  margin-bottom: 25px !important;
}

/* Couleur des étoiles en jaune */
.spr-icon {
  color: #ffbb00;
}

/* Pagination : nettoyer le float */
.spr-pagination {
  clear: both;
}

/* Titre de l'avis : pleine largeur */
#shopify-product-reviews .spr-review-header-title {
  display: block;
  clear: both;
  float: none;
}

/* Responsive mobile : passer en colonne unique */
@media (max-width: 800px) {
  .spr-review {
    float: none;
    width: 100%;
    min-height: auto;
    margin: 0 !important;
    margin-bottom: 25px !important;
  }
}

Une fois collé, clique sur le bouton Save (ou Enregistrer) en haut à droite.

Étape 3 — Ajuster le nombre d’avis affichés

Un conseil pratique pour éviter un espace blanc en bas de ta section avis : dans les paramètres de l’app Product Reviews, configure le nombre d’avis affichés pour qu’il soit un multiple de 3.

Par exemple : 6, 9, ou 12 avis par page. Ainsi, les 3 colonnes se remplissent proprement sans laisser de cellules vides sur la dernière ligne.

Pour accéder aux paramètres : Apps → Product Reviews → Settings.

Personnaliser les couleurs à ton identité visuelle

Le CSS fourni utilise des valeurs par défaut neutres et professionnelles, mais tu peux facilement les adapter à ta charte graphique :

La valeur #ffbb00 pour les étoiles peut être remplacée par n’importe quelle couleur. Si ta boutique utilise un thème vert, tu peux mettre #4CAF50. Pour un thème rouge/rouge corail, essaie #FF5722.

Le fond #F5F5F5 du conteneur peut être remplacé par #ffffff pour un fond blanc pur, ou par la couleur de fond de ta section selon ton thème.

La bordure rgba(0, 0, 0, 0.1) est intentionnellement subtile. Si tu veux quelque chose de plus visible, utilise #DEDEDE à la place.

Aller plus loin avec le CSS

Pour les marchands qui veulent pousser encore plus loin la personnalisation, voici quelques ajouts optionnels :

/* Ajouter une ombre douce sur chaque avis */
.spr-review {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border-radius: 8px;
}

/* Agrandir légèrement les étoiles */
.spr-icon {
  font-size: 18px;
}

/* Mettre le nom du reviewer en gras */
.spr-review-header-byline strong {
  font-weight: 700;
  color: #333;
}

Ces ajouts donnent un look encore plus moderne, proche des apps d’avis premium — sans payer un centime.

Problèmes fréquents et solutions

Les styles ne s’appliquent pas : vérifie que tu as bien enregistré le fichier CSS. Vide aussi le cache de ton navigateur (Ctrl+Shift+R ou Cmd+Shift+R) avant de vérifier le résultat.

Les avis s’affichent sur une seule colonne même sur desktop : certains thèmes ont des règles CSS plus spécifiques qui écrasent les tiennes. Essaie d’ajouter !important sur les propriétés width et float du sélecteur .spr-review.

L’espace blanc en bas de la grille : comme expliqué plus haut, assure-toi que le nombre d’avis affichés est un multiple de 3 dans les paramètres de l’app.

Sur mobile les colonnes ne passent pas en une seule : vérifie que la media query est bien présente dans ton fichier et que la valeur 800px correspond au breakpoint mobile de ton thème. Certains thèmes utilisent 768px ou 767px.

Conclusion

En moins de 10 minutes et avec une vingtaine de lignes de CSS, tu viens de transformer une section d’avis basique en un affichage professionnel en 3 colonnes. Tes visiteurs voient maintenant les retours de tes clients de façon claire, lisible et rassurante — exactement ce qu’il faut pour convertir.

L’app Product Reviews reste l’une des meilleures options pour les boutiques Shopify qui veulent afficher des avis clients sans sacrifier les performances. Le design, c’est juste une question de CSS.

---

Tu veux un thème Shopify qui inclut déjà tout ça ? Découvre Speedfly, le thème Shopify français pensé pour les e-commerçants francophones.