Rendre l’app Product Review plus sexy

Nous allons rendre un peu plus sexy le rendu de l’app product review

Exemple ci-dessous et liste des changements:

  • Ajout d’un encadré gros
  • Changement couleur des étoiles
  • Avis sur fond blanc et sur 3 colonnes
  • Espacements modifiés
  • Ajout condition pour les smartphone pour passer en 1 colonne

product-review

1. Se rendre sur l’admin et cliquer sur « Online store »

2. Cliquer sur Action -> Edit HTML et CSS

3. Trouvez le dossier « Assets » et cliquez dessus cela va dérouler les fichiers qui le compose

4. Cliquer sur le fichier theme.scss.liquid, timber.scss.liquid, default.scss.liquid ou style.scss.liquid selon le votre thème et rendez-vous tout en bas du fichier 

5. Copier/Coller le code ci-dessous et cliquez sur le bouton « Save »

.spr-container { 
 border-color: #ECECEC;
 background: #eee;
}
.spr-review {
 width: 31%;
 margin: 0 1% !important;
 min-height: 250px;
 display: inline-block;
 float: left;
 padding: 20px 25px !important;
 border-top: 1px solid #DFDFDF;
 border-top: 1px solid rgba(0,0,0,0.1);
 background: #fff;
 margin-bottom: 25px !important;
}
.spr-icon {
 color:#ffbb00;
}
.spr-pagination {
clear:both;
}
#shopify-product-reviews .spr-review-header-title {
  display:block;
  clear:both;
  float:none;
}
@media(max-width:800px){
 .spr-review {
 float:none;
 width: 100%;
 min-height:auto;
 margin:0 !important;
 margin-bottom: 25px !important;
 }
}

6. Petit conseil pour éviter de se retrouver avec un espace blanc, rendez vous sur votre app product review et changez les settings pour afficher un nombre paire… je préconise 12 avant d’utiliser la pagination

 

14 commentaires sur “Rendre l’app Product Review plus sexy

  1. ghali

    bonjour,
    j aimerais améliorer mon Shopify je débute et toujours pas de clients

    – je souhaite mettre des fonctions en +, comme une vidéo de présentation du produit (peut on reprendre des vidéos trouvé sur le net)
    – et mettre aussi un plugging retargueting Gratuit ! et ou le trouver

    – modifier le prix ‘ au lieu de’ ,et mettre un %
    mettre une fenêtre X à

  2. Shirley

    Bonjour,

    tout d’abord un ÉNORME merci pour tous ces tutos … J’en ai ajouté plusieurs sur ma boutique et tout fonctionne #1 … Mis à part un …
    “RENDRE L’APP PRODUCT REVIEW PLUS SEXY”

    Premièrement je suis sous le thème Brooklyn …

    – Dois-je enlever les modifications faites sur l’app review (Couleur etc) avant d’installer le le code ?
    – Je n’ai pas la page theme.scss ou style.scss … J’ai seulement theme.scss.liquid … Est-ce la même chose ?

    Quand j’installe le code que vous avez donné, en bas du fichier theme.scss.liquid … l’app reste pareil comme elle était, mais duplique les commentaires en 3 colonnes à droite en dessous de la description du produit …

    Donc je me retrouve avec deux fois les mêmes commentaires et une série de commentaires compactés dans un tableau trop étroit qui ne se met pas à gauche mais qui reste à droite sous le decsription du produit …

    Avec vous une idée du problème car j’aimerais tellement que ce soit dans un gros encadré et en 3 colonnes comme sur votre image 😉

    Merci à vous.

  3. Chris

    Un grand merci pour ton aide avec l’ensembles de tes tutos de codes Geoffrey. Cela fait plaisir!

    Si au passage tu connais une solution intelligente pour intégrer un guide de taille personnalisé par produit ce serait le top. J’ai tenté différentes appli plus ou moyen gratuite et me retrouve coincé avec un bouton texte en anglais impossible à modifier même en hard !important.
    J’ai également tenté en solo avec ce tuto: https://gist.github.com/drabbytux/12a37931325e4ffa457a9b481b89e3d4
    mais malgré l’apparition du bouton celui-ci ne réagis pas en cliquant dessus (beaucoup de commentaire subissant le même sort que moi).
    PLEASE BE MY SAVIOR! 😉

    1. dgeo22

      Salut et merci pour le com
      Il est possible de créer un code pour remplacer un terme ou une phrase donc au besoin remettre l’app qui fonctionnait le mieux et me demander d’intervenir sur cet élément
      Bonne soirée

  4. Jean-Luc

    Salut Fred,
    comment faire pour avoir le même résultat ?
    Je suis sur le même thème « supply » et j’ai bien trois colonnes mais elles sont tout en longueur 🙁
    Et y’a des blancs, genre parfois une ligne où il y a que deux reviews, puis la ligne d’en dessous trois… Je pense que c’est du à la longueur des avis 🙁
    Aussi, sur supply, le descriptif ne prend pas la largeur de toute la page, y’ a-t-il moyen de faire en sorte que le description prenne toute cette largeur et commence donc en dessous des images ?
    Aussi, je trouve pratique et plus impactant que les avis ne soient pas tout en bas !! Sur le thème Elecro, par exemple, il y a sous les images deux onglets, un pour la description du produit et l’autre pour les avis !
    C’est possible de faire un truc comme ça sous Supply ?
    Merci pour tes réponses et félicitations pour ton travail 🙂

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*
*