Aujourd’hui, suite de notre tour de la fonction « Theme », avec un focus consacré aux textes inclus dans votre thème et à leur traduction.

 

Principes généraux

 

Vous pouvez avoir une langue active à la fois dans votre boutique.

Certains thèmes incluent plus de langues disponibles que la seule langue active, avec les traductions des textes déjà incluses. Ces contenus traduits incluent tous les textes de votre boutique, comme les descriptions de produits, les informations de contact, les mentions relatives au panier et à la procédure de commande.

Pour les thèmes qui incluent plusieurs langues, vous pouvez tout simplement la changer, en passant de l’une à l’autre.

Si votre thème ne contient pas la langue que vous souhaitez, vous pouvez aussi le traduire vous-même, comme nous allons le voir plus loin.

Notez aussi que tous les thèmes gratuits de Shopify incluent aussi la traduction espagnole de toutes les notifications par email.

 

Voir les langues disponibles dans votre thème

 

Pour connaître les langues disponibles dans votre thème, suivez ces étapes :

  • Rendez-vous sur la page « Online store / Themes ».
  • Cliquez sur le bouton « Actions / Edit language » du thème que vous désirez contrôler, ce qui vous fera accéder à la page du « Language editor ».
  • Une fois sur cette page, cliquez sur « Change theme language ».
  • Cliquez sur le menu déroulant pour voir toutes les langues disponibles dans ce thème.
    • Pour choisir une autre langue, sélectionnez-la dans la liste, puis cliquez sur « Save ».
    • Si la langue que vous désirez n’est pas disponible… vous allez devoir en créer la traduction.

 

Choisir une langue

 

Vous pouvez choisir n’importe quelle langue disponible pour l’afficher dans votre boutique.

Notez que, selon les thèmes, il peut arriver qu’une traduction ne soit pas complète et s’applique uniquement aux rubriques de panier et de commande (généralement, un thème premium inclut toujours des traductions complètes).

Si une traduction n’existe pas ou n’est pas accessible pour une partie du contenu d’un thème, la langue par défaut du thème est utilisée.

Sachez aussi que vous pouvez choisir d’appliquer un réglage spécifique au processus de commande, en allant l’activer sur la page « Checking / Settings ».

 

Créer une traduction

 

En suivant le même chemin que précédemment, choisissez « Other languages » dans le menu déroulant qui présente les langues disponibles.

