Comment Faire Défiler des Chiffres au Scroll sur Shopify

Nous allons voir dans ce tutoriel comment faire un système de chiffres qui s’auto-incrémentent au moment ou l’internaute arrive sur cette section. Cet effet est très tendance pour afficher le nombres de clients satisfait et d’autres informations chiffrées.

Comment fonctionne le système ?

Vous allez devoir créer une section HTML spécifique sur votre thème et au moment ou le client va scroller et arriver sur cette section. Alors des chiffres vont partir de 0 et arriver à une valeur que vous aurez choisie.

Comment le mettre en place ?

Partie HTML

Rendez-vous dans la personnalisation de votre thème et essayez de trouver une section Custom HTML ou Liquid personnalisé et mettez le code ci-dessous tel quel:

<section class="sectionNumbers">
<div class="sectionNumbers__item">
  <div class="sectionNumbers__number number1"></div>
  Clients satisfaits
</div>
<div class="sectionNumbers__item">
  <div class="sectionNumbers__number number2"></div>
  Nombre de commandes  
</div>
<div class="sectionNumbers__item">
  <div class="sectionNumbers__number number3"></div>
  Autres
</div>
</section>

Nous supposons que vous allez mettre 3 zones de chiffres dans une section ! Vous pouvez au besoin rajouter un:

<div class="sectionNumbers__item">
  <div class="sectionNumbers__number number4"></div>
  textes...
</div>

En changeant bien évidemment le number3 par 4, 5, 6 etc…

Partie CSS

Besoin de modifier le design ? dans ce cas rendez-vous dans Boutique en ligne – Actions – Modifier le code. Trouvez le dossier Ressources (Assets) et un fichier base.css, theme.css, style.css ou autre fichier .css que votre thème utilise

Mettez-vous tout en bas et copiez/collez le code suivant:

.sectionNumbers {  
  text-align:center; 
}
@media screen and (min-width: 768px) {
  .sectionNumbers {  
    width:100%; 
    display:flex;
    align-items:center;
    justify-content:space-around;
  }
}

.sectionNumbers__item {
  padding:25px;
  font-size:21px;
  min-width:28px;
}
.sectionNumbers__item p {
  margin-top:1rem;
}
.sectionNumbers__number {  
  font-size:61px;
  font-weight:bold;
}

Partie Javascript

Dans le même fichier trouvez cette fois ci le même type de nomenclature mais avec un .js et copiez/collez le code ci-dessous:


(function() {
  function incrementNumber(node,nb) {

    let sectionNumbers = document.querySelector('.sectionNumbers');   
if(!sectionNumbers) return;
    let sectionCounter = 0;
    let numbers = document.querySelector("."+node);

    let n = nb;
    let cpt = 0; 
    let delay = 1000; 
    let delta = Math.ceil((delay * 15000) / n);

    function countdownNumbers() {
      numbers.innerHTML = ++cpt;
      if( cpt < n ) { 
        setTimeout(countdownNumbers, numbers);
      }
    }

    document.addEventListener('scroll', function() {
      sectionCounter++;        
      if(sectionCounter == 1) {
        setTimeout(countdownNumbers, numbers);
      }
    }), {passive:true};
  }
  setTimeout(function(){ 
    incrementNumber("number1", 156);
    incrementNumber("number2", 456);
    incrementNumber("number3", 678);
  }, 2000);
})();

Fonctionnement du système

Vous devez et pouvez uniquement modifier les choses suivantes:

incrementNumber("number1", 156);
incrementNumber("number2", 456);
incrementNumber("number3", 678);

La on suppose que vous n’avez que 3 zones de chiffres ! supprimez ou ajoutez-en selon vos besoins.

La valeur à modifier et le dernier chiffre de chaque ligne (fonction).

