Nous allons dans ce tuto apprendre à créer une barre d’information avec des phrases dynamiques sur votre boutique shopify

Vous pouvez voir l’exemple ici: https://dgeodev.myshopify.com/

Vous aurez le choix entre 3 et 6 phrases en modifiant tout simplement la variable: « dynamicWordNumber »

C’est parti pour la partie technique

Partie CSS

Rendez vous dans online store – actions – edit code – assets

Trouvez votre fichier .scss.liquid

En général c’est theme.scss.liquid ou timber.scss.liquid ou default.scss.liquid ou style.scss.liquid

Copiez/Collez le code ci-dessous tout en bas du fichier:

Si vous souhaitez changer les couleurs il faudra modifier le : « f0f0f0 » (gris du bandeau) et « ff6600 » (orange du texte défilant)

Si vous souhaitez que cette barre soit par dessus votre header, vous pouvez remplacer la propriété « position:relative; » par « position:fixed; ». Attention cette option risque de masquer une partie de votre header !

.dynamic-headline {
 font-size:16px;
 font-weight:bold;
 color:#333;
 background:#f0f0f0;
 position: relative;
 top:0;
 line-height: 35px;
 text-align: center;
 width: 100%;
 left:0;
 z-index:99999;
 right:0;
}
.dynamic-headline .change {
 color:#ff6600;
}
.dynamic-headline .typed-cursor {
 color:#ff6600;
 font-weight: 300;
}
@media screen and (max-width: 800px) {
 .dynamic-headline { 
 font-size:15px; 
 line-height: 18px;
 padding:5px 0;
 position:relative;
 top:auto; 
 left:auto;
 right:auto;
 }
}

Partie JS

Rendez vous dans online store – actions – edit code – assets

Trouvez le fichier .js.liquid

En général c’est theme.js.liquid ou timber.js.liquid ou default.js.liquid ou style.js.liquid

Copiez/Collez le code ci-dessous tout en bas du fichier:

Vous pouvez changer la valeur de la variable: « dynamicWordNumber » afin d’afficher entre 3 et 6 phrases

Pour modifier ces phrases il vous suffit d’éditer les variables: « dynamicWord1 , dynamicWord2 etc… »

ATTENTION ! il faut impérativement garder les doubles quotes afin d’éviter les catastrophes et le harcéllement par mail que je risque de subir 😀

// Options du script - ATTENTION à bien garder les " " pour éviter la catastrophe !
// nombre de phrases souhaitées - choix entre 3 et 6 maximum
dynamicWordNumber = 3;
dynamicWord1 = "des prix attractifs !";
// 2ere phrase
dynamicWord2 = "la livraison gratuite !";
// 3ere phrase
dynamicWord3 = "une garantie satisfait ou remboursé !";
// 4ere phrase
dynamicWord4 = "un service après vente de qualité !";
// 4ere phrase
dynamicWord5 = "etc..";
// 4ere phrase
dynamicWord6 = "etc";
// ne pas toucher
!function(t){"use strict";var s=function(s,e){this.el=t(s),this.options=t.extend({},t.fn.typed.defaults,e),this.text=this.el.text(),this.typeSpeed=this.options.typeSpeed,this.startDelay=this.options.startDelay,this.backSpeed=this.options.backSpeed,this.backDelay=this.options.backDelay,this.strings=this.options.strings,this.strPos=0,this.arrayPos=0,this.stopNum=0,this.loop=this.options.loop,this.loopCount=this.options.loopCount,this.curLoop=0,this.stop=!1,this.build()};s.prototype={constructor:s,init:function(){var t=this;t.timeout=setTimeout(function(){t.typewrite(t.strings[t.arrayPos],t.strPos)},t.startDelay)},build:function(){this.cursor=t('<span class="typed-cursor">|</span>'),this.el.after(this.cursor),this.init()},typewrite:function(t,s){if(!0!==this.stop){var e=Math.round(70*Math.random())+this.typeSpeed,o=this;o.timeout=setTimeout(function(){var e=0,i=t.substr(s);if("^"===i.charAt(0)){var n=1;i.match(/^\^\d+/)&&(n+=(i=i.replace(/^\^(\d+).*/,"$1")).length,e=parseInt(i)),t=t.substring(0,s)+t.substring(s+n)}o.timeout=setTimeout(function(){if(s===t.length){if(o.options.onStringTyped(o.arrayPos),o.arrayPos===o.strings.length-1&&(o.options.callback(),o.curLoop++,!1===o.loop||o.curLoop===o.loopCount))return;o.timeout=setTimeout(function(){o.backspace(t,s)},o.backDelay)}else 0===s&&o.options.preStringTyped(o.arrayPos),o.el.text(o.text+t.substr(0,s+1)),s++,o.typewrite(t,s)},e)},e)}},backspace:function(t,s){if(!0!==this.stop){var e=Math.round(70*Math.random())+this.backSpeed,o=this;o.timeout=setTimeout(function(){o.el.text(o.text+t.substr(0,s)),s>o.stopNum?(s--,o.backspace(t,s)):s<=o.stopNum&&(o.arrayPos++,o.arrayPos===o.strings.length?(o.arrayPos=0,o.init()):o.typewrite(o.strings[o.arrayPos],s))},e)}},reset:function(){clearInterval(this.timeout);var t=this.el.attr("id");this.el.after('<span id="'+t+'"/>'),this.el.remove(),this.cursor.remove(),this.options.resetCallback()}},t.fn.typed=function(e){return this.each(function(){var o=t(this),i=o.data("typed"),n="object"==typeof e&&e;i||o.data("typed",i=new s(this,n)),"string"==typeof e&&i[e]()})},t.fn.typed.defaults={strings:["These are the default values...","You know what you should do?","Use your own!","Have a great day!"],typeSpeed:0,startDelay:0,backSpeed:0,backDelay:500,loop:!1,loopCount:!1,callback:function(){},preStringTyped:function(){},onStringTyped:function(){},resetCallback:function(){}}}(window.jQuery);
// script génére
if(dynamicWordNumber == 3) {
$(function(){
 $(".change").typed({
 strings: [dynamicWord1, dynamicWord2, dynamicWord3],
 loop: true,
 backDelay: 300,
 typeSpeed: 70
 });
});
}
if(dynamicWordNumber == 4) {
$(function(){
 $(".change").typed({
 strings: [dynamicWord1, dynamicWord2, dynamicWord3, dynamicWord4],
 loop: true,
 backDelay: 300,
 typeSpeed: 70
 });
});
}
if(dynamicWordNumber == 5) {
$(function(){
 $(".change").typed({
 strings: [dynamicWord1, dynamicWord2, dynamicWord3, dynamicWord4, dynamicWord5],
 loop: true,
 backDelay: 300,
 typeSpeed: 70
 });
});
}
if(dynamicWordNumber == 6) {
$(function(){
 $(".change").typed({
 strings: [dynamicWord1, dynamicWord2, dynamicWord3, dynamicWord4, dynamicWord5, dynamicWord6],
 loop: true,
 backDelay: 300,
 typeSpeed: 70
 });
});
}

