Nous allons dans ce tuto apprendre à créer une barre d’information avec des phrases dynamiques sur votre boutique shopify. Ce type de message informatif permet de dynamiser votre site et surtout d’attirer l’attention de vos clients sur les avantages de votre boutique. L’effet reproduit le fait de taper à la machine à écrire à l’ancienne style dactylo !

Envie de voir ce que ça donne ? Exemple dispo ici: https://dgeodev.myshopify.com/

Version Thèmes Récents – (OS 2.0 – après 2022)

Installation du système

Partie CSS

Rendez vous dans Boutique en ligne – Actions – Modifier le code – Assets (Ressources)

Trouvez le fichier .css utilisé par votre thème : généralement base.css, theme.css, style.css ou autre fichier .css

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

/* Barre dynamique */
.typing-effect__banner {
  
  /* Options */
  --dg-typing-effect-text-color: #333333;
  --dg-typing-effect-animate-text-color: #ff6600;
  --dg-typing-effect-bg-color: #f0f0f0;
  /* Fin - Options */
  
  font-size:16px;
  padding:10px 0;
  color:var(--dg-typing-effect-text-color);
  background:var(--dg-typing-effect-bg-color);
  position: relative;
  line-height: 1;
  text-align: center;  
}
.typing-effect__banner .typing-effect {
  color:var(--dg-typing-effect-animate-text-color);
  font-weight: bold;
  border-right: .10em solid var(--dg-typing-effect-animate-text-color); 
  animation: blink-caret .75s step-end infinite;
}
@media screen and (max-width: 800px) {
  .typing-effect__banner { 
    font-size:15px;
    padding:10px 0;
  }
}
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: var(--dg-typing-effect-animate-text-color); }
}

Partie JS

Toujours dans le dossier Assets (Ressources)

Trouvez cette fois un fichier .js. En général c’est theme.js ou timber.js ou default.js ou style.js. Il peut y avoir un .liquid à la fin.

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

/* Barre Dynamique */
function typingEffect() {
  
  const textes = [
    {
      text: "des prix attractifs !"
    },
    {
      text: "la livraison gratuite !"
    },
    {
      text: "une garantie satisfait ou remboursé !"
    },
    {
      text: "un service après vente de qualité !"
    },
    // mettre ici 
  ];
  
  /* Pour rajouter un texte mettez au niveau du 'mettre ici' le code entre les --- ci-dessous:
  ---
  {
    text: "autre texte"
  },
  ---
  */

  let phrases = [];
  textes.map(item => phrases.push(item.text));
  
  const text = document.getElementById("typing-effect");
  let counter = 0;
  let currentIndex = getRandomInt(0, phrases.length - 1);
  let stepInterval = setInterval(() => { step(); }, 100);
  let delInterval;
  let delTimeout;

  function getRandomInt(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }

  function delIntervalCallback(){
    delInterval = setInterval(() => { del(); }, 50);
    clearTimeout(delTimeout);
  }

  function del(){
    if(counter == 0){
      let newIndex = getRandomInt(0, phrases.length - 1);
      while(newIndex == currentIndex){
        newIndex = getRandomInt(0, phrases.length -1 );
      }
      currentIndex = newIndex;
      clearInterval(delInterval);
      return stepInterval = setInterval(() => { step(); }, 50);
    }
    text.textContent = text.textContent.slice(0, -1)
    counter--;
  }

  function step(){
    if(counter >= phrases[currentIndex].length){
      clearInterval(stepInterval);
      return delTimeout = setTimeout(() => { delIntervalCallback(); }, 2000);
    }
    text.textContent += phrases[currentIndex][counter];
    counter++;
  }
}

typingEffect();

Partie HTML

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

Rendez vous dans Boutique en ligne – Actions – Modifier le code – Sections – header.liquid

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

<!-- Barre Dynamique -->
<div class="typing-effect__banner">Notre boutique vous propose <span id="typing-effect" class="typing-effect"></span></div>

Version Thèmes Vintages (OS 1.0 – avant 2022)

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

Installation du système

Partie CSS

Rendez vous dans Boutique en ligne – Actions – Modifier le code – Assets (Ressources)

Trouvez le fichier .css utilisé par votre thème : généralement base.css, theme.css, style.css ou autre fichier .css

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

Toujours dans le dossier Assets (Ressources)

Trouvez cette fois un fichier .js. En général c’est theme.js ou timber.js ou default.js ou style.js. Il peut y avoir un .liquid à la fin.

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 Boutique en ligne – Actions – Modifier le 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>

