Nous allons voir dans ce tutoriel comment réaliser un texte qui défile sur Shopify. Ce type de système est idéal pour faire ressortir une information qui doit être mémorisée par vos clients.

Vous pouvez voir le résultat sur la page d’accueil du site de démo ici: voir le site de démo

Comment mettre le système en place ?

Rendez-vous dans Boutique en ligne – Actions – Modifier le code et on va partir du principe que vous souhaitez mettre cette information sur toutes les pages. Maintenant cliquez sur le dossier Layout et ouvrez le fichier theme.liquid.

Le but du jeu et de trouver l’emplacement de votre choix. Je vous invite donc à regarder la vidéo pour savoir comment trouver les bons emplacements. De plus dans la vidéo je parle de la possibilité de placer ce système sur certains types de contenu comme la fiche produit par exemple. Sinon essayez de mettre des toto1, toto2, toto3 un peu partout dans ce fichier afin de déterminer le meilleur emplacement 😉

Voici le code à copier/coller:

<style>      
  .dg-hs { background:#333; margin:15px 0; padding:10px 0; overflow:hidden; }
  .dg-hs-inner { display:inline-block; white-space: nowrap; float:left; }
  .dg-hs-inner p { color:#FFF; margin:0 auto !important; }
  .dg-hs-inner p span { padding-right:20px; }
  .dg-hs-vertical { display:block; float:none; width:100%; text-align:center;}
</style>  

<div class="dg-hs">
  <div class="dg-hs-inner dg-hs-text-1">
    <p>
      <span>Mon super texte qui défile</span>
    </p>        
  </div>       
</div>

<script>      
  (function() {       
    function dgTextSlider(element, timer, start, direction) {
      
      const containerWidth = document.querySelector('.dg-hs').clientWidth;
      const containerHeight = document.querySelector('.dg-hs').clientHeight;
      const texteToScroll = document.querySelector(element);
      const texteToScrollWidth = document.querySelector(element).clientWidth;          
      let marginLeft = containerWidth;
      let marginTop = containerHeight;
      
      if(direction == "verticale") {             
        
        document.querySelector('.dg-hs').style.height = "40px";
        texteToScroll.classList.add("dg-hs-vertical");           
        texteToScroll.style.marginTop = marginTop +"px";
      
        let i = start;          
        setInterval(function(e) { 
          i++;
          texteToScroll.style.marginTop = (marginTop - i)+"px";
          if(texteToScroll.style.marginTop == "-"+containerHeight+"px") {
            i = 0;              
          }  
        }, timer); 
      }
      else {
        
        texteToScroll.style.marginLeft = marginLeft +"px";          
        let i = start;          
        setInterval(function(e) { 
          i++;
          texteToScroll.style.marginLeft = (marginLeft - i)+"px";
          if(texteToScroll.style.marginLeft == "-"+texteToScrollWidth+"px") {
            i = 0;              
          }  
        }, timer);            
      }                   
    }
    
    // selecteur, vitesse en milliseconde, decalage en px des textes à partir de la bordure, direction - rien ou mettre verticale (experimental)
    dgTextSlider(".dg-hs-text-1","15","0","");
    
    
  })();      
</script>

Comment personnaliser le fonctionnement ?

Je vous propose 4 options que nous allons détailler ! La seule portion de code qu’il va falloir modifier est la suivante:

dgTextSlider(".dg-hs-text-1","15","0","");

  • La 1ère option est le sélecteur que vous ne devez pas toucher,
  • La 2ème option est la vitesse en millisecondes,
  • La 3ème option est le degré d’espacement en pixel par rapport aux bordures du conteneur,
  • Et enfin la 4ème option est expérimentale pour passer au défilement vertical = mettez à l’intérieur des doubles guillemets le mot vertical ! Par contre si ca se passe mal faudra faire avec 😀

Attention à bien garder les doubles guillemets à l’ouverture et la fermeture de chaque option sinon ca sera la cata 😉

Code pour mettre une image à la place du texte (vu dans la vidéo):

<span><img src="urldelimage" alt=""/></span>

Et côté mise en forme on peut faire quelque chose ?

Oui bien sur 😉 mais cette partie étant assez complexe à expliquée par écrit je vous invite à visionner la vidéo ci-dessous:

Ce tutoriel existe aussi en vidéo

Merci de me laisser une petite note 😉
[Note moyenne de: 4.8 sur 4 votes]

Cet article a 14 commentaires

  1. Salut,

    Merci pour le tutoriel mais comment changer la taille et la police d’écriture ?
    Et comment faire pour le faire défiler uniquement sur la page d’accueil ?

    Merci d’avance.

    1. Hello,
      Pour grossir le texte il suffit de rajouter un font-size:valeur en px comme ceci : .dg-hs-inner p { color:#FFF; margin:0 auto !important; font-size:18px; } adapter la taille au besoin.
      Pour la condition que pour l’accueil… avant le code mettre ceci : {% if template == "index" %} et après le code mettre ceci : {% endif %}

  2. salut, quand je met l’affichage mobile le problème c’est que ça laisse la barre vide le temps que le texte défile et arrive sur l’écran au bout de 10 seconde comparé à l’affiche pc donc ya pas moyen de l’afficher tt de suite sur l’affiche mobile ? merci

    1. Hello, il faut tester directement sur mobile ou au moment de la simulation mobile de rafraichir la page pour bien tester le fonctionnement

  3. Bonjour, j’aimerais savoir si il était possible de nous donner le code ainsi que la marche a suivre pour avoir le « sur notre site vous aurez » avec le texte qui ce supprime qui en affiche un autre etc… ? svp ce serais vraiment cool merci a vous et merci pour vos Tuto hyper facile

    1. Hello 🙂 tape dans le moteur de recherche « barre dynamique » et tu le trouvera 😉

  4. Salut ! Merci beaucoup pour la video, je voulais savoir comment mettre en loop le texte ? Est ce que ce serais: animation: linear infinite ? Merci d’avance

    1. Hello, bin normalement ca loop naturellement 🙂

  5. BONJOUR comment faire pour insérer ce bout de code juste en dessous du 1er carrousel de la page d’accueil ? sur le theme speedfly ?

    1. Hello, il faut le mettre dans sections – slideshow.liquid tout en bas 😉

  6. Bonjour,
    J’ai voulu faire défiler des images uniquement sur la page d’accueil de mon site ( thème Début ). J’ai inséré le code dans la partie Slideshow.liquid. Mon image s’affiche, mais plus elle défile et plus elle s’agrandit ! Comment faire pour qu’elle ne s’agrandisse pas ?
    Merci 🙂

    1. Hello, oula c’est étrange ça je ne vois pas trop désolé c’est surement à cause du slideshow mais je ne saurais en dire plus navré 🙁

  7. Bonjour,

    Dans le tuto « comment faire un texte qui defile » je fais comment pour mettre le texte qui défile a l’infini stp ?

    1. Hello, il l’est en infini 🙂

Laisser un commentaire

Fermer le menu

Envie d'apprendre à Coder et Maitriser ton Thème Shopify  ?

Alors abonne-toi à la chaine et active la cloche pour ne pas louper l'arrivée des prochaines vidéos !

S'abonner à la chaine