Partie HTML

C’est la partie ou vous allez placer votre barre d’information.

Rendez vous dans online store – actions – edit code – sections – header.liquid

Copiez/collez le bout de code ci-dessous en haut du fichier.

La barre va se mettre en haut du site, il faudra donc supprimer votre free shipping bar actuelle ou alors bidouiller le code pour l’afficher ailleurs.

Vous pouvez bien sur modifier le texte de la balise ci-dessous, la portion de phrase: « Sur notre site vous aurez ».

<div class="dynamic-headline">Sur notre site vous aurez <span class="change"></span><span class="typed-cursor"></span></div>

 

Si besoin de l’afficher uniquement sur la page d’accueil englobez le code de cette portion de code

{% if template ==  "index" %}
le code html...  
{% endif %}  

Si besoin de l’afficher sauf sur la page d’accueil englobez le code de cette portion de code

{% if template !=  "index" %}
le code html...  
{% endif %}  

Sauvegardez bien vos modifications car ce tuto est assez complexe par rapport aux autres !

Ce tutoriel existe aussi en vidéo

Bon tuto shopify à tous 🙂

Merci de me laisser une petite note 😉
[Note moyenne de: 5 sur 13 votes]

🤗 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 144 commentaires

  1. Bonjour Dgeo,

    Merci beaucoup, c’est super!
    SVP, est-ce que pour la partie CSS et JS en colle le code en haut.

    1. Salut et merci pour le com, j’ai mis à jour le tuto pour préciser qu’effectivement il faut tjs copier/coller en bas de fichier

  2. Salut. Superbe fonctionnalité, est-il possible de faire en sorte que cette barre d’information reste collée au header et qu’elle ne se mette pas en plein sur le header.

    Merci

    1. Salut, merci. oui en supprimant le position:absolute;

      1. ça fonctionne pas du tout

        1. Hello, surement un thème incompatible dans ce cas 🙁

        2. Salut merci pour ce tuto ! sur le thème prestige j’ai l’impression que ça ne marche pas non plus

  3. Bonjour.
    Tuas testé sur mobile ?

    1. Bien sur 😉

  4. Salut.
    Merci pour se tuto de qualité comme dab!!
    ça ne fonctionne pas sur le thème turbo?

    1. Salut, à ca je ne sais pas en général Turbo n’aime pas trop mes tutos, son style de codage n’est pas générique comme la plus part des thèmes

  5. Merci pour ce tuto, fontionne tres bien chez moi 😉

  6. Salut,

    J’ai remarqué un léger problème lorsque l’on veut mettre 5 phrases, à la fin du défilements des 5 phrases cela ne se remet pas à zéro alors qu’avec 4 oui.

    1. Salut, merci pour ce retour, je fais tester cela bientot

      1. Bonjour le problème n’est toujours pas résolue, mais sinon excellent tips merci!

        1. Salut ayant eu le même soucis il a été corrigé donc recopie le code avec sa correction et c’est cool 😉

  7. Salut encore merci pour tes tutos très instructifs.
    Je voudrais savoir comment réduire la largeur de la barre d’info car sur le theme supply elle mange un peu sur le texte de la barre d’info de base du theme.
    Thx

    1. Salut, la largeur ou la hauteur?

  8. Bonjour,
    J’aime beaucoup tes tutos, sauf que j’ai un soucis je n’ai que un bout du message qui s’affiche et le reste des phrases ne défilent pas, j’ai dû louper quelque chose là.

    1. Salut et merci pour le com
      Surement une incompatibilité jquery, ou votre thème n’est pas compatible

      1. Bonjour tout marche nickel mais j’aimerais que la barre soit un peu plus large elle est un peu fine
        Merci de m’indiquer la marche a suivre svp mr

        1. Bonjour, dans ce cas il faut dans la partie css rajouter des espacements en haut et bas du style : .dynamic-headline { padding:30px 0; } le 30 à adapter selon la taille voulue

  9. Bonjour, sur le thème « pop » il n’y a pas de fichier .js.liquid ?
    Merci

    1. Bonjour, y en a forcément regardez bien, un nomdufichier.js ou .js.liquid

  10. comment on sais les code de couleur si on veux changer ?

  11. Comment faire pour que le texte reste fixe ? Merci

    1. Mettre uniquement un texte sans utiliser ce tuto lol 🙂

  12. Salut une petite question, comment pourrais-je faire pour déplacer la barre? j’ai effacé « position:absolute; » mais la barre reste toujours au-dessus de mon header

  13. c’est bon merci!!!

  14. Bonjour Geoffrey,

    Merci pour toutes ces infos !

    J’ai un léger soucis sur cette modif, tout fonctionne parfaitement, sauf lorsque je suis sur une page produit, le texte dynamique n’est plus là, il n’y a que la partie fixe

    Une solution ?

    Merci
    Cédric

    1. Bonjour, surement un conflit avec une app sur la fiche produit

    2. Bonjour j’ai le même problème, ca fonctionne tres bien sur la page accueil mais pas sur les autres pages, est ce que tu as résolu le problème, merci d’avance

  15. Bonjour super tuto !
    Cependant j’ai un petit soucis, le texte dynamique s’affiche en arrière plan de mon header, il est transparent et on voit le texte accès mal. J’utilise une boutique avec le thème Retina.
    Comment faire pour qu’il passe en premier plan ?
    J’ai aussi essayé d’enlever le « position:absolute; », rien de change ou bouge.

    Merci 🙂

    1. Bonjour, selon les thèmes il faut parfois le positionner ailleurs notamment après le header (fin de balise) n’hésitez pas à faire des textes de positionnement afin de l’adapter au mieux
      Bo WE

  16. Bonjour,

    sur la partie ordinateur ça fonctionne très bien. (j’ai fait les changements pour que ça n’apparaissent pas sur le header)

    Malheureusement, sur la version mobile, la barre s’affiche par-dessus le header.

    Merci d’avance !!

    1. Bonjour, selon les thèmes il faut parfois le positionner ailleurs notamment après le header (fin de balise) n’hésitez pas à faire des textes de positionnement afin de l’adapter au mieux
      Bo WE

  17. Salut ! merci super tuto !

    Cependant est-il possible de modifier l’affichage entre la fin de phrase et le début de l’autre ?
    Que la nouvelle vienne s’afficher directement sans que la précédente ne s’efface à reculons ?

    Merci à toi
    Cordialment
    Olivier

    1. Merci pour le commentaire 😉 pour une telle modification il faudrait un autre code

  18. Bonjour, tout abord un grand merci pour vos tutos de très grande qualité ! j’ai une question au sujet de la phrase dynamique , tout fonctionne parfaitement pour la version web mais pour la version mobile impossible d’avoir la bannière à l’endroit désiré, malgré les aides apportées dans les commentaires, auriez vous une solution pour palier à ce problème car elle se retrouve tout en bas de la page et c’est inutile si ça ne saute pas aux yeux de l’acheteur dès son arrivé sur le site. Encore un grand merci,
    Cordialement, Matthias Ferreira

  19. Bonjour,
    Merci beaucoup pour ce tuto au top !
    Petite question, comment une autre personne ci-dessus, il semblerait que le texte dynamique rencontre un conflit sur les pages produits, une astuce pour ne pas afficher cette barre sur les pages produits ?
    Merci d’avance de votre aide 😀

    1. Bonsoir, pas de soucis particulier rencontré pour ma part mais une condition peut être faite du style :
      {% if template == "index" %} on affiche le code {% endif %}

  20. Bonjour,
    Tout d’abord merci pour ton superbe tuto, je l’ai implémenté sans soucis. Par contre, sur le thème supply, il empêche l’accès au menu lorsqu’on a un format mobile (le bouton ne repond plus). Idem pour le slider en début de page. Aurais-tu une piste à me fournir pour résoudre le soucis stp ?

  21. Je suis sur le thème Debut et ça n’a pas l’air de fonctionner. Le texte en .js ne s’affiche pas.
    Merci pour tes tutos

  22. Mille merci ça fonctionne ! =) comment on fait pour l’afficher uniquement sur ma 1ere page d’accueil et pas sur les autres pages comme fiches produits par ex ?

  23. Hello ! Avant tout : MERCI ENCORE mille fois pour ton taf fabuleux et tous ces tutos !
    Concernant celui-ci : est-il possible de transformer la barre en « sticky-bar » (pour qu’elle soit toujours en haut de l’écran de l’utilisateur, même lorsque celui-ci scroll) stp ?
    Merci d’avance si tu as le temps et l’occasion de répondre 😉

    1. Hello et merci pour le message 😉 c’est assez compliqué et ça dépend de pas mal de facteurs (thème, apps etc…). Au besoin MP pour voir ce qu’on peut faire 😉

      1. Hello, comment fais-tu pour que la barre reste tjrs sur la page en haut même si l’on scroll stp??
        Merci bcp pour tout ce que tu fais

        1. Hello et merci pour le commentaire. Il faut remplacer dans la partie CSS position : relative par position : fixed

  24. salut tout d »abord merci pour tout t’es magnifique tuto j’utilise le theme pop et la barre empiète quand je développe le menu principal a tu une solution merci pour tout

    1. Hello, en effet c’est un thème avec un disposition particulière… je pense que le mieux est de ne pas le mettre au niveau du body mais à un antre emplacement. Essayez d’écrire un peu partout dans le theme.liquid pour identifier la zone souhaitée après le menu donc. Bon courage.

        1. Hello, OK cool. Pour le soucis il faudrait me linker le lien du site en mp pour voir de quoi il en retourne

  25. Encore un tuto simple à mettre en place grâce à vos descriptions claires.
    Merci 😉

  26. Déjà merci pour ce tuto ! J’ai appliqué les différentes étapes mais malheureusement sur téléphone la barre s’affiche en dessous du menu, pour faire simple, elle n’est pas bloquée en haut alors que sur ordinateur ça fonctionne, je ne sais pas du tout comment faire.
    Merci d’avance

    1. Hello, merci pour le commentaire, je vais revoir tous mes tutos la semaine prochaine pour les faire en vidéo ! ca me permettra de les améliorer 😉

  27. bonjour le bout de code pour theme.js.liquid es bien !function(t){« use strict »;var s=function(s,e){this.el=t(s),this.options=t.extend({},t.fn.typed.defaults,e),this.text=this.el.text(),this.typeSpeed=this.options.typeSpeed,this.startDelay=this.options.startDelay,this.backSpeed=this.options.backSpeed,this.backDelay=this.options.backDelay,this.strings=this.options.strings,this.strPos=0,this.arrayPos=0,this.stopNum=0,this.loop=this.options.loop,this.loopCount=this.options.loopCount,this.curLoop=0,this.stop=!1,this.build()};s.prototype={constructor:s,init:function(){var t=this;t.timeout=setTimeout(function(){t.typewrite(t.strings[t.arrayPos],t.strPos)},t.startDelay)},build:function(){this.cursor=t(‘|’),this.el.after(this.cursor),this.init()},typewrite:function(t,s){if(!0!==this.stop){var e=Math.round(70*Math.random())+this.typeSpeed,o=this;o.timeout=setTimeout(function(){var e=0,i=t.substr(s);if(« ^ »===i.charAt(0)){var n=1;i.match(/^\^\d+/)&&(n+=(i=i.replace(/^\^(\d+).*/, »$1 »)).length,e=parseInt(i)),t=t.substring(0,s)+t.substring(s+n)}o.timeout=setTimeout(function(){if(s===t.length){if(o.options.onStringTyped(o.arrayPos),o.arrayPos===o.strings.length-1&&(o.options.callback(),o.curLoop++,!1===o.loop||o.curLoop===o.loopCount))return;o.timeout=setTimeout(function(){o.backspace(t,s)},o.backDelay)}else 0===s&&o.options.preStringTyped(o.arrayPos),o.el.text(o.text+t.substr(0,s+1)),s++,o.typewrite(t,s)},e)},e)}},backspace:function(t,s){if(!0!==this.stop){var e=Math.round(70*Math.random())+this.backSpeed,o=this;o.timeout=setTimeout(function(){o.el.text(o.text+t.substr(0,s)),s>o.stopNum?(s–,o.backspace(t,s)):s<=o.stopNum&&(o.arrayPos++,o.arrayPos===o.strings.length?(o.arrayPos=0,o.init()):o.typewrite(o.strings[o.arrayPos],s))},e)}},reset:function(){clearInterval(this.timeout);var t=this.el.attr("id");this.el.after('’),this.el.remove(),this.cursor.remove(),this.options.resetCallback()}},t.fn.typed=function(e){return this.each(function(){var o=t(this),i=o.data(« typed »),n= »object »==typeof e&&e;i||o.data(« typed »,i=new s(this,n)), »string »==typeof e&&i[e]()})},t.fn.typed.defaults={strings:[« These are the default values… », »You know what you should do? », »Use your own! », »Have a great day! »],typeSpeed:0,startDelay:0,backSpeed:0,backDelay:500,loop:!1,loopCount:!1,callback:function(){},preStringTyped:function(){},onStringTyped:function(){},resetCallback:function(){}}}(window.jQuery);
    if(dynamicWordNumber == 4) {
    $(function(){
    $(« .change »).typed({
    strings: [dynamicWord1= « des prix attractifs »,; dynamicWord2 = « la livraison gratuite »,; dynamicWord3= « une garantie satisfait ou remboursé »,; dynamicWord4 = « un service après vente de qualité »,;],
    loop: true,
    backDelay: 300,
    typeSpeed: 70
    });
    });
    }
    ça ne fonctionne pas j’ai le thème speedfly..
    MAIS JE SAIS PAS SI J’AI BIEN REALISEE LA DEUXIEME PARTIE.
    Merci pour ton aide

    1. Bonjour, étrange les possesseurs de Speedfly n’ont jamais eu de soucis avec ce tuto 🙁 essaye de reprendre depuis le début pas à pas 🙂

  28. Bonjour,
    J’ai un soucis pour la deuxième partie qu’elle es le code que je dois insérer ?
    POUR METTRE 4 PHRASES J’AI MISE CECI MAIS SA NE MARCHE PAS..
    if(dynamicWordNumber == 4) {
    $(function(){
    $(« .change »).typed({
    strings: [dynamicWord1= « des prix attractifs »,; dynamicWord2 = « la livraison gratuite »,; dynamicWord3= « une garantie satisfait ou remboursé »,; dynamicWord4 = « un service après vente de qualité »,;],
    loop: true,
    backDelay: 300,
    typeSpeed: 70
    });
    });
    }

    1. Hello, je refais mes tutos en vidéos je regarderai à ce moment la si tout fonctionne comme il faut 😉

  29. Salut!!!
    Vous allez bien Frero?
    Comment je peux changer la couleur du texte ?

    1. Hello bien merci et toi ? il suffit de trouver dans la partie css: color:#333; et de changer le 333 par la couleur héxadécimal souhaitée.

  30. Salut! Frero, Vous allez bien!

    Jutilise le theme Empire votre tuto ne fonctionne pas. J » attends votre precieuse reponse!

    1. Hello, je ne connais pas vraiment ce thème, je ne peux donc pas affirmer que mes tutos fonctionnent dessus 🙂

  31. Merci! Big

  32. Salut ça ne fonctionne pas ça ma fait tout beugué heureusement que j’ai pu supprimer facilement pourtant je l’ai fait sur le thème debut et rien ne marche avec ce hack tu aurais des solutions ou des conseils ? (jai souvegardé le fichier header puis ensuite le la seconde d’après le fichier theme.js et après le theme.scss.liquid) et ça a fait un gros bug.

    1. Hello, étrange je suis en train de refaire les tutos en vidéo et je n’ai pas eu de soucis sur Debut… La vidéo sera annoncée sur la Chaine speedecom au besoin vous pourrez retenter à ce moment la. Bonne soirée

  33. Bonjour merci pour ce Tuto comment faire pour que la barre reste visible même quand on scroll merci a toute l’equipe !!

  34. Merci beaucoup pour votre tuto, il est génial.
    Je suis sur Venture et il marche parfaitement, j’ai pu modifier la taille, la couleur, le bold etc.
    En revanche je n’ai pas pu modifier la vitesse d’affichage et la durée d’arret à la fin de chaque phrase.
    J’ai tenté de modifier le typespeed pour la vitesse, avec des chiffres de 1 à 9000, mais aucun effet..
    Pareil pour la durée d’arrêt avec le BackDelay, où j’ai essayé de 1 a 999999, aucun effet non plus.
    Pourriez vous m’indiquer ce que j’ai fait de travers ?
    Dois-je rajouter du code quelquepart ?
    Merci

    1. Bonjour et merci pour le message 🙂 oui il suffit de modifier les: backDelay: 300, typeSpeed: 70 de chaque élément 🙂

      1. Bonjour,

        Comment est-il possible de faire en sorte que chaque phrase, aient un temps d’arrêt avant de passer à la suivante ?
        Le texte dynamique change moins rapidement, afin qu’on ait le temps de lire correctement.

        En te remerciant !

        1. Hello, oui il est possible de mettre le pagespeed plus élevé, il faut jouer avec les valeurs des otpions.

  35. Génial merci l’ami !

  36. Bonjour ! Avant tout merci pour tout tes tutos, ça m’a sauvé j’ai un problème sur version mobile la barre se met tout en haut du logo et juste en dessous aussi je l’ai en doublon, pas de soucis au niveau de la version pc .. je ne comprends pas

    1. Hello, je pense que le code a été collé à un mauvais endroit. essayez de le mettre tout en haut du fichier.

  37. Bonjour ! Merci pour ce tuto, j’ai un souci la partie dynamique ne s’affiche pas sur la page d’accueil j’utilise le thème début , j’ai ressayé plusieurs fois mais ça ne marche par contre sur la page produit il fonctionne.

    1. Hello, bizarre, la comme ça je vois pas trop 🙂

  38. Salut!
    Petite question : est-il possible de faire apparaître cette barre dynamique seulement en page d’accueil ?

    Car, me concernant, elle s’affiche correctement en page d’accueil mais concernant les autres pages du site web, elle décale certains éléments du « header ».

    Merci pour tout!

  39. Salut, merci pour le commentaire. Je crois que tu t’es trompé … le lien communiqué ci-dessus ne m’indique pas comment cacher la barre d’infos avec textes dynamiques dans les pages du site autres que la page d’accueil.

    L’idée est de conserver cette barre d’infos uniquement en page d’accueil, et de la cacher ailleurs.

    Le site auquel tu fais référence m’indique comment personnaliser ma page produits.

    Merci encore pour ton aide!

    1. Hello, navré j’ai bcp de demandes parfois je mélange 😉 j’ai ajouté ces cas de figure en bas du tuto 🙂

  40. Bonjour Dgeo Dev,
    Super tuto ! Moi qui cherchais une solution pour afficher plusieurs textes dans mon header me voilà comblé !
    Juste une petite question j’ai essayé de trouver par moi-même la solution, mais je bloque un peut… j’aimerais savoir comment il est possible de rendre cliquable le header créer avec votre tuto ? En étant même un peu plus précis comment est-il possible de rediriger le visiteur vers une page spécifique (un peut comme la fonction href sous HTML) quand il clique sur dynamicWord1 et de rediriger vers une autre page spécifique quand il clique sur dynamicWorld2 ?
    Merci par avance de votre réponse

    1. Hello et merci pour le commentaire. Je comprends fort bien cette demande cependant ce code ne le permet pas malheureusement 🙁

  41. Salut Dgeo !!

    Un grand merci pour ce tuto et également pour tout tes contenus !!
    Je l’ai fais sur mon thème et ça fonctionne nickel !!
    Si j’ai bien compris, dans la partie HTML c’est soit la barre dynamique apparaît uniquement sur la page d’accueil, soit elle n’apparaît que sur les autres pages…mais comment faire pour qu’elle s’affiche à la fois sur la barre d’accueil mais aussi sur les autres pages du site.

    1. Hello 🙂 question étrange car de base la barre apparait sur tout le site oO. Surement un problème lié au thème 🙂 à voir avec son concepteur :p

  42. Salut Dgeo alors déjà merci pour toutes ces vidéos qui sont vraiment génial !!

    Par contre pour ce tuto j’ai du mal alors que je fais de l’info aha. Je suis sur le succes theme.

    J’arrive à afficher dans le Header : « Sur notre site vous aurez » mais le javascript ne s’affiche pas j’ai l’impression qu’il ne pas chercher les fonctions .change et .typedcursor…..

    Pourtant j’ai ajouté le code dans theme.js.liquid ET timber.js.liquid mais rien n’y fait il ne veut pas m’afficher le javascript …

    Un conseil ?

    Cordialement,
    Joseph

    1. Hello et merci pour le com. Hum non j’ai pas d’idée comme ça mais MP au besoin.

  43. Salut dgeo

    merci pour ce superbe contenue mais il s affiche également dans la partie collection …
    comment faire pour l enlever ? merci

    1. Hello, il faut jouer avec la condition expliquée en bas du tuto
      {% if template != "index" %}
      le code html...
      {% endif %}

      remplacer par

      {% if template != "collection" %}
      le code html...
      {% endif %}

  44. Salut dgeo

    Excellant tuto ! Je découvre tout ton travail c’est vraiment top. Alors par contre j’ai un petit soucis, la barre s’affiche bien sur tout le site, par contre le teste dynamique ne fonctionne que sur la page produit…. j’ai refait plusieurs fois le tuto et toujours la même chose.. une idée ?

    merci à toi

    1. j’oubliai.. j’utilise le theme speedfly

      1. Hello, si tu a speedfly tu peux demander au support au regardera 😉 speedecom.freshdesk.com

  45. j’ai speedfly aussi mais aucune connaissance en technique peux tu m’aider merci d’avance

    1. Hello, tu peux dans ce cas contacter le support ici 🙂 speedecom.freshdesk.com

  46. Bonjour,

    Merci pour ce tuto ! Est-il possible de changer la police de la barre dynamique ? Merci beaucoup

    1. Hello, oui c’est possible j’ai fais un tuto sur le sujet qu’il faudra essayer de combiner avec ce tuto 😉 rechercher « police » dans la barre de recherche 🙂

  47. salut merci pour le tuto . j’ ai essayé sur le theme debut mais le texte dynamique ne s affiche pas . Je suis pourtant sûr d’avoir bien fait

    1. Hello, étrange faut faire f12 et voir les erreurs, il manque peut être l’appel à jquery

  48. Salut, merci pour le tuto. J’ai utilisé le code HTML pour ne pas afficher la barre dynamique sur les produits, car le texte dynamique ne s’afficher pas, il y avait que le texte « Sur notre boutique vous aurez » qui s’afficher. Est-il possible de ne pas l’afficher sur la page du panier également car c’est le meme problème ? Quel code doit-je utiliser pour ne pas afficher la barre sur les pages produit ainsi que sur la page du panier ? Merci.

    1. Hello, mettre une condition comme expliqué sur la fin du tuto et mettre

      {% if template != "cart" or template != "product" %}
      le code html...
      {% endif %}

      1. Salut, j’ai essayer et ça ne fontionne toujours pas, la portion « sur notre boutique vous aurez » s’affiche toujours sur la page produit et la page du panier ..

  49. Hello, merci beaucoup pour tout ces tutos , j’ai mis en place celui ci , il saffiche bien sur pc, mais sur mobile , la barre dynamique est imbriqué dans le menu , du coup on ne le voit pas du tout, tu saurai comment régler ce petit décalage stp ? Merci d’avance

    1. Hello, tout dépend du thème 🙂 le mieux est de demander au support de celui ci sinon me MP pour voir ce qu’on peut faire.

  50. Bonjour, comment en pas avoir le texte dynamique su chaque page mais uniquement sur la landing page. merci

    1. Hello, il faut faire des conditions 😉 le prochain tuto en parlera

  51. Bonjour je ne trouve pas les assets avec le theme « Début » s’il vous plait pourriez-vous m’aider merci d’avance

    1. Résolu en mp 🙂

  52. Hello Dgeo Dev,

    quand je vais dans la section theme js je ne trouve pas les codes dans dynamicWordNumber
    (il me donne rien meme en le notant avec commande F sur mac) du coup je n’arrive pas a faire l’effet déroulant.

    JE SUIS SUR LE THÈME SPEEDFLY

  53. Bonjour je ne trouve pas theme.scss.liquid avec le theme « Début » s’il vous plait pourriez-vous m’aider merci d’avance

    1. Hello, il faut donc trouver un theme.css ou un fichier avec une extension .css, .scss ou .scss.liquid 🙂

  54. Salut Dgeo
    J’ai un prob j’ai le thème Boundless
    J’ai réussie à créer la barre d’Information dynamiques sur ma boutique
    mais quand je clique sur rechercher ou sur le panier je vois que la barre dynamique me cache la partie haute du panier et la partie haute de la recherche je peux t envoyer un screen stp aide moi Dgeo

    1. Hello, tu peux demander au support ici on verra ce qu’on peut faire 😉 speedecom.freshdesk.com

  55. Bonjour Dgeo,
    sur le thème début la partie dynamique du texte ne s’affiche pas et j’ai essayé à plusieurs reprises de recommencer mais sans succès . une solution ?

    1. Hello, il doit certaines avoir des erreurs dans la console de développement faudra me dire lesquelles 🙂 il doit surement manquer jquery

  56. Bonjour la barre dynamique s’affiche correctement le seul probleme est sur version mobile quand je veut acceder au menu mobile la barre dynamique cache une partie du menu est ce que il s’aurait possible de soit faire un petit peu monter la barre dynamique de maniere a ce que sur mobile elle cache pas ou soit mettre la barre dynamique uniquement en page d’accueil et pas dans le menu mobile je sais pas si j’ai bien expliqué mon problème

    1. Bonjour, ca dépend du thème, le mieux serait de demander à leur support car ils sont tous codés différemment et un code générique ne peut être proposé 🙁

  57. Salut Dgeo ! meric pour tes tutos ! cependant j’ai un petit probleme « Rendez vous dans online store – actions – edit code – assets Trouvez votre fichier .scss.liquid » … Je n’ai pas ce fichier…

    1. Hello, un .css sinon 🙂

  58. Salut DGEO !
    La base s’affiche bien : »sur notre site… »
    Mais le texte ne s’affiche pas.
    Quand je fais F12 on met dit qu’il y a une erreur ici
    !function(t){« use strict »;var s=function(s,e){this.el=t(s),this.options=t.extend({},t.fn.typed.defaults,e),this.text=this.el.text(),this.typeSpeed=this.options.typeSpeed,this.startDelay=this.options.startDelay,this.backSpeed=this.options.backSpeed,this.backDelay=this.options.backDelay,this.strings=this.options.strings,this.strPos=0,this.arrayPos=0,this.stopNum=0,this.loop=this.options.loop,this.loopCount=this.options.loopCount,this.curLoop=0,this.stop=!1,this.build()};s.prototype={constructor:s,init:function(){var t=this;t.timeout=setTimeout(function(){t.typewrite(t.strings[t.arrayPos],t.strPos)},t.startDelay)},build:function(){this.cursor=t(‘|’),this.el.after(this.cursor),this.init()},typewrite:function(t,s){if(!0!==this.stop){var e=Math.round(70*Math.random())+this.typeSpeed,o=this;o.timeout=setTimeout(function(){var e=0,i=t.substr(s);if(« ^ »===i.charAt(0)){var n=1;i.match(/^\^\d+/)&&(n+=(i=i.replace(/^\^(\d+).*/, »$1 »)).length,e=parseInt(i)),t=t.substring(0,s)+t.substring(s+n)}o.timeout=setTimeout(function(){if(s===t.length){if(o.options.onStringTyped(o.arrayPos),o.arrayPos===o.strings.length-1&&(o.options.callback(),o.curLoop++,!1===o.loop||o.curLoop===o.loopCount))return;o.timeout=setTimeout(function(){o.backspace(t,s)},o.backDelay)}else 0===s&&o.options.preStringTyped(o.arrayPos),o.el.text(o.text+t.substr(0,s+1)),s++,o.typewrite(t,s)},e)},e)}},backspace:function(t,s){if(!0!==this.stop){var e=Math.round(70*Math.random())+this.backSpeed,o=this;o.timeout=setTimeout(function(){o.el.text(o.text+t.substr(0,s)),s>o.stopNum?(s–,o.backspace(t,s)):s<=o.stopNum&&(o.arrayPos++,o.arrayPos===o.strings.length?(o.arrayPos=0,o.init()):o.typewrite(o.strings[o.arrayPos],s))},e)}},reset:function(){clearInterval(this.timeout);var t=this.el.attr("id");this.el.after('’),this.el.remove(),this.cursor.remove(),this.options.resetCallback()}},t.fn.typed=function(e){return this.each(function(){var o=t(this),i=o.data(« typed »),n= »object »==typeof e&&e;i||o.data(« typed »,i=new s(this,n)), »string »==typeof e&&i[e]()})},t.fn.typed.defaults={strings:[« These are the default values… », »You know what you should do? », »Use your own! », »Have a great day! »],typeSpeed:0,startDelay:0,backSpeed:0,backDelay:500,loop:!1,loopCount:!1,callback:function(){},preStringTyped:function(){},onStringTyped:function(){},resetCallback:function(){}}}(window.jQuery)

    1. Hello, il semblerait que la partie js soit mal mise. Faudrait refaire le tuto pour voir si cela corrige le probleme.

  59. Super Dgeo tout fonctionne !
    Dernier petit problème, mais je ne sais pas si cela vient de ce code ou pas…
    Regarde http://whitediamond.fr sur mobile, et clique sur le Menu, il sort de tout en haut, par dessus les annonces. Comment corriger cela ?

    Merci encore, tes tutos sont supers, tu gères !

      1. Génial ! Merci !!!

  60. Bonjour Dgeo,
    J’ai déjà suivis plusieurs de tes conseils, et grâce à ta réponse la dernière fois j’ai compris comment utiliser la fonction « t » de Shopify. Cependant dans ce cas, elle ne s’applique qu’à la première partie « Sur notre site web vous aurez », mais sur la deuxième partie, les phrases dynamiques, seul la version française s’affiche pour moi. Du coup j’ai quelque chose du genre :
    On our website you will have des prix attractifs.
    Comment modifier le code afin d’avoir bien les traduction qui s’affiche pour le text dynamique ?
    Merci d’avance !

    1. Hello, il faut mettre les traductions dans tous les fichiers locales – donc le en.json et le fr.json 🙂

      1. Les traductions ont été mises. J’ai compris le concept de comment traduire, c’est pour ça que je ne comprends pas pourquoi ça ne marche pas. La deuxième partie exemple « des prix attractifs » reste en français, alors que « sur notre site web vous aurez » se traduit parfaitement.
        Je me demandais si ce n’était pas du au fait de cette ligne de codage :
        !function(t){« use strict »;
        Je m’y connais pas vraiment en codage, donc je ne sais pas vraiment qu’elle partie du code empêche la traduction du texte dynamique. J’espère que ces informations seront suffisantes pour que tu puisses comprendre la situation.
        Désolé du dérangement et merci pour ton aide encore une fois.

        1. Bonjour, étrange… je vous donne un code d’exemple afin de voir si vous faite comme ça:

          dynamicWord1 = « {{ ‘settings.general.custom.dynamicWord1’ | t }} »; etc 🙂

          et dans Locales – les fichiers de langues ceci:

          « general »: {
          « custom »: {
          « dynamicWord1 »: « la trad… »,
          }, …

          à faire dans tous les fichiers dans locales

          J’espère que c’est plus clair pour vous

          1. Je vois, y a surement un problème avec le javascript. Une solution alternative serait de faire des conditions directement dans le js du genre

            if(Shopify.locale == ‘fr’) {
            dynamicWord1 = ‘mon texte’;
            }
            else if(Shopify.locale == ‘en’) {
            dynamicWord1 = ‘my text’;
            }
            else {
            dynamicWord1 = ‘texte par default’;
            }

  61. Bonjour Dgeo,

    Merci pour tous tes tutos !

    j’utilise le thème Venture j’ai appliqué à la lettre ton tuto c’est parfait sauf que sur mobile la barre dynamique passe par dessus le menu quand on clique sur « menu » du coup il y a des éléments qu’on ne voit pas à cause de la barre dynamique ! Comment dois-je faire pour résoudre ce soucis !

    Merci d’avance de ton aide précieuse

    1. Hello et merci pour le message, alors la cela depend fortement du thème 🙁 faut demander à leur support la meilleure manière d’intégrer le code 🙂

  62. Merci DGEO, la solution alternative a bien marché !

  63. Bonjour, encore un grand merci pour les tutos, ca me sauve la vie et je m’éclate, vraiment ils sont super.
    Mon site est sur le point d’être lancé et il est très beau et pro grâce à vous donc merci.
    Juste un petit soucis avec ce petit bandeau ci, effectivement je l’ai installé il fonctionnait sans aucun problème (je suis sur DEBUT) et d’un coup il a arrêté de fonctionner sans raison car depuis je n’ai plus touché au code et j’ai fini par lui. Serait-il possible d’avoir un petit coup de pouce car je ne comprend vraiment pas la…
    Un grand merci par avance

    1. Hello, faudrait m’envoyer le lien pour voir cela plus en détail

  64. J’ai oublié de précisé que le soucis se trouvait uniquement sur la page d’accueil

  65. bonjour enorme tes tutos
    moi aussi j ‘ai le souci que la la barre dynamique marche pas sur la page d’accueil il se met en route sur les les page produit

    1. Hello, il doit y avoir un conflit de code ou d’apps 🙁 un lien svp? en MP

  66. Bonjour, merci pour ces tips
    Comment réduire la taille de l’écriture svp ?

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