Tips – toutes versions des thèmes

Seulement sur la page d’accueil

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 %}

Sauf sur la page d’accueil

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 !

Vidéo version Thèmes Vintages

Bon tuto shopify à tous 🙂

Merci de me laisser une petite note 😉

[Note moyenne de: 5 sur 19 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.

« Comment traduire les termes Color et Size en Français sur Shopify ?

Lien d’Essai Gratuit Shopify 2023 »

Cet article a 159 commentaires

Karim
16 Fév 2018 Répondre

Bonjour Dgeo,

Merci beaucoup, c’est super!
SVP, est-ce que pour la partie CSS et JS en colle le code en haut.
1. dgeo22
  16 Fév 2018 Répondre
  
  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
Antonin
16 Fév 2018 Répondre

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. dgeo22
  16 Fév 2018 Répondre
  
  Salut, merci. oui en supprimant le position:absolute;
  1. Bastien
    30 Mar 2019 Répondre
    
    ça fonctionne pas du tout
    1. Dgeo Dev
      7 Avr 2019 Répondre
      
      Hello, surement un thème incompatible dans ce cas 🙁
    2. hub
      1 Déc 2020 Répondre
      
      Salut merci pour ce tuto ! sur le thème prestige j’ai l’impression que ça ne marche pas non plus
francis
16 Fév 2018 Répondre

Bonjour.
Tuas testé sur mobile ?
1. dgeo22
  16 Fév 2018 Répondre
  
  Bien sur 😉
  1. Kevin
    9 Juil 2021 Répondre
    
    Sur mobile, avec le thème venture lorsqu’on affiche le menu d’accueil, la barre ne se décale pas et bouffe le menu, comment faire?
red
16 Fév 2018 Répondre

Salut.
Merci pour se tuto de qualité comme dab!!
ça ne fonctionne pas sur le thème turbo?
1. dgeo22
  16 Fév 2018 Répondre
  
  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
Mica
18 Fév 2018 Répondre

Merci pour ce tuto, fontionne tres bien chez moi 😉
dylan
18 Fév 2018 Répondre

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. dgeo22
  19 Fév 2018 Répondre
  
  Salut, merci pour ce retour, je fais tester cela bientot
  1. Yusuf
    25 Fév 2018 Répondre
    
    Bonjour le problème n’est toujours pas résolue, mais sinon excellent tips merci!
    1. Denis
      26 Fév 2018 Répondre
      
      Salut ayant eu le même soucis il a été corrigé donc recopie le code avec sa correction et c’est cool 😉
ChikitoNinho
18 Fév 2018 Répondre

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. dgeo22
  19 Fév 2018 Répondre
  
  Salut, la largeur ou la hauteur?
siumoy
26 Fév 2018 Répondre

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. dgeo22
  2 Mar 2018 Répondre
  
  Salut et merci pour le com
  Surement une incompatibilité jquery, ou votre thème n’est pas compatible
  1. Max
    26 Mar 2021 Répondre
    
    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. Dgeo Dev
      26 Mar 2021 Répondre
      
      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
Denis
26 Fév 2018 Répondre

Bonjour, sur le thème « pop » il n’y a pas de fichier .js.liquid ?
Merci
1. dgeo22
  2 Mar 2018 Répondre
  
  Bonjour, y en a forcément regardez bien, un nomdufichier.js ou .js.liquid
dany murray
28 Fév 2018 Répondre

comment on sais les code de couleur si on veux changer ?
1. dgeo22
  2 Mar 2018 Répondre
  
  Bonjour en regardant ici: https://www.w3schools.com/colors/colors_picker.asp
Flo
1 Mar 2018 Répondre

Comment faire pour que le texte reste fixe ? Merci
1. dgeo22
  2 Mar 2018 Répondre
  
  Mettre uniquement un texte sans utiliser ce tuto lol 🙂
JO
4 Mar 2018 Répondre

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
JO
4 Mar 2018 Répondre

c’est bon merci!!!
Cedric
19 Mar 2018 Répondre

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. Dgeo GD
  24 Mar 2018 Répondre
  
  Bonjour, surement un conflit avec une app sur la fiche produit
2. AMINE OUZZANE
  20 Déc 2020 Répondre
  
  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
Florian
12 Avr 2018 Répondre

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. Dgeo GD
  14 Avr 2018 Répondre
  
  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
Blerdon Débieux
13 Avr 2018 Répondre

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. Dgeo GD
  14 Avr 2018 Répondre
  
  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
Olivier
30 Mai 2018 Répondre

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. Dgeo Dev
  31 Mai 2018 Répondre
  
  Merci pour le commentaire 😉 pour une telle modification il faudrait un autre code
Ferreira Matthias
30 Oct 2018 Répondre

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
CLEMENT HAUSSOULIER
14 Jan 2019 Répondre

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. Dgeo Dev
  29 Jan 2019 Répondre
  
  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 %}
