Vous passez par oberlo et vous en avez marre de revenir sur chaque fiche pour modifier le nom des variantes Color et Size?

Alors ce tuto est fait pour vous !

Ce bout de code va automatiquement remplacer l’occurrence Color et Size pour les transformer en Couleur et Taille.

1 Rendez vous dans online store – actions – edit code.

2 Trouvez le dossier Assets et repérez un fichier .js.liquid (timber.js.liquid, theme.js.liquid ou autre fichier .js.liquid selon le thème).

3 Rendez vous tout en bas et copiez/collez le code ci-dessous:

$(document).ready(function(){
 $("form label").text(function () { 
 return $(this).text().replace("Color", "Couleur");
 });
 $("form label").text(function () { 
 return $(this).text().replace("Size", "Taille");
 });
});

Si vous avez Speedfly 2.01 ou +

$(document).ready(function(){
 $(".swatch .header").text(function () { 
 return $(this).text().replace("Color", "Couleur");
 });
 $(".swatch .header").text(function () { 
 return $(this).text().replace("Size", "Taille");
 });
});

Pour changer l’intitulé des variantes sur Speedfly

$(document).ready(function(){
 $(".swatch-element label").text(function () { 
 return $(this).text().replace("Color", "Couleur");
 });
});

Si vous avez Turbo

$(document).ready(function(){
 $(".swatch .option_title").text(function () { 
 return $(this).text().replace("Color", "Couleur");
 });
 $(".swatch .option_title").text(function () { 
 return $(this).text().replace("Size", "Taille");
 });
});

Si vous souhaitez modifier d’autres termes il suffira simplement de dupliquer une portion de code et de changer le terme à traduire.

Ce tutoriel existe aussi en vidéo

Bon tuto à tous 🙂

