Add Flags to the Locale Switcher

Adding localization to a client's site is a big deal... but it's only a big deal if your website visitors see the locale switcher options, and if your client is proud of how their site looks.

We wanted a way to make the locale switcher stand out in a big way as a new site feature.

UPDATE - 14-Mar-2024
Webflow has added native image support to localization. You can fully build this feature without needing any custom CSS.
Learn more

The solution we designed;

• Is 100% CSS-based. No JS required.
• Requires no assets to be added to your project. The flag URLs are served by CDN, remotely.
• Uses SVG flags for versatility and performance.
• Has a placeholder for in-designer work.
• Flags can be made round, square or rectangular, and are available in 1:1 or 4:3 aspect.
• You choose the country flag you want to represent the language, e.g. for English, you might want a US flag, a UK flag, or an Australian one... you decide what's right for each locale you're supporting.

‍

How to Build This

Key Build Tips

To create the version I have here;

Follow Webflow's build process for a merged dropdown + Locale Switcher.

For your flags, you can go with many different stylings, e.g.;

• Circular - 1:1 aspect with 50% corners
• Square - 1:1 aspect, square or slightly rounded corners
• 4:3 aspect, with or without rounded corners, shadows, border...

Simple Approach, Flags Only

For clarity, here's the simplest implementation, flags only.

Remember;

• The URLs here are SVGs with country codes, not language codes
• You can use 1:1 or 4:3 in the URL to choose your version
• You can use URLs to art stored anywhere including in the Webflow assets
• You can also change this to base64 inline data if you want it to instant load.

‍

Improving Flag Load Performance

Even though the flag images are on a highly efficient CDN, users will likely see a flicker before those images load. That can be prevented by encoding those images to base64 content and inlining them in the CSS.

Here's how...

The _url() format for base64 content is prefixed with this exact string, followed by your base64-encoded image;

_{data:image/svg+xml;base64,}

Notes

• Example tool for encoding‍

‍