Sarah
24 Fév 2019 Répondre

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 ?
Nytaneliah Ranaivoson
28 Fév 2019 Répondre

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
etienne
16 Juil 2019 Répondre

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 ?
1. Dgeo Dev
  20 Juil 2019 Répondre
  
  Hello, merci pour le com
  Regarde ici en fin de tuto y a le code pour 😉
  https://dgeodev.com/tuto-comment-faire-un-footer-avec-badges-de-confiance-sur-shopify/
Hugo
10 Août 2019 Répondre

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. Dgeo Dev
  15 Août 2019 Répondre
  
  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. Ines
    6 Mai 2020 Répondre
    
    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. Dgeo Dev
      11 Mai 2020 Répondre
      
      Hello et merci pour le commentaire. Il faut remplacer dans la partie CSS position : relative par position : fixed
nono
30 Sep 2019 Répondre

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. Dgeo Dev
  30 Sep 2019 Répondre
  
  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. Nono
    2 Oct 2019 Répondre
    
    Resalut alors jai réussi a resoudrecmon problème de barre qui dépassait sur le menu …
    
    La jai un autre souci un morceau de code s’affiche quand je développe le menu une idée ??
    Merci beaucoup
    https://image.noelshack.com/fichiers/2019/40/3/1569974133-screenshot-20191002-015310-chrome.jpg
    1. Dgeo Dev
      2 Oct 2019 Répondre
      
      Hello, OK cool. Pour le soucis il faudrait me linker le lien du site en mp pour voir de quoi il en retourne
Andriano
2 Oct 2019 Répondre

Encore un tuto simple à mettre en place grâce à vos descriptions claires.
Merci 😉
Antho
6 Oct 2019 Répondre

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. Dgeo Dev
  6 Oct 2019 Répondre
  
  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 😉
nad
8 Oct 2019 Répondre

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. Dgeo Dev
  9 Oct 2019 Répondre
  
  Bonjour, étrange les possesseurs de Speedfly n’ont jamais eu de soucis avec ce tuto 🙁 essaye de reprendre depuis le début pas à pas 🙂
NADI
8 Oct 2019 Répondre

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. Dgeo Dev
  9 Oct 2019 Répondre
  
  Hello, je refais mes tutos en vidéos je regarderai à ce moment la si tout fonctionne comme il faut 😉
Delva Samuel Ridal Cene
8 Oct 2019 Répondre

Salut!!!
Vous allez bien Frero?
Comment je peux changer la couleur du texte ?
1. Dgeo Dev
  9 Oct 2019 Répondre
  
  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.
Delva Samuel Ridal Cene
11 Oct 2019 Répondre

Salut! Frero, Vous allez bien!

Jutilise le theme Empire votre tuto ne fonctionne pas. J » attends votre precieuse reponse!
1. Dgeo Dev
  14 Oct 2019 Répondre
  
  Hello, je ne connais pas vraiment ce thème, je ne peux donc pas affirmer que mes tutos fonctionnent dessus 🙂
Delva Samuel Ridal Cene
14 Oct 2019 Répondre

Merci! Big
Hana Dahmouche
21 Oct 2019 Répondre

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. Dgeo Dev
  21 Oct 2019 Répondre
  
  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
yaya33
15 Nov 2019 Répondre

Bonjour merci pour ce Tuto comment faire pour que la barre reste visible même quand on scroll merci a toute l’equipe !!
1. Dgeo Dev
  15 Nov 2019 Répondre
  
  Hello, ca sera bientôt expliqué en vidéo sur cette chaine 😉 https://www.youtube.com/c/speedecom abonnez-vous pour ne pas louper le tuto 😉
