Passer au contenu
Français
Nous Contacter
  • Il n'y a aucune suggestion car le champ de recherche est vide.

Les drapeaux du sélecteur de langue ne s’affichent pas correctement sur Webflow avec Localize : comment corriger ?

Restaurer un sélecteur de langue élégant et fonctionnel

Points clés :

  • Les drapeaux Localize peuvent ne pas s’afficher à cause d’un conflit CSS ou d’une erreur de chargement du widget.

  • Le problème se corrige souvent en réinitialisant ou réinstallant le sélecteur.

  • Un bon affichage du sélecteur renforce la crédibilité et la clarté de votre site hôtelier multilingue.

Lorsque les drapeaux disparaissent ou s’affichent mal (icônes manquantes, tailles incorrectes, mauvais alignement), cela provient généralement d’un problème de style ou de script. Voici comment retrouver un sélecteur de langue propre, visible et aligné avec votre design Webflow.

Étape 1 : Vérifier le chargement du script Localize

  1. Accédez à votre projet Webflow → Project Settings → Custom Code.

Assurez-vous que le script Localize est bien présent dans la section Before </body> :

<script src="https://global.localizecdn.com/localize.js"></script>

<script>

  Localize.initialize({

    key: 'YOUR_PROJECT_KEY',

    rememberLanguage: true,

    detectLanguage: true

  });

</script>

  2. Publiez à nouveau le site.
     Si le script est absent ou tronqué, le sélecteur ne pourra pas charger les icônes drapeaux correctement.

💡 Astuce : les drapeaux sont intégrés dans le script Localize, donc toute erreur de chargement empêche leur affichage.

Étape 2 : Vérifier les paramètres du sélecteur dans Localize

  1. Connectez-vous à votre compte Localize.

  2. Allez dans Settings → Language Selector.

  3. Vérifiez les options d’affichage :

    • ✅ “Show flags” doit être activé.

    • Sélectionnez le style souhaité (Classic, Rounded, ou Minimal).

    • Sauvegardez et republiez.

💡 Astuce : si vous avez désactivé l’affichage des drapeaux pour alléger le widget, Localize conserve cette préférence même après une republication.

Étape 3 : Réinitialiser ou regénérer le widget du sélecteur

Si le problème persiste :

  1. Dans Localize → Settings → Language Selector, cliquez sur Reset Widget.

  2. Choisissez à nouveau un style de sélecteur (flottant ou intégré).

  3. Activez l’option “Show flags” et sauvegardez.

  4. Republiez votre site Webflow.

💡 Astuce : la réinitialisation recharge la feuille de style du widget et corrige souvent les problèmes d’affichage.

Étape 4 : Vérifier le CSS et les interférences avec Webflow

Certaines règles CSS personnalisées dans Webflow peuvent masquer ou déformer les drapeaux.

  1. Ouvrez le Designer Webflow.

  2. Vérifiez s’il existe des règles globales ciblant les images ou icônes (par exemple .img { display: none; }).

Ajoutez un code correctif global dans votre Custom Code (Before </body>) :

.localize-language-selector img {

  display: inline-block !important;

  width: 20px !important;

  height: auto !important;

  margin-right: 6px;

  vertical-align: middle;

}

  2. Enregistrez, republiez et testez sur plusieurs tailles d’écran.

💡 Astuce : si vous utilisez un header ou un footer avec fond blanc, assurez-vous que vos drapeaux ne se fondent pas dans le fond.

Étape 5 : Vérifier les restrictions de navigateur ou d’affichage

  • Désactivez temporairement les bloqueurs de contenu (AdBlock, Ghostery, Brave Shield, etc.) : certains bloquent les CDN de drapeaux.

  • Testez sur un autre navigateur (Chrome, Safari, Firefox).

  • Si les drapeaux s’affichent ailleurs, il s’agit d’un conflit local de cache ou d’extension.

💡 Astuce : effacez le cache de votre navigateur pour forcer le rechargement des ressources du widget.

Étape 6 : Personnaliser les drapeaux si besoin

Si vous souhaitez contrôler totalement l’apparence des drapeaux :

  1. Dans Localize, désactivez “Show flags”.

  2. Intégrez votre propre sélecteur de langue dans Webflow (avec icônes SVG ou PNG).

Connectez chaque bouton à une commande Localize :

<a href="#" onclick="Localize.setLanguage('en');">🇬🇧 English</a>

<a href="#" onclick="Localize.setLanguage('fr');">🇫🇷 Français</a>

💡 Astuce : cette méthode vous permet d’harmoniser le design du sélecteur avec votre charte graphique.

Bonnes pratiques pour les hôtels

  • Vérifiez l’affichage du sélecteur sur toutes les pages et résolutions.

  • Évitez de masquer le sélecteur dans les pop-ups ou headers dynamiques.

  • Préférez des drapeaux simples et uniformes, sans bordures ou ombres excessives.

  • Si vous ciblez plusieurs marchés, placez le sélecteur dans le header pour une meilleure accessibilité.

Conclusion

Les drapeaux du sélecteur Localize peuvent ne plus s’afficher à cause d’un script manquant, d’un CSS conflictuel ou d’un widget corrompu. En réinitialisant le sélecteur et en vérifiant vos réglages dans Localize et Webflow, vous pouvez corriger le problème rapidement et restaurer un affichage propre et professionnel, essentiel pour votre site hôtelier multilingue.