You're experiencing a language switcher issue where users can't change languages after being redirected to a specific language version of your Webflow site. This typically happens due to improper redirect logic or missing global access to language selection tools.
1. Use a Universal Language Switcher Component
- Create a global language switcher as a Symbol and place it in your main layout (e.g., Navbar/footer) so it appears on every language version.
- Ensure this switcher is not hardcoded to one language path, but dynamically routes based on page or manual hrefs like
/en/products
, /fr/products
, etc.
2. Check Your Redirect Logic
- If you're using tools like Weglot or custom scripts to auto-redirect based on browser language, it may override manual selection.
- Disable or modify the auto-redirect after the first visit. Weglot, for example, allows this in settings so the redirect doesn’t repeat or block user choices.
3. Use Consistent URL Structures
- Ensure that all your URLs follow a consistent structure like
/en/page-name
, /es/page-name
, etc. - A mismatch in URL patterns between pages or missing translated versions can cause the switcher to break.
4. Link Each Language to Equivalent Page
- Your language switcher dropdown or menu should link to equivalent pages in other languages.
- For example, on
/fr/about
, switcher links should point to /en/about
, /de/about
, etc.
5. For Weglot Users: Use Their Language Switcher Code
- If you’re using Weglot, add their official language switcher widget or mimic their classes like
weglot-lang
for each item. - Weglot automatically handles path translations and page matching.
6. Avoid Redirect Loops or Session Blocking
- If you're using custom JavaScript for redirection, check that it's not firing on every page load and overriding user manual changes.
- Use
localStorage
or cookies to track user preference and avoid forcing a redirect after language selection.
Summary
To fix the issue, use a global language switcher, ensure compatible URL structures, and disable any repeating auto-redirects. If you use Weglot or other translation tools, rely on their built-in logic for switching and user preference storage to prevent conflicts.