Comment Créer un Carrousel d’Avis sur Shopify

Nous allons voir dans ce tutoriel comment mettre en place un slider d’avis avec images sur la page d’accueil d’une boutique Shopify. Ce système va alterner en une image et une zone de texte et vous pourrez mettre autant de slide que vous souhaitez.

Comment mettre en place le système ?

On va créer une section que vous pourrez administrer directement via les sections de votre page d’accueil.

Rendez-vous dans boutique ne ligne – Actions – Modifier le code – Dossier Sections cliquez sur Ajouter une section, nommez la « dg-slider-reviews » et mettez le code ci-dessous dedans en supprimant le contenu d’exemple automatiquement créé. En gros vous créez la section, vous faites un ctrl + A – sup et vous collez le code suivant:

<div class="dg-slider-reviews" id="dg-slider-reviews">
  {% for block in section.blocks %}
  <div class="dg-slide-review">
    <img src="{{ block.settings.image | img_url: "600x" }}" alt="" />
  </div>
   <div class="dg-slide-review">
     <div class="dg-slide-review-box">
       <div class="dg-slide-review-title"><strong>{{ block.settings.name }}</strong><span>Vérifié</span></div>
       <div class="dg-slide-review-text">{{ block.settings.text }}</div>
     </div>
  </div>
 
  {% endfor %}
  
</div>