Ensuite, dans les sous-menus suivants :

  • Choisissez une langue dans la ligne « Language ».
  • Choisissez une région (si cela est pertinent) dans la ligne « Region » (ou choisissez « All » pour sélectionner toutes les variations régionales.
  • Cliquez sur « Custom » pour créer un nom personnalisé pour la version que vous créez.
  • Sauvegardez.
  • Utilisez le « Language editor » (voir plus bas) pour saisir les traductions de votre thème (vos saisies sont automatiquement sauvegardées).
  • Assurez-vous que vous n’avez oublié de traduire aucune expression importante, en utilisant la fonction « Filter » de la page et en choisissant le filtre « Missing » (voir plus bas).

Si votre thème ne permet pas de traduire d’autres rubriques que celles qui sont relatives au panier et aux étapes de commande, et que vous voulez traduire intégralement votre thème, vous devez alors :

  • Changer de thème pour en choisir un qui vous donne cette possibilité.
  • Créer vous-même un nouveau fichier de localisation (à ne faire que si vous savez de quoi il s’agit, en sachant que je reparlerai de ce sujet ultérieurement).

 

Utiliser le « Language editor » pour ajouter ou modifier des contenus traduits

 

Vous pouvez consulter et mettre à jour n’importe quelle langue disponible dans votre thème, que vous ayez créé vous-même la traduction ou qu’elle ait été initialement fournie par le développeur du thème.

Cette traduction peut porter sur des mots isolés ou sur des blocs de texte plus complets.

Pour commencer, notez que le « Language editor » comporte une série d’onglets en haut de la page, qui correspondent à plusieurs grandes catégories de termes ou expressions, en fonction des zones de la boutique concernées.

  • L’onglet « General » : texte global et message, incluant les formulaires, les souscriptions et les recherches.
  • L’onglet « Blog » : tous les éléments associés à la lecture, à la publication et aux commentaires dans les articles de blog.
  • L’onglet « Cart » : tous les contenus affichés sur la page de panier.
  • L’onglet « Collections » : tous les textes associés à la création, à l’affichage, à la recherche et au tri des collections.
  • L’onglet « Contact » : tous les champs inclus dans les formulaires de contact.
  • L’onglet « Customer » : tous les champs et messages relatifs aux clients, à leurs comptes et aux détails des factures.
  • L’onglet « Home page » : tous les messages et intitulés des contenus de la page d’accueil.
  • L’onglet « Layout » : tous les contenus associés à l’affichage, comme les notes de bas de page et le statut des messages de connexion.
  • L’onglet « Products » : tous les messages relatifs à la consultation des produits et leur disponibilité.
  • L’onglet « Gift cards » : tous les messages relatifs à la création, l’utilisation et la gestion des cartes-cadeaux.
  • L’onglet « Date format » : mise en forme de l’affichage des dates.
  • L’onglet « Checkout and system » : tous les contenus associés au processus de commande, dont les intitulés des diverses étapes, les messages d’erreurs et les notes d’information.

Dans le thème et la langue qui vous intéresse, il vous suffit de saisir ou modifier le contenu de la casse (à droite) correspondant à l’expression d’origine du thème par défaut (généralement l’anglais, à gauche).

 

Les types de contenus de la traduction

 

Il existe trois types principaux de contenus que vous pouvez traduire dans le « Language editor » :

  • Le texte simple.
  • Le texte rédigé en HTML (qui contient les symboles < et >).
  • Le texte « Liquid » (incluant des éléments de code propres à Shopify, repérable grâce aux symboles { et }).

Vous n’êtes pas obligé de traduire chaque champ disponible (par exemple, les rubriques qui ne sont pas pertinentes pour votre boutique).

Vos changements étant sauvegardés automatiquement au fil de vos saisies, vous pouvez vous interrompre à tout moment. Vous pouvez accéder à vos traductions quand vous le voulez, en remodifiant ultérieurement des contenus déjà traduits.

Lorsque vous laissez un champ de traduction vide, le terme ou l’expression sera affiché dans la langue par défaut.

Attention aux contenus qui ne sont pas du texte simple !

Le texte simple peut être facilement remplacé par une traduction classique.

Par contre, les champs originaux qui contiennent des symboles particuliers (par exemple « Tagged « {{ tags }} » ») doivent être traduits avec beaucoup de précautions, sous peine de « casser » certaines fonctions dans l’affichage.

 

La traduction de contenus HTML

 

Même si vous n’êtes pas un spécialiste du code, vous pouvez tout à fait traduire vos expressions HTML, à partir du moment où vous respectez ces principes :

  • Vous devez seulement traduire ce qui ne se trouve pas à l’intérieur des symboles < et >.

Par exemple, si vous voulez traduire « Are you the store owner? <a href= »/admin » class= »text-link »>Log in here</a> »… vous allez obtenir « Êtes-vous le propriétaire de cette boutique ? <a href= »/admin » class= »text-link »>Connectez-vous ici</a> ».

Ne traduisez jamais les adresses de destination Web, seulement les autres composants de l’expression.

  • Ne modifiez pas les contenus des balises de style (qui permettent l’italique, le gras, etc.).

Ces balises se trouvent sous le format <strong> et </strong>, pour l’exemple d’une mise en gras et vous ne devez traduire que ce qui se trouve entre les balises, pas au sein des balises elles-mêmes.

Donc, si vous avez <strong>On sale</strong>, cela donnera <strong>En promotion</strong>.

  • Faites attention aux codes HTML &larr; et &rarr; qui permettent l’affichage des symboles « flèche droite » et « flèche gauche » et ne les supprimez surtout pas.

Par exemple, l’expression « &larr; Previous Product » se traduira par « &larr; Produit précédent ».

  • De façon générale, ne traduisez jamais les symboles et codes HTML, sous peine de créer des problèmes d’affichage pour vos visiteurs.

 

La traduction de contenus Liquid

 

La première règle est simple : ne traduisez jamais les contenus Liquid inclus dans des expressions à traduire.

J’en reparlerai dans d’autres focus, mais sachez déjà que Liquid est le langage propre à Shopify qui permet à votre boutique de fonctionner.

Vous pouvez facilement le reconnaître à la présence des symboles { et } autour des contenus concernés, sous trois formats possibles :

  • {{ et }}
  • {% et %}
  • {%- et -%}

Comme pour le HTML, contentez-vous de traduire les contenus qui sont extérieurs aux expressions incluses entre ces symboles.

Par exemple, l’expression « Posted on {{ date }} » doit se traduire par « Publié le {{ date }} ».

Voici un exemple de champ à traduire qui utilise un mélange de texte simple, de HTML et de Liquid : « <strong>{{ author }}</strong> on <strong><time datetime= »{{ date }} »>{{ date }}</time></strong> », qui se traduirait par « <strong>{{ author }}</strong> le <strong><time datetime= »{{ date }} »>{{ date }}</time></strong> ».

Comme vous le voyez, un seul terme (« on ») se traduit (par « le ») dans une expression pourtant longue.

 

Rechercher les traductions encore manquantes

Si une langue traduite vous affiche le message « This language is incomplete » en haut du « Language

editor », cela signifie que certains champs de traduction sont restés vides.

Si cela n’est pas volontaire, vous pouvez facilement retrouver les occurrences non traduites en suivant ces étapes :

  • Cliquez sur « Filter this pages ».
  • Cliquez sur « Filter translations ».
  • Choisissez « Missing » (« manquantes ») ou « Complete » (« Complètes ») dans le second sous-menu, selon que vous voulez afficher les traductions encore manquantes ou déjà effectuées.
  • Cliquez sur « Add filter ».

 

Utiliser le widget Google Translator dans votre boutique

 

Les explications qui suivent ne vous concernent que si votre thème ne propose pas la fonction du choix de la langue par le client.

Dans le cas où votre thème n’inclut pas cette fonction et que vous voulez donner à vos visiteurs la possibilité de traduire le contenu de votre boutique, vous pouvez utiliser le widget Google Translator en vous rendant sur cette page : https://translate.google.com/manager/website/add

  • Suivez les étapes d’enregistrement de votre boutique et de configuration des réglages.
  • À l’étape « Add plugin », copiez le code donné.
  • Dans votre boutique, rendez-vous sur la page « Online store / Themes ».
  • Sélectionnez le thème à éditer, cliquez sur le bouton « Actions », puis sur « Edit HTML/CSS ».
  • Recherchez la page qui s’appelle theme.liquid et ouvrez-la, puis collez le code là où vous voulez donner accès au sélecteur de langue dans votre boutique.
  • Sauvegardez le changement.

Pensez à vérifier, côté boutique, que l’affichage est satisfaisant.

Voici un exemple de site qui utilise ce widget, accessible en haut à gauche : https://google-translate.myshopify.com/

Notez que les traductions automatiques de Google Translator ne sont pas toujours idéales et qu’il est souvent préférable de choisir un thème qui permet l’affichage multilangues.

De plus, le choix d’un thème compatible vous évitera de mettre les mains dans le code de la boutique. J

Mais n’ayez pas peur non plus de la manipulation du code de la boutique, car sachez que j’aborderai la question dans un prochain focus de cette série consacrée à la fonction « Theme ».

À très bientôt pour la suite !