La section Reviews avec 5 modes d'affichage, intégration Trustpilot/Google et personnalisation complète. Le système d'avis le plus complet disponible sur un thème Shopify.
Reviews
La section Reviews est l'un des atouts majeurs de Scale Theme. Elle permet d'afficher les avis clients sous 5 formes différentes, toutes alimentees par les mêmes blocs de contenu. Que vous vendiez des produits physiques, des services ou du digital, cette section vous permet de mettre en avant la preuve sociale de la manière la plus adaptée à votre marque.
Les 5 variantes en détail
1. Slider
Le mode Slider affiche les avis dans un carousel horizontal avec navigation par flèches et/ou pagination. C'est le mode par défaut et le plus polyvalent.
Quand l'utiliser :
- Sur la homepage pour un apercu rapide des avis
- Quand vous avez peu d'espace vertical disponible
- Pour une présentation dynamique et interactive
Réglages spécifiques au Slider :
| Réglage | Options | Description |
|---|---|---|
| Type de slider | CSS Scroll / Navigation | CSS Scroll = scroll natif tactile, Navigation = flèches + dots |
| Navigation | On / Off | Affiche les flèches prev/next |
| Pagination | On / Off | Affiche les dots ou la barre de progression |
| Autoplay | On / Off | Defilement automatique |
| Vitesse autoplay | 3-10 secondes | Intervalle entre chaque slide |
| Loop | On / Off | Revient au debut après le dernier slide |
2. Grid
Le mode Grid affiche tous les avis dans une grille structurée. Toutes les cartes ont la même hauteur dans chaque rangée.
Quand l'utiliser :
- Sur une page dédiée aux avis ou une landing page
- Quand vous avez beaucoup d'avis a montrer
- Pour un affichage structure et previsible
Réglages de visibilité (Grid et Masonry) :
Le mode Grid (et Masonry) possede des réglages de visibilité qui limitent le nombre d'avis affichés initialement, avec un bouton "Voir plus" :
| Réglage | Range | Description |
|---|---|---|
| Visibles sur mobile | 3-20 | Nombre d'avis affichés avant le bouton "Voir plus" sur mobile |
| Visibles sur tablette | 4-30 | Nombre d'avis affichés avant le bouton "Voir plus" sur tablette |
| Bouton "Voir plus" | On / Off | Affiche un bouton pour charger les avis restants |
| Style du bouton | Primary / Secondary / Tertiary | Style visuel du bouton "Voir plus" |
3. Masonry
Le mode Masonry crée une disposition en colonnes style Pinterest, où chaque carte à une hauteur différente selon la longueur du contenu. C'est le mode le plus visuellement dynamique.
Quand l'utiliser :
- Quand vos avis ont des longueurs tres différentes (courts + longs)
- Pour un design moderne et visuellement attractif
- Quand vous incluez des images dans certains avis
Taille de carte personnalisable (Masonry uniquement) :
En mode Masonry, chaque bloc d'avis individuel possede un réglage supplémentaire Taille de carte :
| Taille | Comportement |
|---|---|
| Auto | La hauteur s'adapte au contenu (défaut) |
| Small | Carte compacte, texte tronque si nécessaire |
| Medium | Taille intermediaire |
| Large | Carte plus grande, occupe plus d'espace vertical |
4. Trustpilot Embed
Le mode Trustpilot transforme la section en un widget style Trustpilot complet, avec le logo officiel, les étoiles vertes, et un header affichant la note moyenne et le nombre total d'avis.
Ce qui change en mode Trustpilot :
- Le header affiché automatiquement le logo Trustpilot, la note et le nombre d'avis
- Les étoiles deviennent vertes avec le style Trustpilot (carres verts avec étoile blanche)
- Les cartes adoptent le style visuel Trustpilot
- La plateforme est automatiquement définie sur Trustpilot
Quand l'utiliser :
- Si votre boutique à un profil Trustpilot actif
- Pour maximiser la crédibilité grace à la reconnaissance de la marque Trustpilot
- Sur les landing pages de vente ou la confiance est cruciale
5. Google Embed
Le mode Google fonctionne de la même manière que le mode Trustpilot, mais avec le style Google Reviews : logo Google, étoiles jaunes et style de carte Google.
Ce qui change en mode Google :
- Le header affiche le logo Google, la note et le nombre d'avis
- Les étoiles sont jaunes/dorees dans le style Google
- Le champ Author Info dans les blocs peut afficher "Local Guide", "Top Contributor", etc.
Quand l'utiliser :
- Si votre boutique à un profil Google Business actif
- Pour les commerces avec une presence locale forte
- Pour les boutiques qui reçoivent des avis via Google Shopping
Nombre de colonnes
Le nombre de colonnes affecte tous les modes (Slider, Grid, Masonry) et se configure séparément pour desktop, tablette et mobile.
- 2 colonnes : Avis longs et détaillés, sections avec images
- 3 colonnes (défaut) : Le plus polyvalent, bon équilibré
- 4 colonnes : Beaucoup d'avis courts, pages dédiées aux avis
- 5 colonnes : Mode Trustpilot/Google, effet "mur d'avis"
Styles de carte
Le style de carte définit l'apparence visuelle de chaque avis. Il s'applique à toutes les variantes.
- Flat (défaut) : Design minimaliste, les cartes se fondent dans l'arrière-plan
- Border : Séparation nette et professionnelle, idéal pour le B2B
- Shadow : Le plus impactant, parfait pour les landing pages de conversion
Personnalisation des cartes
Au-dela du style, vous disposez de plusieurs réglages pour ajuster l'apparence des cartes :
| Réglage | Range | Défaut | Description |
|---|---|---|---|
| Border radius | 0-30px | 8px | Arrondi des coins des cartes |
| Padding | 12-48px | 24px | Espacement interne des cartes |
| Gap | 0-60px | 20px | Espacement entre les cartes |
| Ratio image | Adapt / Carre / Portrait / Vertical / Paysage | Adapt | Ratio des images dans les cartes |
Étoiles et notes
Style d'étoiles
Trois styles d'étoiles sont disponibles, chacun adapte à un contexte différent :
| Style | Apparence | Idéal pour |
|---|---|---|
| Default | Étoiles classiques colorées selon votre palette | Design personnalisé, coherence avec votre marque |
| Trustpilot | Carres verts avec étoiles blanches | Integration Trustpilot, crédibilité maximale |
| Étoiles jaunes/dorees | Integration Google, reconnaissance universelle |
Réglages des étoiles
| Réglage | Options | Description |
|---|---|---|
| Afficher les notes | On / Off | Active/désactivé l'affichage des étoiles |
| Style | Default / Trustpilot / Google | Style visuel des étoiles |
| Taille | 12-28px | Taille des étoiles |
| Couleur | Accent 1 / Accent 2 / Foreground | Couleur des étoiles en mode Default |
Bloc Testimonial : configuration complète
Chaque avis est un bloc Testimonial (type "Review" dans l'éditeur). Vous pouvez ajouter jusqu'à 30 blocs par section. Voici le détail de chaque champ disponible.
Contenu de l'avis
| Champ | Type | Description |
|---|---|---|
| Note | Range 1-5 (pas de 0.5) | Nombre d'étoiles de l'avis. Permet les demi-étoiles (ex: 4.5/5) |
| Titre | Texte court | Titre optionnel de l'avis (ex: "Produit incroyable !") |
| Description | Richtext | Le contenu complet de l'avis, supporte le formatage (gras, italique) |
Informations de l'auteur
| Champ | Type | Description |
|---|---|---|
| Nom de l'auteur | Texte | Nom affiché sous l'avis (ex: "Emily B.") |
| Info auteur | Texte | Information supplémentaire : ville, "Acheteur vérifié", "Local Guide", etc. |
| Achat vérifié | Checkbox | Affiche un badge vert "Achat vérifié" à côté du nom |
Media (image ou video)
Chaque avis peut optionnellement inclure un media visuel :
| Champ | Type | Description |
|---|---|---|
| Type de media | None / Image / Video | Type de media a afficher dans la carte |
| Image | Image picker | Image produit, photo du client, etc. |
| Video | Video picker | Video témoignage du client |
Options de carte par avis
| Champ | Type | Description |
|---|---|---|
| Taille du titre | 50-150% | Ajuste la taille du titre de cet avis spécifiquement |
| Taille de carte | Auto / Small / Medium / Large | Taille de la carte en mode Masonry uniquement |
Intégration plateforme (mode générique)
Meme en modes Slider, Grid ou Masonry, vous pouvez activer l'integration d'une plateforme (Trustpilot ou Google) pour ajouter le header avec logo et note moyenne.
| Réglage | Description |
|---|---|
| Plateforme | None / Trustpilot / Google |
| Afficher le header plateforme | Active le header avec logo, note et nombre d'avis |
| Note de la plateforme | 1-5 (par pas de 0.1) - la note affichée dans le header |
| Nombre d'avis | Texte libre (ex: "2,547") - affiché dans le header |
| Lien plateforme | URL vers votre page Trustpilot ou Google |
Effet Tilt (modes Slider uniquement)
L'effet Tilt incline légèrement les cartes pour un rendu plus dynamique et visuellement unique. Il est disponible uniquement en mode Slider (inclut Trustpilot et Google).
| Réglage | Options | Description |
|---|---|---|
| Activer le tilt | On / Off | Active l'effet d'inclinaison |
| Style | Fan / Alternate | Fan = toutes inclinees dans le même sens, Alternate = alternance gauche/droite |
| Angle | 1-5 degres | Intensité de l'inclinaison |
| Tilt sur mobile | On / Off | Applique aussi l'effet sur mobile |
Fonction "Lire plus"
Pour les avis longs, la section propose une fonction "Lire plus" qui tronque le texte après un certain nombre de caractères.
| Réglage | Range | Défaut | Description |
|---|---|---|---|
| Activer Lire plus | On / Off | On | Tronque les textes longs |
| Limite | 50-300 caractères | 120 | Nombre de caractères avant la troncature |
| Texte "Lire plus" | Texte | "Read more" | Texte du lien pour developper |
| Texte "Lire moins" | Texte | "Read less" | Texte du lien pour réduire |
Navigation du slider
En mode Slider (y compris Trustpilot et Google), vous disposez de nombreux réglages pour personnaliser la navigation.
Styles de pagination
Trois styles de pagination sont disponibles :
| Style | Description |
|---|---|
| Dots | Points classiques, le point actif est mis en avant |
| Progress | Barre de progression horizontale |
| Fraction | Affichage "2 / 7" (slide actuel / total) |
Position de la navigation
| Position | Description |
|---|---|
| Overlay | Les flèches sont superposees sur les cartes |
| External | Les flèches sont à l'exterieur du carousel |
| Integre pagination | Les flèches sont intégrées à côté de la pagination |
Personnalisation des flèches
| Réglage | Options | Description |
|---|---|---|
| Fond des flèches | Transparent / Background / Foreground / Accent 1 / Accent 2 | Couleur de fond du bouton de flèche |
| Couleur de l'icône | Foreground / Background / Accent 1 / Accent 2 | Couleur de la flèche elle-même |
| Taille de l'icône | 16-32px | Taille de la flèche |
| Forme du bouton | Cercle / Arrondi / Carre | Forme du bouton contenant la flèche |
| Afficher au survol | On / Off | Les flèches n'apparaissent qu'au survol de la section |
Bloc Heading
La section Reviews accepte un bloc Heading (limité a 1) qui s'affiche au-dessus des avis. Ce bloc offre des options avancees :
| Champ | Description |
|---|---|
| Sous-titre | Texte court au-dessus du titre (ex: "Témoignages") |
| Titre | Titre principal avec support richtext (gras, italique) |
| Style du texte gras | Default / Couleur / Surbrillance - comment le texte en gras est mis en forme |
| Niveau de titre | H1 / H2 / H3 / H4 - pour le SEO |
| Taille du titre | 50-200% - taille relative du titre |
| Séparateur | Ligne décorative sous le titre (largeur, hauteur, couleur configurables) |
Réglages globaux de la section
| Catégorie | Réglages |
|---|---|
| Largeur | Narrow / Normal / Full Padded / Full |
| Padding | Top/Bottom desktop (0-100px), Top/Bottom mobile (0-100px) |
| Couleurs | Palette de couleurs de la section |
| Visibilite | Cacher sur desktop / Cacher sur mobile |
| Séparateurs | Séparateur SVG haut et bas (wave, curve, etc.) |
| Animations | Animation d'entree, stagger pour les cartes |
Exemples de configuration par type de boutique
Boutique mode / lifestyle
- Layout : Masonry, 3 colonnes
- Style de carte : Shadow
- Media : Images dans 50% des avis (photos portees)
- Étoiles : Default, couleur accent-1
- Heading : "Ce que nos clientes disent"
- Border radius : 16px pour un look moderne
Boutique tech / SaaS
- Layout : Grid, 3 colonnes
- Style de carte : Border
- Plateforme : Trustpilot
- Étoiles : Style Trustpilot
- Heading : Avec note moyenne et logo Trustpilot
- Border radius : 4px pour un look professionnel
Boutique locale / artisanale
- Layout : Slider, 2-3 colonnes
- Style de carte : Shadow
- Plateforme : Google
- Info auteur : Ville + "Local Guide"
- Tilt : Active, style Fan
- Heading : "Nos clients temoignent"
Landing page de conversion
- Layout : Trustpilot (variante)
- 5 colonnes desktop pour un effet "mur de preuves"
- Tilt : Active pour dynamiser visuellement
- Autoplay : Active (5 secondes)
- Beaucoup d'avis (15-20) pour un effet de volume
Bonnes pratiques
Section connexe : Reviews Carousel
En plus de cette section, Scale Theme propose une section dédiée Reviews Carousel optimisée pour un bandeau de témoignages defilants de manière continue. Voir Reviews Carousel.
Prochaines étapes
- **Reviews Carousel** — Créez un bandeau de témoignages défilants en continu
- **Social Proof** — Ajoutez des indicateurs de preuve sociale sur vos pages produit
- **Trust Badges** — Renforcez la confiance avec des badges de confiance visuels
- **Guide de la homepage** — Intégrez la section Reviews dans une page d'accueil optimisée