Shopify - Design - Comment puis-je changer les drapeaux du bouton ?

Dans cet article, vous trouverez comment changer les drapeaux du bouton Weglot sur votre site web.

1. Utilisation de l'image des drapeaux de Weglot

Sur votre navigateur Web, faites un clic droit sur le drapeau puis sélectionnez'Inspecter l'élément'. L'inspecteur devrait se présenter en mettant l'accent sur l'élément drapeau du code.

Dans cet exemple, disons que le drapeau brésilien doit être changé pour le drapeau portugais :

Ouvrez l'élément < a > avec le tableau de gauche, vous devriez voir un pseudo-élément 'before'. Sélectionnez-le:

Copiez la règle CSS complète qui est affichée à droite, celle avec la propriété background-position :

Dans cet exemple pour le drapeau brésilien, le code copié est :

.wg-li.flag-1.pt a:before {
    background-position: -993px 0;
}

Collez ce code dans votre champ Shopify App'CSS personnalisé' (Shopify admin > Apps > Weglot Translate App) :

Maintenant, selon le type de drapeau choisi sur votre site Web et le drapeau que vous souhaitez appliquer, vous devrez remplacer le nombre de pixels par l'une des valeurs suivants :

Drapeaux "Rectangle Mat" :

Drapeau Nombre de px
Allemagne -2490
Brésil -6630
Hong Kong -3600
Mexique -4320
Portugal -1740
Royaume-uni -1920
États-unis -3570

Drapeaux rectangulaires lumineux : 

Drapeau Nombre de px
Canada -1281
Portugais -5921
Royaume-uni -7777
États-unis -7841

Drapeaux "Circular" :

Drapeau Nombre de px
Portugais -3504
Canada -4224
Hébreu -1608
Mozambique -288
Royaume-uni -2520
États-unis
-2712

Si vous souhaitez afficher un drapeau qui ne figure pas dans les tableaux ci-dessus, vous pouvez contacter notre équipe de support pour obtenir de l'aide !

Dans le cas du drapeau brésilien, le type de drapeau est'Rectangle Bright' sur le site web du test :

Le nombre de pixels du drapeau portugais avec le'Rectangle Bright' est donc de -5921. Vous devrez également ajouter '!important' pour que la règle personnalisée l'emporte sur les autres règles CSS. Le code CSS à appliquer est ainsi :

.wg-li.flag-1.pt a:before {
    background-position: -5921px 0!important;
}

Une fois les modifications effectuées, cliquez sur'Enregistrer' :

Maintenant, le drapeau de la langue portugaise est le drapeau portugais :

2. Utilisation de votre propre image de drapeau

Vous pouvez également utiliser votre propre image pour personnaliser les drapeaux sur Weglot switcher sur votre site web.

a. Inspectez l'élément sur votre navigateur

Sur votre navigateur Web, faites un clic droit sur le drapeau puis sélectionnez "Inspecter l'élément. Le drapeau devrait apparaitre surligné

Ouvrez l'élément < a > avec la fenêtre de gauche, il devrait y avoir un pseudo-élément "before"', sélectionnez-le:

Copiez la règle CSS complète qui est affichée à droite pour le drapeau que vous souhaitez éditer (ici c'est la règle qui inclut "pt" pour le drapeau portugais) :

Le code copié devrait être :

.wg-li.flag-1.pt a:before {
    background-position: -993px 0;
}

b. Ajouter le code CSS pour personnaliser le drapeau de langue

Allez dans votre administrateur Shopify > Applications > Weglot Translate, dans le champ'CSS personnalisé', collez le code et remplacez la propriété CSS par une image de fond et remplacez l'URL par l'URL réelle de votre propre image. Aussi, ajoutez '!important' à la fin de la règle pour qu'elle l'emporte sur les autres règles CSS :

.wg-li.flag-1.pt a:before {
    background-image: url(https://portuguese-flag.com/my-image.jpg)!important;
}

Une fois les modifications effectuées, cliquez sur'Enregistrer' :

Vous avez encore besoin d’aide? Contactez-nous Contactez-nous