Elina A.
29 Nov 2019 Répondre

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. Dgeo Dev
  30 Nov 2019 Répondre
  
  Bonjour et merci pour le message 🙂 oui il suffit de modifier les: backDelay: 300, typeSpeed: 70 de chaque élément 🙂
  1. Dme081
    17 Déc 2019 Répondre
    
    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. Dgeo Dev
      19 Déc 2019 Répondre
      
      Hello, oui il est possible de mettre le pagespeed plus élevé, il faut jouer avec les valeurs des otpions.
Flo'
3 Déc 2019 Répondre

Génial merci l’ami !
tristan
4 Mar 2020 Répondre

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. Dgeo Dev
  10 Mar 2020 Répondre
  
  Hello, je pense que le code a été collé à un mauvais endroit. essayez de le mettre tout en haut du fichier.
NOURDINE
22 Avr 2020 Répondre

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. Dgeo Dev
  23 Avr 2020 Répondre
  
  Hello, bizarre, la comme ça je vois pas trop 🙂
Abel
22 Avr 2020 Répondre

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!
1. Dgeo Dev
  23 Avr 2020 Répondre
  
  Hello, oui c’est possible en combinant avec ce tuto 😉 https://dgeodev.com/comment-personnaliser-fiche-produit-shopify/
Abel
23 Avr 2020 Répondre

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. Dgeo Dev
  24 Avr 2020 Répondre
  
  Hello, navré j’ai bcp de demandes parfois je mélange 😉 j’ai ajouté ces cas de figure en bas du tuto 🙂
Abel
24 Avr 2020 Répondre

Top merci !
Marco
27 Avr 2020 Répondre

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. Dgeo Dev
  27 Avr 2020 Répondre
  
  Hello et merci pour le commentaire. Je comprends fort bien cette demande cependant ce code ne le permet pas malheureusement 🙁
Tonton Lx
29 Avr 2020 Répondre

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. Dgeo Dev
  30 Avr 2020 Répondre
  
  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
Joseph
3 Mai 2020 Répondre

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. Dgeo Dev
  5 Mai 2020 Répondre
  
  Hello et merci pour le com. Hum non j’ai pas d’idée comme ça mais MP au besoin.
marvin
9 Mai 2020 Répondre

Salut dgeo

merci pour ce superbe contenue mais il s affiche également dans la partie collection …
comment faire pour l enlever ? merci
1. Dgeo Dev
  11 Mai 2020 Répondre
  
  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 %}
mika
19 Mai 2020 Répondre

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. mika
  19 Mai 2020 Répondre
  
  j’oubliai.. j’utilise le theme speedfly
  1. Dgeo Dev
    20 Mai 2020 Répondre
    
    Hello, si tu a speedfly tu peux demander au support au regardera 😉 speedecom.freshdesk.com
cagtay
24 Juil 2020 Répondre

j’ai speedfly aussi mais aucune connaissance en technique peux tu m’aider merci d’avance
1. Dgeo Dev
  24 Juil 2020 Répondre
  
  Hello, tu peux dans ce cas contacter le support ici 🙂 speedecom.freshdesk.com
Theo
5 Août 2020 Répondre

Bonjour,

Merci pour ce tuto ! Est-il possible de changer la police de la barre dynamique ? Merci beaucoup
1. Dgeo Dev
  6 Août 2020 Répondre
  
  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 🙂
warren
29 Sep 2020 Répondre

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. Dgeo Dev
  1 Oct 2020 Répondre
  
  Hello, étrange faut faire f12 et voir les erreurs, il manque peut être l’appel à jquery
Lucas
4 Oct 2020 Répondre

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. Dgeo Dev
  5 Oct 2020 Répondre
  
  Hello, mettre une condition comme expliqué sur la fin du tuto et mettre
  {% if template != "cart" or template != "product" %} le code html... {% endif %}
  1. Lucas
    14 Oct 2020 Répondre
    
    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 ..
    1. Dgeo Dev
      15 Oct 2020 Répondre
      
      Hello dans ce cas tu peux contacter notre support afin de voir si on peut faire une intervention minime 🙂 https://speedecom.freshdesk.com
emma
24 Oct 2020 Répondre

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. Dgeo Dev
  26 Oct 2020 Répondre
  
  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.
mina
2 Nov 2020 Répondre

Bonjour, comment en pas avoir le texte dynamique su chaque page mais uniquement sur la landing page. merci
1. Dgeo Dev
  3 Nov 2020 Répondre
  
  Hello, il faut faire des conditions 😉 le prochain tuto en parlera
Manoline Phanithavong
4 Nov 2020 Répondre

