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 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:
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 Assets et un fichier .scss.liquid, css.liquid ou la même chose mais sans le .liquid ! bref généralement theme, style, timber…
Mettez-vous tout en bas et copiez/collez le code suivant:
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 😉
Ustad
27 Mar 2021Je laisse jamais de commentaire mais tu le mérite merci pour tes tutos simple et bien expliquer
Dgeo Dev
28 Mar 2021Hello, merci c’est sympa 😉
joe
29 Mar 2021Hellooo ! 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 !
Dgeo Dev
29 Mar 2021Hello 🙂 merci pour le com 😉 oui c’est pas évident à coder :p
Bertrand
31 Mar 2021Encore 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
Dgeo Dev
1 Avr 2021Hello, 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 😉
Guerniou
1 Avr 2021Salut Super cool ce tuto 🙂
Tu pense que on peut faire interagir le numéro JS avec l url ? 🙂
Dgeo Dev
1 Avr 2021Hello et merci pour le com 🙂 par contre je n’ai pas compris la question 🙁
fabien
5 Avr 2021pour ma part ne fonctionne pas, les chiffres ne s’affiche pas, j’ai peut être trop abusé de tes tutos 😉
en tous cas merci