La traduction automatique cloud AI à utiliser avec Shopify nécessite un certain accès pour terminer la configuration :
La configuration Shopify est composée de 3 étapes simples :
Après votre connexion ou inscription au tableau de bord Linguise , il vous sera demandé d'enregistrer votre domaine pour autoriser la traduction.
Pour cela, copiez simplement votre nom de domaine avec le https:// inclus et sélectionnez Shopify comme plateforme.
Après cela, sélectionnez votre langue source et votre langue de destination.
Remarque importante sur le référencement : le nombre de langues que vous configurez a un impact important sur le référencement. Lorsque vous configurez vos langues de traduction, si vous avez une grande quantité de pages indexées (> 500), le moteur de recherche peut prendre beaucoup de temps pour les traiter. Cela peut avoir un impact sur votre référencement dans votre langue d'origine. C'est pourquoi nous vous conseillons d'ajouter dans un premier temps un maximum de 5 langues, puis lorsque c'est indexé, vous pourrez ajouter des langues par lot de 3 par mois.
Une fois que vous avez enregistré avec succès votre site Web dans le tableau de bord Linguise , vous aurez deux options pour procéder à l'installation.
Vous devriez probablement voir ce contenu, Si vous préférez ajouter automatiquement les enregistrements DNS, vous pouvez cliquer sur « Connectez votre DNS automatiquement ». « Cette fonctionnalité, appelée Entri, ajoutera automatiquement vos enregistrements DNS, vous permettant de procéder facilement à l'installation. L'autre option consiste à copier manuellement le DNS dans votre fournisseur de domaine.
Après avoir cliqué sur le bouton, Entri analysera l'URL de votre site web enregistré et vérifiera votre enregistrement DNS public. Sur cette base, il déterminera le fournisseur et le DNS requis.
Ensuite, vous pouvez cliquer sur « Autoriser auprès de [votre fournisseur de domaine] » (dans cet exemple, il s'agit de Cloudflare). Vous verrez alors le panneau se transformer en page de connexion de votre fournisseur de domaine, où vous pourrez vous connecter et continuer.
Une fois connecté à votre fournisseur de domaine, Entri fera le reste, en ajoutant automatiquement les enregistrements DNS appropriés. Un DNS par langue + un DNS TXT pour la clé de validation.
Vous devriez pouvoir voir que le DNS est ajouté dans votre domaine. Par exemple:
Une fois que vous l'aurez autorisé, Entri vous informera que tous les paramètres DNS ont été configurés avec succès.
Vous devriez pouvoir utiliser la fonction de traduction dès que toutes les entrées DNS ont été propagées sur votre domaine (cela prend généralement 20/30 minutes).
Si vous préférez l'installation manuelle , vous pouvez également le faire manuellement en suivant les étapes que nous vous fournirons ci-dessous.
Après avoir validé votre domaine, vous serez redirigé vers un écran où les DNS à ajouter à votre domaine sont prêts à être copiés. En fonction de votre société d'hébergement, la configuration du domaine peut être un peu différente, mais les noms des champs sont assez standards. Ces enregistrements sont nécessaires au chargement des pages multilingues de votre site Internet comme fr.domain.com, es.domain.com…
Voici les principaux éléments.
Après cela, vous devez vous connecter à votre gestionnaire de domaine et accéder à la zone de configuration DNS. Ensuite, en suivant les instructions, vous pouvez copier :
Voici un exemple pour chaque type d'enregistrement (TXT et CNAME) :
Après avoir ajouté tous vos enregistrements, votre configuration devrait ressembler à ceci.
Sur Shopify , vous avez la possibilité de gérer votre configuration DNS au sein de la plateforme Shopify .
Plus précisément, vous pouvez accéder et modifier les paramètres DNS via vos Shopify en accédant à « Domaines ». Dans cette section, vous pouvez à la fois ajouter et modifier vos configurations DNS selon vos besoins.
Après cela, vous pouvez sélectionner votre site Web principal et dans le coin supérieur droit, vous trouverez l'option intitulée « Paramètres de domaine ».
En cliquant sur cette option, vous aurez accès à « Modifier les paramètres DNS », où vous pourrez procéder à l'ajout d'un nouvel enregistrement DNS. Vous pouvez ajouter les enregistrements CNAME et TXT.
Enfin, vos enregistrements CNAME et TXT devraient apparaître comme l'image suivante :
Il est important de noter que Shopify a lui-même des règles pour ajouter la configuration DNS. Assurez-vous de suivre les étapes précédentes.
Shopify lira cet enregistrement DNS que vous avez ajouté et il se propagera en conséquence.
Après avoir ajouté tous vos enregistrements au DNS de votre domaine, vous pouvez vérifier la propagation DNS en cliquant sur le bouton Vérifier la configuration DNS.
La validation DNS prend généralement entre 30 minutes et 1 heure. Après cela, vous devriez voir des points verts sur la partie droite de la liste DNS dans le tableau de bord Linguise . Vous êtes presque prêt à traduire votre site web Shopify , il manque juste le lien vers le sélecteur de langue avec les drapeaux des pays.
Le sélecteur de langue est la fenêtre contextuelle du drapeau permettant de sélectionner la langue souhaitée. Pour le charger, vous devrez copier le code indiqué en tête de vos pages Shopify . Le sélecteur de langue du drapeau sera alors chargé automatiquement sur votre site web public.
Le lien à copier est donné à la fin de l'enregistrement du domaine ou dans les paramètres du domaine. Copiez le lien dans le presse-papiers.
Ensuite, dans l' Shopify , ouvrez Boutique en ligne > Thèmes.
Cliquez sur les trois points de votre thème actuel et modifiez le code.
Enfin, ouvrez le fichier theme.liquid et collez le code du script après le dernier
Maintenant, sur votre interface Shopify , vous devriez avoir le sélecteur de langue Linguise disponible.
Le sélecteur de langue peut être personnalisé à partir du Linguise > Paramètres > Affichage des indicateurs de langue. Chaque modification ici sera reflétée sur le site Web.
Sur le côté droit de l'écran, vous avez l'aperçu du sélecteur de langue. Voici les éléments que vous pouvez paramétrer :
Pour afficher le sélecteur de langue à un endroit spécifique, dans le Shopify , vous devez définir la position sur « En place ». Une fois que vous avez défini la position dans le Linguise , vous pouvez ajouter le shortcode ci-dessous pour l'inclure. Cliquez sur le code ci-dessous pour le mettre dans votre presse-papier.
Une fois ajouté, sur le frontend, le drapeau et les noms de langue seront affichés dans la zone HTML dans laquelle vous avez ajouté le code.
Google ReCAPTCHA est un service gratuit utilisé pour empêcher le spam, par exemple dans les formulaires de contact. Pour le rendre disponible dans Shopify , vous devrez enregistrer vos sous-domaines multilingues dans l'administrateur Shopify .
Ouvrez les paramètres du magasin et les paramètres du domaine.
Cliquez ensuite sur Connecter un domaine existant
Ajoutez un sous-domaine linguistique existant, par exemple, si votre site web est en français, ce sera fr.votresiteweb.com
Enfin, ajoutez [lang].yourwebsite.com, pour chaque langue de traduction, vous deviez afficher le reCAPTCHA sur le frontend.
L'éditeur frontal permet aux traducteurs de modifier n'importe quel contenu HTML sur Shopify dans n'importe quelle langue. Vous pouvez modifier une page en cliquant sur un élément de la page et en remplaçant le texte, le lien ou l'image.
Si vous utilisez l'un des thèmes gratuits fournis par Shopify , vous devrez peut-être modifier le CSS du thème pour avoir accès à tout le HTML, c'est parce qu'ils ont utilisé un pseudo-élément non standard.
Tout d’abord, modifiez le code du thème puis ouvrez le fichier base.css ou tout autre fichier CSS chargé sur votre boutique Shopify .
Voici le code à ajouter dans votre fichier CSS :
/* CUSTOM CSS FOR LIVE EDITOR LINGUISE --------------------------------------------------------------------*/ /* Remove the problem of frontend editor on product and blog listing */ .button:after, .shopify-challenge__button:after, .customer button:after, .shopify-payment-button__button--unbranded:after { content: none !important; } .card__heading a:after, .card--card:after, .card--standard .card__inner:after { content: none !important; } /* Add back the button border */ button.button { border: 2px solid #0E1B4D; border-radius: 20px; } /* END CUSTOM CSS --------------------------------------------------------------------*/