Bonjour je ne trouve pas les assets avec le theme « Début » s’il vous plait pourriez-vous m’aider merci d’avance
1. Dgeo Dev
  6 Nov 2020 Répondre
  
  Résolu en mp 🙂
michel
14 Nov 2020 Répondre

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
1. Dgeo Dev
  15 Nov 2020 Répondre
  
  Hello, si tu as speedfly tu peux directement contacter le support ici 😉 sav@speed-ecom.eu
Amir
25 Nov 2020 Répondre

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. Dgeo Dev
  25 Nov 2020 Répondre
  
  Hello, il faut donc trouver un theme.css ou un fichier avec une extension .css, .scss ou .scss.liquid 🙂
kate
29 Nov 2020 Répondre

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. Dgeo Dev
  30 Nov 2020 Répondre
  
  Hello, tu peux demander au support ici on verra ce qu’on peut faire 😉 speedecom.freshdesk.com
adrien
1 Déc 2020 Répondre

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. Dgeo Dev
  1 Déc 2020 Répondre
  
  Hello, il doit certaines avoir des erreurs dans la console de développement faudra me dire lesquelles 🙂 il doit surement manquer jquery
NATHANAEL DAHOMAIS
14 Déc 2020 Répondre

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. Dgeo Dev
  14 Déc 2020 Répondre
  
  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é 🙁
Will
18 Déc 2020 Répondre

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. Dgeo Dev
  18 Déc 2020 Répondre
  
  Hello, un .css sinon 🙂
William
18 Déc 2020 Répondre

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. Dgeo Dev
  18 Déc 2020 Répondre
  
  Hello, il semblerait que la partie js soit mal mise. Faudrait refaire le tuto pour voir si cela corrige le probleme.
William
29 Déc 2020 Répondre

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. Dgeo Dev
  29 Déc 2020 Répondre
  
  dans la partie .flash-infos du css rajouter une propriété z-index:99999; pour savoir comment faire : https://www.youtube.com/watch?v=MItTZYhn_iE&ab_channel=DgeoDev
  1. William
    30 Déc 2020 Répondre
    
    Génial ! Merci !!!
Victor
5 Fév 2021 Répondre

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. Dgeo Dev
  5 Fév 2021 Répondre
  
  Hello, il faut mettre les traductions dans tous les fichiers locales – donc le en.json et le fr.json 🙂
  1. Victor
    7 Fév 2021 Répondre
    
    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. Dgeo Dev
      7 Fév 2021 Répondre
      
      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. Victor
        7 Fév 2021
        
        C’est ce que j’ai fait ! Et pour être sûr que j’avais bien coder j’ai essayer de mettre 2 fois {{ ‘header.text.phrase’ | t }}.
        Mais ça ne me l’a traduit que dans la première partie, et non le texte dynamique.
        Voici des photos à l’appui
        https://ibb.co/NL2C9qg
        https://ibb.co/5LSxrT5
        https://ibb.co/Z6d6Ynq
        https://ibb.co/9W5DwmQ
      2. Dgeo Dev
        7 Fév 2021
        
        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’;
        }
Mickael
5 Fév 2021 Répondre

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. Dgeo Dev
  6 Fév 2021 Répondre
  
  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 🙂
Victor
7 Fév 2021 Répondre

Merci DGEO, la solution alternative a bien marché !
1. Dgeo Dev
  8 Fév 2021 Répondre
  
  Super 😉
Vince
15 Fév 2021 Répondre

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. Dgeo Dev
  16 Fév 2021 Répondre
  
  Hello, faudrait m’envoyer le lien pour voir cela plus en détail
Vince
15 Fév 2021 Répondre

J’ai oublié de précisé que le soucis se trouvait uniquement sur la page d’accueil
vincent
9 Mar 2021 Répondre

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. Dgeo Dev
  10 Mar 2021 Répondre
  
  Hello, il doit y avoir un conflit de code ou d’apps 🙁 un lien svp? en MP
rachach
5 Mai 2021 Répondre

Bonjour, merci pour ces tips
Comment réduire la taille de l’écriture svp ?
alexis plessiet
30 Nov 2021 Répondre

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 : https://generatecommerce.myshopify.com/
1. Dgeo Dev
  1 Déc 2021 Répondre
  
  Hello, il manque le mot de passe pour accéder au site 🙂
alexis plessiet
14 Jan 2022 Répondre