{% schema %}
{
  "name": "Carrousel d'avis",
  "class": "section-dg-slider-reviews",	
  "blocks" : [
     {
      "type": "review",
      "name": {
        "fr": "Avis"        
      },
      "settings": [
		{
          "type": "image_picker",
          "id": "image",
          "label": "Image"
        },
        {
          "type": "text",
          "id": "name",
          "label": "Nom"
        },
        {
          "type": "richtext",
          "id": "text",
          "label": "Texte"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Carrousel d'avis",
      "category": "Dgeo dev - Tutoriels"      
    }
  ]
}
{% endschema %}

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" integrity="sha256-UK1EiopXIL+KVhfbFa8xrmAWPeBjMVdvYMYkTAEv/HI=" crossorigin="anonymous" />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css" integrity="sha256-4hqlsNP9KM6+2eA8VUT0kk4RsMRTeS7QGHIM+MZ5sLY=" crossorigin="anonymous" />
<script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<script defer>
  
  let nombresImagesPc = 3;
  let nombresImagesTablet = 2;
  let nombresImagesMobile = 2;

  $('#dg-slider-reviews').slick({      
    autoplay: false,
    autoplaySpeed: 4000,   
    arrows : true,
    centerMode: true,
    dots: false,        
    slidesToShow: nombresImagesPc,
    slidesToScroll: nombresImagesPc, 
    responsive: [
      {
        breakpoint: 900,
        settings: {
          slidesToShow: nombresImagesTablet,
          slidesToScroll: nombresImagesTablet
          
        }
      },
      {
        breakpoint: 480,
        settings: {
          slidesToShow: nombresImagesMobile,
          slidesToScroll: nombresImagesMobile
          
        }
      }
    ]    
  });

</script>
<style>
  
  .dg-slider-reviews .slick-list {
    padding:1rem 13% !important;
  }
  .dg-slide-review {
    padding:14px;
    
  }
  .dg-slide-review img {
    max-width:100%;
    border-radius:5px;  
    box-shadow:0 0 14px rgba(0,0,0,0.2);
  }
  .dg-slide-review-box {
    padding:14px;
    background:#FFF;
    border-radius:5px;  
    box-shadow:0 0 14px rgba(0,0,0,0.2);
  }
  .dg-slide-review-title {
   display:flex; 
    align-items:center;
    margin-bottom:14px;
  }
  .dg-slide-review-title span {   
    margin-left:7px;
    padding:2px;
    font-size:11px;
    background:#05B77A;
    color:#FFF;
  }
 
  .dg-slider-reviews button {
    width:70px;
    height:70px;
    background:rgba(0,0,0,0.2);
    border-radius:50%;
    z-index:999;
  }
  .dg-slider-reviews button.slick-prev {
    left:35px;
  }
  .dg-slider-reviews button.slick-prev:before {
    display:none;
  }
  .dg-slider-reviews button.slick-prev:after {
    content: "";
    position: absolute;
    top: 18px;
    left: 26px;
    width: 34px;
    height: 34px;
    border-left: 3px solid #fff;
    display: inline-block;
    border-top: 3px solid #fff;
    transform: rotate(-45deg);
  }
  .dg-slider-reviews button.slick-next {
    right:35px;
  }
  .dg-slider-reviews button.slick-next:before {
    display:none;
  }
  .dg-slider-reviews button.slick-next:after {
    content: "";
    position: absolute;
    top: 18px;
    right: 26px;
    width: 34px;
    height: 34px;
    border-left: 3px solid #fff;
    display: inline-block;
    border-top: 3px solid #fff;
    transform: rotate(135deg);
  }
  .dg-slider-reviews button.slick-prev:hover, 
  .dg-slider-reviews button.slick-prev:focus,
  .dg-slider-reviews button.slick-next:hover, 
  .dg-slider-reviews button.slick-next:focus {
    background:rgba(0,0,0,0.2);
  }
  @media screen and (max-width:600px) {
    .dg-slider-reviews .slick-list {
      padding:0 5% !important;
    }
    .dg-slide-review-box {
      padding:10px;
      font-size:14px;
    }
    .dg-slide-review {
      padding:5px;    
    }
    .dg-slider-reviews .slick-slide {
      margin-left:1rem; 
    }
    .dg-slider-reviews button {
      display:none !important; 
    }
  }
  
</style/>

Maintenant vous verrez apparaitre une nouvelle section qui s’appellera Carrousel d’avis dans la Catégorie Tutoriels Dgeo Dev. Il ne vous reste plus qu’a rajouter des images et des textes d’avis réel de vos clients !

Côté options

Vous pouvez changer les chiffres assez parlant afin d’afficher un certains nombres d’avis visibles par slide selon les supports utilisés:

carrousel slider image fit track shopify

Attention: les avis fictifs ne sont pas autorisés par la loi ! il est donc impératif que vous mettiez de vrais avis clients que vous récolterez via une application comme product reviews, loox ou ryviu  !

Disclaimer: Je ne suis en aucun cas responsable d’une mauvaise utilisation du code fourni dans ce tutoriel.

Ce tuto existe également en vidéo

Bon tuto à tous !

Merci de me laisser une petite note 😉
[Note moyenne de: 5 sur 7 votes]

Besoin d'aide ?

Vous avez un problème pour faire fonctionner ce tutoriel ou vous avez un besoin spécifique ?
Nous pouvons le faire pour vous ! pour ce faire merci de prendre contact avec notre équipe.

En savoir plus

🤗 Vous souhaitez me remercier pour mes Tutos ?

Cliquez sur le bouton ci-dessous pour m'encourager à continuer 😉

Payer un Café à Dgeo Dev

Besoin de déléguer votre SAV ?

Si vous avez besoin d'une personne pour gérer votre SAV j'ai la perle rare 😉 contactez moi en MP ou cliquez sur le bouton ci-dessous:

Je veux déléguer mon SAV

🤗 Vous souhaitez me remercier pour mes Tutos ?

Cliquez sur le bouton ci-dessous pour m'encourager à continuer 😉

Payer un Café à Dgeo Dev

Cet article a 44 commentaires

  1. Youva

    11 Avr 2021 Répondre

    Comment le faire afficher sur la page produit

    1. Dgeo Dev

      12 Avr 2021 Répondre

      Hello, pas possible désolé

    2. Lquid

      26 Juil 2021 Répondre

      Rajoute un -> {% section ‘dg-slider-reviews’ %} dans product.liquid.

      1. Raph

        5 Août 2021 Répondre

        hello, ça ne marche pas c’est normal ? J’ai pourtant fait un copié collé

  2. Sam

    14 Avr 2021 Répondre

    Bonjour Dgeo

    Merci pour ce tuto vraiment top ! Une petite question peut on changer le background du carrousel ( pas les box avec le texte) et également ajoute un titre général ?

    Merci beaucoup pour ton travail !

  3. Paul

    27 Avr 2021 Répondre

    Merci pour ce tuto, je me demandais s’il est possible de modifié la couleur du « verifié » ?

    1. Dgeo Dev

      28 Avr 2021 Répondre

      Hello, oui je l’explique dans la vidéo 😉

  4. Patrick

    14 Août 2021 Répondre

    Hello. merci pour ce tuto. j’ai juste un petit souci sous supply, l’encart contenant nom et txt se trouve sur la photo et pas à côté. je voudrai donc déplacer l’encart txt+nom au bas de la photo pour éviter qu’il soit sur la tête des personnes. quels sont les coordonnées à changer? j’ai fait qq essais mais sans réussir. Merci beaucoup

    1. Dgeo Dev

      17 Août 2021 Répondre

      Hello, étrange pourrais-je avoir un lien pour constater le soucis svp? si confidentiel me le MP sur Facebook 😉

        1. Dgeo Dev

          2 Sep 2021 Répondre

          Ok je vois dans ce cas rajouter dans la partie css ceci : .dg-slide-review img { max-width:100%; } dans le theme.scss.css tout en bas

  5. Clement

    17 Août 2021 Répondre

    Merci pour le tuto super ! J’aimerai savoir comment ajouter un titre au desus du carrousel ? Merci

    1. Dgeo Dev

      17 Août 2021 Répondre

      Hello et merci pour le com 🙂 il suffit de rajouter dans le snippet et avant le code un truc du genre <..h2..>Titre<../h2..> supprimer les ..

  6. Theo

    17 Sep 2021 Répondre

    Merci pour le tuto ! Est ce possible de mettre des vidéos à la place de photos ?

    1. Dgeo Dev

      17 Sep 2021 Répondre

      Hello, oui c’est possible en mettant un iframe ou une balise video

      1. theo

        17 Sep 2021 Répondre

        Merci pour ta réponse, peux tu me dire a quel endroit mettre ma balise ?

        1. Dgeo Dev

          19 Sep 2021 Répondre

          A la place de la balise image

  7. luca

    12 Oct 2021 Répondre

    Salut et merci pour ce que tu partage avec nous, peux tu me dire comment modifier le mot « vérifié » dans la case verte, pour a traduire en anglais « check »
    Merci pour ton aide.

    1. Dgeo Dev

      14 Oct 2021 Répondre

      Hello, c’est directement dans le html 🙂 fait un ctrl + F et recherche le mon vérifié et change le 😉

      1. luca

        14 Oct 2021 Répondre

        Dans quelle section ? j’ai essayé dans la section dg-slider-reviews.liquid mais je ne trouve pas.

        1. Dgeo Dev

          15 Oct 2021 Répondre

          Il est pourtant la…

  8. Luca

    19 Oct 2021 Répondre

    Merci oui je l’ai trouver.. je ne sais pas pourquoi il ne s’affichait pas les premiere fois. Encore merci pour ton aide

  9. Messan

    27 Oct 2021 Répondre

    CC merci pour le tuto mais mon carrousel ne marche pas

    1. Dgeo Dev

      28 Oct 2021 Répondre

      Hello, peut être que le thème n’est pas compatible. Faudrait voir avec leur support.

      1. Messan

        28 Oct 2021 Répondre

        Merci pour ton retour

  10. Pascal

    2 Jan 2022 Répondre

    Bonjour et merci beaucoup pour le tuto. J’aurais voulu que la police de caractères dans les avis clients soient plus petite mais je n’ai pas réussi à la réduire. Est-ce possible et, si c’est le cas, comment peut on le faire ?

    1. Dgeo Dev

      3 Jan 2022 Répondre

      Hello, il faut dans la partie .dg-slide-review { padding:14px; } rajouter une taille du genre : .dg-slide-review { padding:14px; font-size:15px; }

      1. Pascal

        3 Jan 2022 Répondre

        Merci beaucoup, cela a très bien marché
        Bon début d’année !

        1. Dgeo Dev

          3 Jan 2022 Répondre

          Super et meilleurs vœux également.

  11. pedro

    21 Jan 2022 Répondre

    hello, je suis sur le theme dawn shopify, pas de probleme avec l’intégration hormis le fait que ca donne des images et texte qui se suivent, pas un carrousel. une idée ?

    1. Dgeo Dev

      21 Jan 2022 Répondre

      Hello, hum non pas d’idée désolé. Il faudrait ouvrir la console dans chrome – outils – outils pour développeur et de regarder dans console si ill y a des erreurs rouges.

  12. Mathias

    13 Avr 2022 Répondre

    Cool mais ça ne fonctionne pas avec le nouveau thème par défault de shopify: Dawn

    1. Dgeo Dev

      14 Avr 2022 Répondre

      Hello, j’essaierai de l’adapter dés que je me libère un peu de temps 🙂

  13. Eudes

    12 Déc 2022 Répondre

    Cool mais je n’arrive pas à voir le code à copier

    1. Dgeo Dev

      13 Déc 2022 Répondre

      Hello, effectivement un bug temporaire c’est corrigé ! les codes s’afficheront désormais correctement 🙂

  14. BOUALAM

    28 Jan 2023 Répondre

    Bonjour, comment fait-on pour enlever l’image et en laissant seulement les avis qui défilent.
    Nos clients ne sont pas forcément pour le droit d’image sur nos site 🙂

    1. Dgeo Dev

      9 Fév 2023 Répondre

      Bonjour, tout simplement en supprimant la balise

  15. Mathïs

    14 Juin 2023 Répondre

    Merci pour le tuto ! j’aimerais savoir comment régler le pas de défilement des avis, car là quand je défile ça sépare l’image du témoignage et donc ça crée un décalage entre les images et les témoignages clients. Ce problème est présent sur mobile seulement

    1. Dgeo Dev

      15 Juin 2023 Répondre

      Hello et merci pour le com 🙂 qu’entendez-vous par le pas de défilement ?

      1. Guigz

        16 Juin 2023 Répondre

        J’ai le même soucis, si on supprime la balise d’image, ca crée un vide entre les deux carte d’avis, je souhaiterais recoller les deux blocs d’avis écris au lieu qu’il y ai un trou

        1. Dgeo Dev

          26 Juin 2023 Répondre

          Hello, pourrais-je avoir un exemple ? (URL qui ne sera pas diffusée) car je ne vois pas trop ^^ Merci

  16. Sam

    27 Juil 2024 Répondre

    Salut à toi, même après plusieurs années, tes tutos sont toujours utile 🙂 De plus, je voulais savoir si vous pouviez me dire comment faire pour que la box contenant l’avis client soit centrée horizontalement dans la section. Merci d’avance

Laisser un commentaire

Fermer le menu
×
×

Panier