L’app Product Reviews de Shopify a tout pour elle. Gratuite. Légère. Compatible SEO. Le seul truc qui fait fuir les gens, c’est son design par défaut, qui ressemble à une page web de 2003. Des avis empilés en liste verticale, des étoiles grises, zéro hiérarchie visuelle.
Résultat : la moitié de mes clients la désinstallent et payent 15 à 25€ par mois pour Judge.me ou Loox, juste pour un truc esthétique qui se règle en vingt lignes de CSS.
Dans ce tuto, je te donne le code exact que j’utilise sur les boutiques que j’accompagne pour transformer Product Reviews en quelque chose qui ressemble enfin à 2026. Avis en 3 colonnes, étoiles jaunes, fond blanc par avis, responsive mobile inclus. Zéro app à payer.
Pourquoi tu ne devrais pas migrer sur une app payante
Je vois le réflexe à chaque audit. Le marchand voit un design moche, il pense “il me faut une vraie app”, il installe Judge.me, et hop, 15€ supplémentaires par mois sur la facture.
Sur 12 mois, ça fait 180€ pour un truc esthétique. Sur deux ans, 360€. Et ce n’est qu’une app parmi les dix autres qu’il accumule en suivant la même logique.
Product Reviews fait le job sur les trois trucs qui comptent vraiment pour des avis clients. Elle stocke les avis dans la base Shopify (donc pas de risque de perdre tes données si tu changes d’app un jour). Elle injecte le balisage Schema.org Review qui permet à Google d’afficher tes étoiles dans les résultats de recherche, ce qui boost ton taux de clic sans changer de position. Et elle ne charge pas 200 ko de JavaScript externe, contrairement aux solutions tierces qui plombent ton Core Web Vitals.
Tout ce qui lui manque, c’est l’enrobage visuel. Et ça, c’est du CSS. Pas une raison de payer un abonnement à vie.
Le rendu visé
Ce que ton tuto va produire en quelques minutes :
Les avis passent en grille 3 colonnes au lieu de la liste verticale par défaut. Chaque avis a son propre encadré sur fond blanc avec une bordure discrète, ce qui crée une vraie hiérarchie visuelle. Les étoiles passent en jaune (#ffbb00) au lieu du gris fade par défaut, parce qu’une étoile jaune sur fond blanc, c’est ce que l’œil cherche. Le conteneur global a un fond gris très clair pour délimiter la zone. Sur mobile, le tout repasse automatiquement en colonne unique.
Bref, ça ressemble enfin à une section d’avis sur un site qui inspire confiance.
Étape 1 : ouvrir l’éditeur de code de ton thème
Le chemin dépend de la version de ton thème. Voici les deux cas.
Sur un thème OS 2.0 (Dawn, Refresh, Sense, Spotlight, Speedfly et la plupart des thèmes récents) : tu vas dans Boutique en ligne, puis Thèmes, tu cliques sur Actions à côté de ton thème actif, et tu choisis Modifier le code. Dans la colonne de gauche, tu ouvres le dossier Assets et tu cherches base.css ou theme.css selon ton thème. Tu descends tout en bas du fichier.
Sur un thème Legacy (Brooklyn, Debut, Narrative, ou tout thème antérieur à 2022) : même navigation pour ouvrir l’éditeur de code. Dans Assets, tu cherches theme.scss.liquid, timber.scss.liquid ou style.scss.liquid. Tu descends en bas du fichier.
Si tu hésites entre plusieurs fichiers CSS, prends celui qui contient le plus de lignes. C’est lui qui pilote le style global.
Étape 2 : coller le CSS
Voici le bloc que tu colles à 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;
}
}
Tu cliques sur Enregistrer en haut à droite. Recharge ta page produit en mode incognito ou avec un hard refresh (Ctrl+Shift+R sur Windows, Cmd+Shift+R sur Mac) pour voir la mise à jour sans interférence du cache.
Étape 3 : régler le nombre d’avis sur un multiple de 3
Si tu fais cette étape avant la précédente, tu vas voir un trou bizarre en bas de ta section avis. Logique : tu affiches 10 avis répartis sur 3 colonnes, ça fait 3 lignes pleines et une dernière ligne avec un seul avis qui flotte dans le vide.
Va dans Apps, ouvre Product Reviews, puis Settings. Mets le nombre d’avis affichés par page sur un multiple de 3. Le plus joli compromis selon moi : 6 pour les fiches produit qui ont peu d’avis (en attendant que ça remplisse), 9 dès que tu passes la barre des 20 avis. Au-delà, 12 commence à faire long et tue le scroll.
Adapter les couleurs à ta charte
Le code que je t’ai donné utilise des valeurs neutres qui passent sur 80% des marques. Mais si ton univers est marqué (sport, beauté premium, niche colorée), tu vas vouloir adapter.
Les étoiles : remplace #ffbb00 par le code hexa de ta couleur principale. Vert nature #4CAF50. Corail tendance #FF5722. Bleu marine premium #1A2B4F. Or #D4AF37. Reste sur des couleurs assez saturées pour que les étoiles ressortent à l’œil.
Le fond du conteneur : #F5F5F5 est gris très clair, ce qui crée un contraste subtil avec le fond blanc des avis. Si ton site a déjà beaucoup de gris, passe en #ffffff pour fond blanc pur, ou prends une teinte de ta charte très désaturée.
La bordure : rgba(0, 0, 0, 0.1) est volontairement discrète. Si tu veux marquer plus le séparateur, passe à #DEDEDE ou rgba(0, 0, 0, 0.18).
Le bonus pour aller plus loin
Si tu veux te rapprocher du look des apps payantes type Loox, ajoute ces trois règles supplémentaires :
/* Ombre douce sur chaque avis */
.spr-review {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
border-radius: 8px;
}
/* Étoiles légèrement plus grosses */
.spr-icon {
font-size: 18px;
}
/* Nom du reviewer en gras lisible */
.spr-review-header-byline strong {
font-weight: 700;
color: #333;
}
L’ombre crée une profondeur qui fait moderne. Le border-radius arrondit les coins, ce qui colle aux design contemporains. Les étoiles à 18px ressortent mieux sans devenir massives. Et le gras sur le nom du reviewer donne plus de poids à la preuve sociale.
Avec ces trois règles en plus, tu as un rendu indistinguable des apps payantes pour quelqu’un qui regarde sans inspecter le code.
Les trois problèmes qui reviennent
Tes styles ne s’appliquent pas du tout. Cause numéro un : le cache de ton navigateur. Hard refresh d’abord. Cause numéro deux : tu as collé le CSS dans le mauvais fichier (un fichier non chargé par ton thème). Vérifie en ouvrant l’inspecteur Chrome sur ta page, onglet Sources, et regarde quel fichier CSS est effectivement servi.
Les avis restent en une seule colonne sur desktop. Ton thème a une règle CSS plus spécifique qui écrase la tienne. Ajoute !important derrière width: 31% et float: left. Si ça ne suffit pas, augmente la spécificité du sélecteur : body .spr-review ou .template-product .spr-review.
Le breakpoint mobile ne déclenche pas. Certains thèmes utilisent 768px ou 767px comme limite mobile/desktop au lieu de 800px. Ouvre Chrome DevTools, passe en mode mobile, et ajuste la valeur dans la media query.
Le mot de la fin
L’app Product Reviews de Shopify n’est pas le problème. Son design par défaut, oui. Et c’est un problème qui se règle une fois pour toutes en collant le bloc CSS de ce tuto dans ton thème.
Tu gardes ton outil gratuit, léger, SEO-friendly. Tu obtiens un rendu qui inspire confiance. Et tu économises l’abonnement mensuel que tu allais filer à Judge.me ou Loox pour un truc esthétique. À la place, mets ces 15€ par mois dans des pubs ou du contenu, ça t’apportera nettement plus.
Tu veux un thème Shopify qui inclut déjà des sections avis natives et bien designées sans avoir besoin de toucher au CSS ? Regarde Speedfly, le thème Shopify français pensé pour la conversion.
Pour aller plus loin
Le thème Shopify que j’utilise sur toutes mes boutiques
Pour transformer ces principes en boutique rentable, il faut un thème Shopify taillé pour la conversion. Speedfly est le thème que j’utilise sur mes propres boutiques et celles de mes 800+ élèves : vitesse, design premium, sections TikTok natives. 197€ paiement unique, licence à vie, 3 boutiques.
Si tu veux d’abord valider ta niche avant d’investir, récupère le guide 101 niches rentables 2026 : c’est gratuit, PDF dans ta boite mail en 2 minutes.
