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: 5 sur 1 votes]

Laisser un commentaire

Fermer le menu

meilleure chaine youtube dropshipping shopify

Envie de tout savoir sur le Dropshipping & 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