Bonjour ! je suis sur le thème aube maintenant et il semblerais que le JS fonctionne un peu au Hazard sur différentes pages . https://patisseasy.fr/
Des fois il y’a une erreur des fois ca marche sur une autre page mais jamais sur la page d’accueil. tu peux m’aider stp ? ..
popo
17 Jan 2022 Répondre

Bonjour, je suis sur le thème DAWN et les fichiers ont des noms complètement différents de ce fait je ne trouve pas sur quelle section y mettre chaque code.
merci !
1. Dgeo Dev
  18 Jan 2022 Répondre
  
  Hello, sur Dawn c’est base.css / global.js et header.liquid
Coumba diakite
28 Mai 2022 Répondre

Bonjour j’ai besoin d’aide c’est urgent s’il vous plaît
1. Dgeo Dev
  1 Juin 2022 Répondre
  
  Bonjour, en quoi puis-je vous aider ?
David
13 Oct 2022 Répondre

Hello !
Merci pour tous ces tutos, j’en suis fan !
Petite question. Comment faire pour enlever le mode « random » des phrase stp ?
Merci beaucoup pour ta réponse.
1. Dgeo Dev
  14 Oct 2022 Répondre
  
  Hello, merci c’est sympa 🙂 il suffit de ne mettre qu’un texte ou alors le meme à chaque fois 🙂
  1. David
    15 Oct 2022 Répondre
    
    Ah bah oui logique !.
    Merci pour ta réponse.
Louane
5 Mar 2024 Répondre

Hello Dgeo ravi de voir que tu es encore actif après toutes ces années de bons et loyaux services , je t’écris ici pour savoir si tu avais une solution à mon souci :

– Seulement la partie statique s’affiche (theme warehouse)

Y a il t un moyen de contourner ceci ?
1. Dgeo Dev
  7 Mar 2024 Répondre
  
  Hello, oui on essaie de rester actif même si la trend shopify est moins active 😀
  C’est un soucis js dans ce cas : soit il est mis a un mauvais endroit soit il est mal interprété… Au besoin je propose un service d’installation de mini intervention ou hack personnalisé à 9e si intéressé me contacter ici : dgeodev@gmail.com
Taryl
3 Juin 2024 Répondre

bonjour merci beaucoup pour ce tutoriel, parcontre lorsque ma page est traduite en anglais le texte reste en français seriez vous comment pourrais faire que le texte » notre boutique vous propose … » se traduise automatiquement lorsque la page et en anglais svp??
1. Dgeo Dev
  19 Juin 2024 Répondre
  
  Hello, ah navré ce n’est pas possible car le contenu est directement créé en francais – Il faudrait un dev spécifique ! au besoin nous contacter ici https://speed-ecom.eu/contact

Version Thèmes Récents – (OS 2.0 – après 2022)

Installation du système

Partie CSS

Partie JS

Partie HTML

Version Thèmes Vintages (OS 1.0 – avant 2022)

Installation du système

Partie CSS

Partie JS

Partie HTML

Tips – toutes versions des thèmes

Seulement sur la page d’accueil

Sauf sur la page d’accueil

Vidéo version Thèmes Vintages

Besoin d'aide ?

🤗 Vous souhaitez me remercier pour mes Tutos ?

Besoin de déléguer votre SAV ?

🤗 Vous souhaitez me remercier pour mes Tutos ?

Vous devriez également aimer

Comment ne pas Référencer et Indexer des Pages sur Shopify ?

Comment mettre un système d’auto-complétion sur le moteur de recherche de Shopify ?

Créer un système de Copier/Coller d’un code promo sur Shopify

Cet article a 159 commentaires

Karim

dgeo22

Antonin

dgeo22

Bastien

Dgeo Dev

hub

francis

dgeo22

Kevin

red

dgeo22

Mica

dylan

dgeo22

Yusuf

Denis

ChikitoNinho

dgeo22

siumoy

dgeo22

Max

Dgeo Dev

Denis

dgeo22

dany murray

dgeo22

Flo

dgeo22

JO

JO

Cedric

Dgeo GD

AMINE OUZZANE

Florian

Dgeo GD

Blerdon Débieux

Dgeo GD

Olivier

Dgeo Dev

Ferreira Matthias

CLEMENT HAUSSOULIER

Dgeo Dev

Sarah

Nytaneliah Ranaivoson

etienne

Dgeo Dev

Hugo

Dgeo Dev

Ines

Dgeo Dev

nono

Dgeo Dev

Nono

Dgeo Dev

Andriano

Antho