Vous passez par dsers ou 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 !

Installation du code

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

1 Rendez vous dans Boutique en ligne – Actions – Modifier Code

2 Trouvez le dossier Ressources (Assets) et repérez un fichier global.js, theme.js, ou un fichier xxx.js.liquid que votre thème utilise

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

Autres thèmes – Attention c’est plus global alors si problème supprimer le code !

$(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 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 10 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 optimiser son SEO sur Shopify ?

Comment créer une barre d’information avec textes dynamiques sur shopify ? »

Cet article a 58 commentaires

Chris
13 Fév 2018 Répondre

Merci pour tes excellents tutos !
Mica
18 Fév 2018 Répondre

Merci je cherchais depuis un petit bout de temps la solution.
Marion
21 Fév 2018 Répondre

Super !Merci!
JB
1 Mar 2018 Répondre

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. dgeo22
  2 Mar 2018 Répondre
  
  Bonjour, je suis navré mais je n’ai rien compris…
marcel
6 Mar 2018 Répondre

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. dgeo22
  7 Mar 2018 Répondre
  
  En achetant Speedfly vous avez les trads disponibles 😉
RENE DE NAEYER
3 Avr 2018 Répondre

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. Dgeo GD
  5 Avr 2018 Répondre
  
  Salut, à mettre dans le surcharge.js.liquid si tu as Speedfly
Guillaume BRUNET
11 Avr 2018 Répondre

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. Dgeo GD
  11 Avr 2018 Répondre
  
  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. Guillaume BRUNET
    13 Avr 2018 Répondre
    
    Il faut le placer dans theme.js alors ?
    
    Car en .js.liquid je n’ai que le axajify.js.liquid
    1. Guillaume BRUNET
      13 Avr 2018 Répondre
      
      Autant pour moi, cela marche effectivement bien dans theme.js
      
      En vous remerciant et vous souhaitant une bonne journée,
      
      Cordialement
Max FOUCHER
12 Mai 2018 Répondre

Niquel merci encore une fois pour ton super tuto.
1. Dgeo Dev
  15 Mai 2018 Répondre
  
  Merci pour le com 😉
VERLINDEN PASCALE
6 Juil 2018 Répondre

Super merci
seb
11 Oct 2018 Répondre

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. Dgeo Dev
  18 Oct 2018 Répondre
  
  Hello, peut être une erreur JS quelque part, il faudrait voir le site pour constater le problème en réel
Amillu
28 Jan 2019 Répondre

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. Dgeo Dev
  29 Jan 2019 Répondre
  
  Bonsoir, merci pour le commentaire. Il faut simplement modifier les occurences Color et Size par vos 2 mots (attention aux majuscules).
ael
7 Fév 2019 Répondre

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. Dgeo Dev
  20 Fév 2019 Répondre
  
  Hello, il faut rajouter quelque chose comme ca:
  $("form label").text(function () { return $(this).text().replace("Shoe Taille", "Taille"); });
Max
10 Fév 2019 Répondre

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. Dgeo Dev
  20 Fév 2019 Répondre
  
  Hello, oui il faut un fichier .js donc trouver le bon dans assets 🙂
Paul
7 Mar 2019 Répondre

Merci beaucoup pour ce tuto simple et efficace ! 🙂
Mike
5 Avr 2019 Répondre

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. Dgeo Dev
  7 Avr 2019 Répondre
  
  Hello, Surement le mauvais fichier ou alors une erreur JS. Tu peux me MP sur mon facebook au besoin.
Momo
30 Mai 2019 Répondre

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. Dgeo Dev
  30 Mai 2019 Répondre
  
  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
Pascal
21 Août 2019 Répondre

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. Dgeo Dev
  24 Août 2019 Répondre
  
  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.
ael
1 Oct 2019 Répondre

ç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. Dgeo Dev
  2 Oct 2019 Répondre
  
  Hello, oui turbo est assez particulier… Mes tutos fonctionnent rarement avec ce thème navré
  1. Ael
    3 Oct 2019 Répondre
    
    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.
Andriano
2 Oct 2019 Répondre

Merci pour ce tuto.

Ps c’est bizarre que shopify ne propose pas la traduction.
Jo
1 Nov 2019 Répondre

La premiere technique fonctionne avec Venture au top merci infiniment!
Flo
16 Nov 2019 Répondre

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. Dgeo Dev
  19 Nov 2019 Répondre
  
  Hello, oui c’est ça tout en bas. il manque peut être jquery. voir dans la console si y a une erreur.
Guillome
12 Jan 2020 Répondre

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. Dgeo Dev
  14 Jan 2020 Répondre
  
  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.
Corentin
20 Fév 2020 Répondre

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. Dgeo Dev
  21 Fév 2020 Répondre
  
  Hello, logiquement le 1er code du tuto devrait fonctionner 😉
Lhak
13 Avr 2020 Répondre

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. Dgeo Dev
  14 Avr 2020 Répondre
  
  Hello, oui y a un code plus bas qui permet de faire ce que tu vuex 😉
david
7 Nov 2020 Répondre

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. Dgeo Dev
  7 Nov 2020 Répondre
  
  Hello et merci pour le com 🙂 hum non navré je ne connais pas du tout ce thème 🙁
thomas
12 Nov 2020 Répondre

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. Dgeo Dev
  12 Nov 2020 Répondre
  
  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
david
22 Nov 2020 Répondre

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. Dgeo Dev
  23 Nov 2020 Répondre
  
  Hello, dur de donner une réponse sans votre le shop. le mieux serait de me linker l’url dans le messenger ci-dessous 😉
david meckler
24 Nov 2020 Répondre

Hello, cool merci
https://carlaa.fr/
1. Dgeo Dev
  24 Nov 2020 Répondre
  
  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
david meckler
24 Nov 2020 Répondre

ok je vous remercie
1. Ines
  5 Juin 2021 Répondre
  
  Bonjour, avez-vous trouvé comment faire depuis ?
remi
29 Jan 2021 Répondre

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. Adèle
  16 Mar 2021 Répondre
  
  Bonjour,
  J’ai malheureusement le même problème, avez-vous trouvé une solution ?
LC
31 Déc 2021 Répondre

Bonjour,
Avez-vous un code compatible avec le thème Showcase ?
Car en installant les functions ci-dessus cela ne fonctionne pas, ce qui est normal car créées pour vos thèmes.
Ce serai super, merci beaucoup.
1. Dgeo Dev
  31 Déc 2021 Répondre
  
  Bonjour, j’ai amélioré le tuto, vous pouvez tester le dernier code qui théoriquement devrait fonctionner (autres thèmes…). Bonne journée.

Installation du code

Si vous avez Speedfly 2.01 ou +

Pour changer l’intitulé des variantes sur Speedfly

Si vous avez Turbo

Autres thèmes – Attention c’est plus global alors si problème supprimer le code !

Ce tutoriel existe aussi en vidéo

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 créer un lien ancre sur Shopify

Comment Faire un Effet de Vague sur Shopify

Comment Créer un Effet de Survol d’un Menu sur Shopify

Cet article a 58 commentaires

Chris

Mica

Marion

JB

dgeo22

marcel

dgeo22

RENE DE NAEYER

Dgeo GD

Guillaume BRUNET

Dgeo GD

Guillaume BRUNET

Guillaume BRUNET

Max FOUCHER

Dgeo Dev

VERLINDEN PASCALE

seb

Dgeo Dev

Amillu

Dgeo Dev

ael

Dgeo Dev

Max

Dgeo Dev

Paul

Mike

Dgeo Dev

Momo

Dgeo Dev

Pascal

Dgeo Dev

ael

Dgeo Dev

Ael

Andriano

Jo

Flo

Dgeo Dev

Guillome

Dgeo Dev

Corentin

Dgeo Dev

Lhak

Dgeo Dev

david

Dgeo Dev

thomas

Dgeo Dev

david

Dgeo Dev

david meckler

Dgeo Dev

david meckler

Ines

remi

Adèle

LC

Dgeo Dev

Laisser un commentaire Annuler la réponse

Panier