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>

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

Bon tuto shopify à tous 🙂

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

🤗 Vous souhaitez m'encourager à continuer mes Tutos ?

Cliquez sur le bouton ci-dessous pour me laisser un petit pourboire 😉

Payer un coup à Dgeo Dev

Cet article a 62 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. Hello, surement un thème incompatible dans ce cas 🙁

  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

  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

  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 😉

  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 😉

    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.

  29. 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 🙂

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

Laisser un commentaire

Fermer le menu
×
×

Panier

Tu aimes mes Tutos & mes Articles ?

Alors n'hésites pas à m'encourager à continuer ce Blog !


Je donne 1e à Dgeo Dev

Envie de Protéger le contenu de ton site ?

Speedecom te propose l'Application Shopify Speed Defender !
Elle va te permettre de protéger ton site des copieurs et protéger tes contenus, tes médias et même empêcher les raccourcis claviers et l'affichage du code source ;) !

N'hésite pas à la tester elle est Gratuite pendant 3 jours

Tester Speed Defender

Envie de Booster ton taux de conversion ?

Speedecom a créé une nouvelle Application Shopify qui devrait te plaire !
Elle va te permettre de créer des Bundles en direct checkout !
N'hésite pas à la tester elle est Gratuite pendant 7 jours

Tester Speed Bundle

Besoin d'un developpeur ?

Si tu as un besoin particulier sur ta boutique,
n'hésite pas à me contacter et à regarder mes prestations !

Consulter mes prestations