Merci de me laisser une petite note 😉
[Note moyenne de: 5 sur 7 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 56 commentaires

  1. Merci pour tes excellents tutos !

  2. Merci je cherchais depuis un petit bout de temps la solution.

  3. Super !Merci!

  4. Ca marche parfaitement merci ! Maintenant il ne m’affiche plus les variants dans mes pages catalogues, shopify ne reconnaissant seulement les termes « Color » et « Colour » pour comprendre qu’il s’agit d’une variante couleur et non la taille par exemple.
    Sauriez-vous où je dois aller modifier ça pour que shopify reconnaisse le terme « Couleur » comme une variante « Color » ?

    Un grand merci à vous je crois que j’ai appliqué tous vos tutos 😉

    JB

    1. Bonjour, je suis navré mais je n’ai rien compris…

  5. Bonjour à tous
    Je voudrais faire un shop en ENG, je l’ai fait dans édit language, mais quand je fais preview il y a des parties qui ne sont pas traduites en ENG dans la fiche produit (FAQ, Description, Pourquoi acheter chez nous)
    Quelqu’un peut il me dire comme traduire ces parties en ENG SVP
    Merci à tous

    1. En achetant Speedfly vous avez les trads disponibles 😉

  6. Bonjour désolé mais chez moi cela ne marche pas est ce que c’est le fait que j’utilise le thème de luxe ?

    1. Salut, à mettre dans le surcharge.js.liquid si tu as Speedfly

  7. Bonjour,

    J’ai placé dans mon fichier .js.liquid le texte tout en bas mais cela ne fonctionne pas,

    Il y a t’il un soucis avec mon thème ? le nom complet est axajify.js.liquid

    Bonne journée

    1. Bonsoir, non ce n’est pas ce fichier qu’il faut utiliser. un theme.js.liquid ou style.js.liquid ou timber.js.liquid

      1. Il faut le placer dans theme.js alors ?

        Car en .js.liquid je n’ai que le axajify.js.liquid

        1. Autant pour moi, cela marche effectivement bien dans theme.js

          En vous remerciant et vous souhaitant une bonne journée,

          Cordialement

  8. Niquel merci encore une fois pour ton super tuto.

    1. Merci pour le com 😉

  9. Super merci

  10. bonjour,
    après de multiple essai je n’ai pas réussi a traduire les termes comme dans le tuto…
    dans theme.js ou même dans d’autre assets cela ne fonctionne pas.
    j’ai le thème « debut » sur shopify.

    En espérant obtenir une réponse
    Merci pour vos Tuto! (c’est le seul qui me résiste 😉

    1. Hello, peut être une erreur JS quelque part, il faudrait voir le site pour constater le problème en réel

  11. bonjour et merci pour ce super tutoriel !
    Ca fonctionne pour moi :).

    Malheureusement les mots « inch » et « cards » (je vends de la carterie) ne sont pas traduits et non trouvables dans les champs à traduire en français. Auriez-vous une astuce ?
    Ca serait super.

    Merci encore beaucoup pour votre aide 🙂 .

    1. Bonsoir, merci pour le commentaire. Il faut simplement modifier les occurences Color et Size par vos 2 mots (attention aux majuscules).

  12. Bonsoir, ça fonctionne très bien pour « color » et « size ».
    En revanche, j’ai un souci pour certains articles notamment les chaussures, je n’arrive pas à supprimer le mot « Shoe » et me retrouve avec « Shoe Taille ».

    1. Hello, il faut rajouter quelque chose comme ca:

      $("form label").text(function () {
      return $(this).text().replace("Shoe Taille", "Taille");
      });

  13. Salut,
    Super tuto
    J’ai pas pu le mettre en place car j’ai un thème payant différent du tiens.

    Et malheureusement, je n’ai pas de theme.js.liquid ou style.js.liquid ou timber.js.liquid ou theme.js.

    j’ai essayé de le placer dans différents fichiers mais rien à faire. Je dois forcément le mettre dans un .js ? Dans jquery.js ça n’a pas fonctionné.

    Encore Merci
    Bonne journée

    1. Hello, oui il faut un fichier .js donc trouver le bon dans assets 🙂

  14. Merci beaucoup pour ce tuto simple et efficace ! 🙂

  15. Bonjour , merci à toi pour ton aide mais malheureusement j’ai essayer les 2 codes dans J.liquid mais ça ne marche pas ! Je ne sais pas quoi faire ? Merci

    1. Hello, Surement le mauvais fichier ou alors une erreur JS. Tu peux me MP sur mon facebook au besoin.

  16. Bonjour, Super info ! Cela fonctionne très bien sur la page produit mais sais tu comment l’adapté au mode quick-view stp ? Et peux t’on ajouter des champs pour les variantes de couleurs? Black en Noir etc… ?

    Merci

    1. Hello, Merci pour le com.
      Pour le Quick view ca dépent de bcp de facteurs. Si il est intégré, si c’est une app… en gros il faut jouer et trouver les identifiants css ou id pour adapter le tuto en conséquence. Bonne chance et bonne journée

  17. Bonjour, c’est génial !
    Et pour mettre à jour automatiquement les variantes elles-mêmes ?

    Ex pour la couleur: White -> Blanc ?

    J’ai ajouté la même ligne mais ça ne semble pas fonctionner

    Merci 🙂

    1. Hello, merci pour le message. La c’est plus tendu car ca dépend bcp du thème utilisé. Au besoin MP pour voir ensemble.

  18. ça ne fonctionne pas dans le thème turbo. Le seul fichier js.liquid que j’ai est app.js.liquid mais ça ne donne rien.

    1. Hello, oui turbo est assez particulier… Mes tutos fonctionnent rarement avec ce thème navré

      1. Finalement ça fonctionne, j’ai été mauvaise langue, erreur de frappe de ma part, désolé.
        Il faut saisir le code dans apps.js.liquid.
        En revanche, pour le raccourci « + ACCÈS RAPIDE » aux fiches produits, ça ne fonctionne pas. Je cherche encore où rajouter ce code.

  19. Merci pour ce tuto.

    Ps c’est bizarre que shopify ne propose pas la traduction.

  20. La premiere technique fonctionne avec Venture au top merci infiniment!

  21. Bonjour, js.liquid n’existe pas sur mon thème Venture.
    Dans ASSETS j’ai trouvé celui là: theme.js > j’ai collé le code en bas. j’ai pas du faire ça correctement ça marche pas.
    Les dernières lignes avant c’est bien sensé être ça ?
    onLoadHideLazysizesAnimation();
    };

    1. Hello, oui c’est ça tout en bas. il manque peut être jquery. voir dans la console si y a une erreur.

  22. Bonjour Dgeo, j’ai réussi a traduire sur ma page produit les terme « Color »-> »Couleur » et « Ships From »-> »Expédition » mais dans mon panier c’est toujours inscrit « Color » et « Ships From ».
    Pourriez-vous m’aider?

    1. Bonjour, dans le panier c’est effectivement un autre code à developper mais ca dépend du thème, un code générique serait impossible. à voir selon le thème utilisé. MP au besoin le lien du site.

  23. Salut Dgeo, pour speedfly ça fonctionne bien en mode « swatch » dans la fiche produit, en revanche quand on utilise la barre déroulante ça ne fonctionne plus…Sais-tu quelle partie du code je dois modifier ?

    1. Hello, logiquement le 1er code du tuto devrait fonctionner 😉

  24. Bonjour Dgeo, Le code fonctionne pour le remplacement du nom des variante. En revanche je souhaite pourvoir changer les nom des couleurs pour les mettre en français.
    Comme j’utilise la fonction « color swatches » et que cela ne prend en compte que les noms des couleur html en anglais.
    Ex https://www.rapidtables.com/web/color/html-color-codes.html
    L’objectifs est de pouvoir traduire White = BLANC.

    J’attend ton retour, merci d’avance

    1. Hello, oui y a un code plus bas qui permet de faire ce que tu vuex 😉

  25. Hello Dgeo tout d’abord un grand merci pour tout t’es tutos j’attend toujours avec impatience de nouveaux tutos cela dit j’ai un souci pour la traduction sur mon thème qui ce nomme « Wookie » aurais tu une idée dans laquelle je pourrais me diriger ? merci.

    1. Hello et merci pour le com 🙂 hum non navré je ne connais pas du tout ce thème 🙁

  26. Salut tes tuto me font gagner un temps pharamineux, merci beaucoup pour ce que tu fais.

    ps: si tu faisais une formation sur le liquid de shopify je serais client 😉

    1. Hello et merci pour le commentaire c’est sympa 😉 j’ai déjà fais une playlist la dessus au besoin et je pense effectivement me pencher plus sur le liquid 😉 https://youtu.be/VPsvE1-vLAA

  27. Bonjour j’aurais besoin d’un petit coup de pouce sur mon theme sa ne veux pas traduire si quelqu’un a à la solution je met le morceau de code :

    $(document).ready(function(){
    $(« .tt-wrapper .tt-title-options »).text(function () {
    return $(this).text().replace(« Color », « Couleur »);
    });
    $(« .tt-wrapper .tt-title-options »).text(function () {
    return $(this).text().replace(« Size », « Taille »);
    });
    });

    merci pour touts t’es tutos ces le top.

    1. Hello, dur de donner une réponse sans votre le shop. le mieux serait de me linker l’url dans le messenger ci-dessous 😉

    1. Merci, malheureusement votre thème ajoute une information en plus de l’intitulé, il met la couleur 🙁 du coup ce n’est pas possible sauf intervention technique dans le code

  28. ok je vous remercie

    1. Bonjour, avez-vous trouvé comment faire depuis ?

  29. Bonjour, j’ai le theme debut je suis allé dans theme.js et ca ne fonctionne pas, le code n’a pas change depuis le temps ?

    1. Bonjour,
      J’ai malheureusement le même problème, avez-vous trouvé une solution ?

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