Comment faire un texte qui défile sur Shopify

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 Mise en page (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.9 sur 9 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 28 commentaires

  1. KABB

    10 Sep 2020 Répondre

    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. Dgeo Dev

      11 Sep 2020 Répondre

      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. martin

    12 Sep 2020 Répondre

    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. Dgeo Dev

      13 Sep 2020 Répondre

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

  3. Ayoub

    15 Sep 2020 Répondre

    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. Dgeo Dev

      15 Sep 2020 Répondre

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

  4. Xavier

    1 Oct 2020 Répondre

    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. Dgeo Dev

      2 Oct 2020 Répondre

      Hello, bin normalement ca loop naturellement 🙂

  5. Yo

    15 Oct 2020 Répondre

    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. Dgeo Dev

      16 Oct 2020 Répondre

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

  6. Myriam

    19 Oct 2020 Répondre

    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. Dgeo Dev

      20 Oct 2020 Répondre

      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. louis

    22 Oct 2020 Répondre

    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. Dgeo Dev

      23 Oct 2020 Répondre

      Hello, il l’est en infini 🙂

  8. Mickael

    6 Fév 2021 Répondre

    hello, après avoir suivi votre tuto je remarque qu’il y a un petit espace entre mon header et la barre qui défile je souhaiterai qu’elle soit collé au header si possible. Comment puis-je y remédier ?
    Merci d’avance

    1. Dgeo Dev

      6 Fév 2021 Répondre

      Hello, espacements du thème. Faudrait leur demander également 🙂

  9. SARAH

    4 Mar 2021 Répondre

    Bonjour,
    pour le texte qui défile ,avec le thème motion , comment mettre le texte en dessous de la 1ère image d’acceuil , moi j’ai mis une vidéo.

    1. Dgeo Dev

      4 Mar 2021 Répondre

      Bonjour, le mieux et de trouver une section custom html et de mettre le code dedans. Ensuite placer la section ou bon vous semble 🙂

  10. tati

    9 Avr 2021 Répondre

    Bonjour ,

    Super ta video , merci beaucoup 🙂

    je n’arrive pas a trouver ou ta mis le tuto2, jai regarder la video pluiseur fois mais c trp petit pour lire ?

    1. Dgeo Dev

      10 Avr 2021 Répondre

      Hello et merci pour le com 🙂 désolé je n’ai pas compris la question… le tuto2 ?

  11. RACHID FELLAHI

    23 Avr 2021 Répondre

    Bonjour,
    Merci beaucoup pour cette vidéo magnifique.
    Est ce que vous pouvez nous montre comment rendre le dernier texte qui défile à une distance de 200px avec le premier…car le premier texte attend que le dernier termine avant qu’il soit commencer, j’espère que tu m’a compris
    meilleures salutations.

    1. Sakar

      16 Août 2023 Répondre

      Bonjour

      Avez-vous trouvé la réponse à votre question ?

      Parce que j’ai le même problème 🙂

  12. Muriel

    7 Juin 2023 Répondre

    Bonjour, merci pour cette vidéo, j’ai réussi à mettre un texte qui défile a l’emplacement (toto 1) et quand j’ai essayé les autres totos, les textes reste fixes et ne défilent pas. Pouvez-vous m’aider à corriger cela s’il vous plait ?
    Merci infiniment,
    Muriel

    1. Dgeo Dev

      12 Juin 2023 Répondre

      Hello, surement un bug javascript – le thème n’est peut être pas compatible 🙁 pourriez-vous leur demander peut être ? bonne jounrée

  13. tom

    13 Sep 2023 Répondre

    Bonjour,
    Merci beaucoup pour cette vidéo.
    Est ce que vous pouvez nous expliquer comment rendre le dernier texte qui défile à une distance de 200px avec le premier…car le premier texte attend que le dernier termine avant qu’il soit commencer, j’espère que vous m’avez compris.
    Salutations.

    1. Dgeo Dev

      18 Sep 2023 Répondre

      Hello, pas possible avec le code actuel et c’est pas spécialement recommandé de mettre une taille sur un élément car sur mobile cela risque de faire un peu n’importe quoi 🙁

  14. Zineb

    11 Fév 2024 Répondre

    Bonjour, comment l’utiliser dans un mail (accueil nouveau client sur site Shopify) ? J’ai réussi à changer la mise en forme mais le texte ne défile pas.
    Merci pour votre aide

    1. Dgeo Dev

      19 Fév 2024 Répondre

      Hello, oula impossible car c’est dédié aux sites. Un mail ne pourra pas avec d’effets à l’intérieur

Laisser un commentaire

Fermer le menu
×
×

Panier