Tuto shopify Système de faux témoignages sur la page d’accueil

Nous allons apprendre à mettre un système de faux témoignages sur la page d’accueil de votre thème

Aperçu de ce que ca va donner:

Sans-titre-1

Attention ce Tuto est un peu plus complexe que les autres car vous allez devoir toucher à des portions de codes…

Faites donc extrêmement attention à ce que vous faites car vous risquez de péter tout votre site en cas de mauvaise manipulation !

Ca fout la pression hein? 😉 Bref vous êtes prévenu !

Allez courage ce n’est pas si compliqué si vous suivez tout à la lettre !

Installation

Pour que le tuto fonctionne correctement vous devez avoir un thème vous permettant de mettre un custom content HTML

Si votre thème ne possède pas de custom content html  tant pis pour vous… il reste un moyen de le faire mais demande une intervention technique de ma part sur votre boutique (contactez moi par mp pour plus d’informations)

Vous devez dans un premier temps copier/coller le code proposé dans votre bloc note ou tout autre éditeur de texte

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//dgeodev.com/css/carousel.css" media="screen">
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" media="screen">
<style>
 .container-testimonial { 
 position:relative;
 max-width:800px;
 margin:0 auto;
 min-height:180px;
 }
 .container-testimonial .carousel-inner > .item {
 width:100%;
 }
.tcb-simple-carousel{
 margin-top: 50px;
 padding:5px 15px;
 background:none;
 min-height:160px;
 max-width:800px;
 margin:0 auto; 
 text-align:center;
}
.tcb-simple-carousel h2 {
 margin-bottom:15px !important;
}
.tcb-simple-carousel blockquote { border:none; } .carousel-control2 { font-size:55px; color:#fff; display:block; ; } .carousel-control2.right { right: -75px; padding:0px 15px; height:65px; line-height:65px; position: absolute; top:50%; width:auto; left:auto; background:#222; } .carousel-control2.left { left: -75px; padding:0px 15px; height:65px; line-height:65px; position: absolute; top:50%; width:auto; right:auto; background:#222; } .carousel-control2.left:hover, .carousel-control2.right:hover, .carousel-control2.left:focus, .carousel-control2.right:focus { color:#fff; background:#444; } @media screen and (max-width: 800px) { .carousel-control2.left { left: -10px; } .carousel-control2.right { right: -10px; } } </style> <div class="container-testimonial"> <h2><center>Témoignages</center></h2><br> <div class="tcb-simple-carousel"> <div id="myCarousel" class="carousel slide"> <!-- Indicators --> <div class="carousel-inner"> <div class="item active"> <blockquote> <p class="temoignage1"></p> <small><i class="auteur1"></i></small> </blockquote> </div> <div class="item"> <blockquote> <p class="temoignage2"></p> <small><i class="auteur2"></i></small> </blockquote> </div> <div class="item"> <blockquote> <p class="temoignage3"></p> <small><i class="auteur3"></i></small> </blockquote> </div> <div class="item"> <blockquote> <p class="temoignage4"></p> <small><i class="auteur4"></i></small> </blockquote> </div> </div> </div> <div class="carousel-controls2"> <a class="carousel-control2 left" href="#myCarousel" data-slide="prev"><span class="fa fa-angle-left"></span></a> <a class="carousel-control2 right" href="#myCarousel" data-slide="next"><span class="fa fa-angle-right"></span></a> </div> </div> </div> <script> var temoignage1 = "Texte du témoignage 1"; var auteur1 = "Marie G. - Paris"; var temoignage2 = "Texte du témoignage 2"; var auteur2 = "Marie G. - Paris"; var temoignage3 = "Texte du témoignage 3"; var auteur3 = "Marie G. - Paris"; var temoignage4 = "Texte du témoignage 4"; var auteur4 = "Marie G. - Paris"; $(".temoignage1").text(temoignage1); $(".temoignage2").text(temoignage2); $(".temoignage3").text(temoignage3); $(".temoignage4").text(temoignage4); $(".auteur1").text(auteur1); $(".auteur2").text(auteur2); $(".auteur3").text(auteur3); $(".auteur4").text(auteur4); </script>

 

Vous allez trouver 8 variables qu’il faudra modifier à votre convenance

les zones entre guillemets avec les =

Ca donnera donc:

var temoignage1 = «  »votre texte du premier témoignage » »

var auteur1= «  »auteur du témoignage1 «  »

Faites les pour les 3 autres groupes de variables

Une fois que tout vos témoignage fictif sont fait rendez vous dans votre administration

Vous allez donc allez dans Themes -> Customize

Ensuite faite add section et Custom content ensuite copier/coller le code fourni dans la zone HTML

testi1 testi2

Il ne vous reste plus qu’a valider vos modifications et regarder si tout se passe correctement

Je vous rappelle que vous aller toucher des variables ! il faut donc impérativement que vous respectiez les guillemets !

 

Vous souhaitez me remercier et m’encourager à continuer mes tutos?

Alors n’hésitez pas à me faire un petit don même minime car c’est l’intention qui compte 😉

Je veux faire un don

12 commentaires sur “Tuto shopify Système de faux témoignages sur la page d’accueil

  1. Matthieu

    Salut Geoffrey,

    top ! Sauf que les longs commentaires sont tronqués sur les bords gauches et droits. Comment pourrait-on passer à la ligne automatiquement ?

    Autre question : y-t-il moyen d’insérer des images (des produits) ?

    Merci beaucoup d’avance 🙂

      1. Matthieu

        Merci mais ça ne change rien. Ou plus exactement j’ai remarqué que le problème ne se pose que pour la version « Desktop ». En version « Mobile » le texte passe bien automatiquement à la ligne.

      2. Diego

        Bonjour dgeo22,

        D’abord, merci pour tous tes tutos, ils sont excellents !

        Pour celui-ci, comme l’a dit Mathieu, les avis sont tronqués sur PC, mais sur mobile ils rentrent parfaitement. Tu dis de rajouter
        .container-testimonial .carousel-inner > .item {
        width:100%;
        padding:10px 25px;
        }

        Où dois-je le placer dans le code que tu as donné exactement ?

        Merci beaucoup ! 🙂

  2. Cedric

    Bonjour Geoffrey,

    Meme problème que cité un peu plus haut, le texte n’apparait pas, cependant:
    – le titre « Temoignages » apparait
    – j’ai écrit un long témoignage, de manière à faire modifier en auto la taille du bloc, ce qui se fait correctement, puisqu’à chaque changement de commentaires, je vois ma page bouger

    Une solution stp ?

    Theme Supply

  3. Shirley

    Bonjour,

    peut-on savoir où mettre ce bout de code svp 🙂

    .container-testimonial .carousel-inner > .item {
    width:100%;
    padding:10px 25px;
    }

    Merci pour tous ces tutos !

  4. Gaël

    Je viens d’essayer sur le thême brookly ( même sans modifier les messages et en laissant le même code que toi ) et tous les messages ( texte + auteur ) sont stack dans le même cadre ce qui en plus d’être horrible fait bug le carrousel puisque les messages sont déjà tous là dès le début, donc je voulais savoir si tu avais une solution, merci d’avance 🙂

Laisser un commentaire

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

*
*