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 6 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 42 commentaires

  1. Merci pour tes excellents tutos !

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

  3. 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…

  4. 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 😉

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

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

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

    1. Merci pour le com 😉

  8. Super merci

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

  10. 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).

  11. 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");
      });

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

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

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

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

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

  17. ç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.

  18. Merci pour ce tuto.

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

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

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

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

  22. 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 😉

Laisser un commentaire

Fermer le menu

formation seo gratuite shopify

Une formation Gratuite SEO sur Shopify ça te tente ?

Alors abonne-toi à la chaine et active la cloche pour ne pas louper l'arrivée des prochains modules !

Commencer la formation