Vous pouvez bien évidemment modifier les textes dans la partie HTML !

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 32 commentaires

  1. Ustad

    27 Mar 2021 Répondre

    Je laisse jamais de commentaire mais tu le mérite merci pour tes tutos simple et bien expliquer

    1. Dgeo Dev

      28 Mar 2021 Répondre

      Hello, merci c’est sympa 😉

  2. joe

    29 Mar 2021 Répondre

    Hellooo ! franchement merci ! j’ai demandé à deux dev les gars ont jamais su le faire correctement … je test ton tuto et c’est good … Un grand Merci !

    1. Dgeo Dev

      29 Mar 2021 Répondre

      Hello 🙂 merci pour le com 😉 oui c’est pas évident à coder :p

  3. Bertrand

    31 Mar 2021 Répondre

    Encore un super tuto, merci beaucoup pour ton travail.
    Grâce à toi fini les applications payante pour faire des modifs basique sur son thème.

    Avez-vous une newsletter pour recevoir chaque nouveau tuto direct par e-mail ?

    Merci encore !
    Bertrand

    1. Dgeo Dev

      1 Avr 2021 Répondre

      Hello, merci c’est gentil 😉 Non pas de newsletter car je n’aime pas trop spammer les gens mais les tutos sont publiés toutes les semaines le lundu à 7h 😉

  4. Guerniou

    1 Avr 2021 Répondre

    Salut Super cool ce tuto 🙂
    Tu pense que on peut faire interagir le numéro JS avec l url ? 🙂

    1. Dgeo Dev

      1 Avr 2021 Répondre

      Hello et merci pour le com 🙂 par contre je n’ai pas compris la question 🙁

  5. fabien

    5 Avr 2021 Répondre

    pour ma part ne fonctionne pas, les chiffres ne s’affiche pas, j’ai peut être trop abusé de tes tutos 😉
    en tous cas merci

  6. Farouk Bouakka Benhafss

    21 Avr 2021 Répondre

    Merci beaucoup pour le tuto, est-ce possible de me dire comment faite pour changer la couleur des chiffres svp ?

    1. Dgeo Dev

      21 Avr 2021 Répondre

      Bonjour, oui dans la partie CSS sectionNumbers__item { rajouter un color:#couleurhexadecimalevoulue; }

  7. Mary

    29 Oct 2021 Répondre

    hello merci pour tes tutos ils sont super
    j’ai juste un petit problème, j’ai un chiffre qui est trop grand genre 35 000, est ce que le scroll peut être plus rapide ? parce que la, ça défile mais on arrive jamais au 35 000 !!

    1. Dgeo Dev

      1 Nov 2021 Répondre

      Hello, oui tu peux essayer de jouer en modifier la valeur 1500 du « delay * 15000 »

  8. Romain

    23 Déc 2022 Répondre

    Hello, merci pour le tuto, c’est top ! J’ai un petit problème, j’aimerais rajouter dans l’incrementNumber un slash et une lettre, mais ça casse l’animation
    Tu sais comment je peux faire ?
    incrementNumber(« number1 », 156);
    incrementNumber(« number2 », 456);
    incrementNumber(« number3 », 678);

    1. Dgeo Dev

      6 Jan 2023 Répondre

      Hello, le / est un caractère informatique on ne peut donc pas 🙂

  9. Romain

    23 Déc 2022 Répondre

    Hello, merci pour tes tutos, c’est possible de rajouter une lettre à incrementNumber(« number1 », 156);
    Par exemple « incrementNumber(« number1″, 156/h); »
    Quand je le fais ça casse
    Merci à toi 🙂

    1. Dgeo Dev

      6 Jan 2023 Répondre

      C’est possible mais faut rajouter une balise span au niveau du html mais assez compliqué à expliquer

  10. Kawaye

    15 Mar 2023 Répondre

    Bonjour j’ai appliqué le tuto mais les chiffres n’apparaissent pas sur la boutique. Y a-t-il un problème au niveau du fichier js

    1. Dgeo Dev

      16 Mar 2023 Répondre

      Hello, surement un thème incompatible malheureusement 🙁

      1. Kawaye

        19 Mar 2023 Répondre

        J’ai vérifié dans les paramètres du thème et tout en bas, il y a une section nommée  »CSS PERSONNALISE » je pense bien que c’est cette section qui est à la place de contenu personnalise

        1. Dgeo Dev

          22 Mar 2023 Répondre

          Hello, oula non pas du tout, c’est uniquement pour le style css, in faut trouver sur le theme une section permettant de mettre de l’html – au besoin speedfly le propose 😉

  11. Kawaye

    19 Mar 2023 Répondre

    Moi, j’ai le thème  »Dawn » sur Shopify… Dans le tuto il y a  »Contenu Personnalise » mais est-il possible de le faire avec  »liquid personnalise » dans les paramètres du thème

    1. Dgeo Dev

      22 Mar 2023 Répondre

      Hello, merci pour l’info et oui effectivement 😉

  12. mehdi

    3 Avr 2023 Répondre

    Merci beaucoup !
    Pour accélerer le défilement des chiffres sur un nombre comme 10000, j’ai modifié « delay 15000 » en 90000 et même 150000 mais ça ne change pas : il n’y aurait pas un autre élément du code à modifier ? Merci d’avance.

  13. Shirley

    30 Mai 2023 Répondre

    Allô

    magnifique tuto ça faisait longtemps que je le cherchais 🙂 J’ai le thème Dawn et ça fonctionne très bien.
    2 questions 🙂

    Est-il possible d’ajouter un titre à la section?
    Est-il possible de faire en sorte que les chiffres défiles moins rapidement ou seulement rendu à la hauteur de ce tuto … Car quand je scroll ma page, j’arrive à la section des chiffres qui défilent, mais ils ont déjà défilés … J’aurais aimé qu’on puisse les voir défiler rendu à la bonne hauteur.

    Merci et bonne journée!

    1. Dgeo Dev

      6 Juin 2023 Répondre

      Hello, je réponds aux questions 🙂
      1. Oui suffit de mettre une div avec un h2 et le titre souhaité dans la section
      2. Je vais voir si je peux modifier cela au niveau du tutoriel dans la semaine
      Bonne journée

  14. enzo

    1 Oct 2023 Répondre

    salut, j’ai essayer sur mon theme spotlight ca fonctionne mais sur mobile ca ne s’affiche pas correctement comme sur ordinateur, c’est a la ligne en minuscle etc…c’est pas la premiere fois que je fais un tuto de dgeo mais la je bloque total

    1. Dgeo Dev

      13 Oct 2023 Répondre

      Bonjour, avez-vous solutionné votre problème ? sinon vous pouvez me contacter ici pour qu’on puisse voir ce qu’on peut faire 😉 https://speed-ecom.eu/support

  15. enzo

    1 Oct 2023 Répondre

    salut l’equipe , j’essaye désespérément depuis 4 jours de realiser ce tuto n’etant pas le premier fait par dgeo

    le contenu sur ordinateur s’affiche exactement comme sur la video par contre sur mobile c’est la cata , ecriture en touuut petit , non centrer sur la page a gauche , et non en colonne si besoins me communiquer un moyen pour vous montrez comment est afficher le site sur mobile avec ce probleme

    1. Dgeo Dev

      13 Oct 2023 Répondre

      Bonjour, avez-vous solutionné votre problème ? sinon vous pouvez me contacter ici pour qu’on puisse voir ce qu’on peut faire 😉 https://speed-ecom.eu/support

  16. enzo

    1 Oct 2023 Répondre

    mon theme est spotlight

  17. enzo

    7 Oct 2023 Répondre

    bonjour , j’ai essayer la methode et cela fonctionne sur ordinateur mais pas sur telephone , y’aurait-il une erreur dans le codage , ou si juste le codage ne fonctionne uniquement pour les clients sur pc et non mobile ?

Laisser un commentaire

Fermer le menu