Customize your site for your customers’ languages and regions.
Localization is the process of adapting your site to meet the cultural and linguistic needs of site visitors around the world. With Webflow Localization, you can create customized experiences for your audience depending on their language or region.
How Localization works
A locale is a language or language and region combination that you select to meet your target customer/audience needs. Your primary locale should be the default locale/language in which you want to build, design, and deliver your site. For example, if you live in the U.S., your primary locale would likely be “English.” You can add locales to support additional languages and regions on your site.
Important
Webflow Localization isn’t compatible with Webflow Ecommerce. On sites with both Localization and Ecommerce enabled, Ecommerce products, categories, and pages can’t be localized.
By default, your secondary locale(s) inherit the content and presentation of your site’s primary locale. If you never change anything on your site’s secondary locale and publish your site, both locale versions of your site will serve the same content, assets, and presentation. Webflow will never serve an empty page or missing content just because a regional version of the site hasn’t been localized yet.
When you’re ready to customize a given locale, you can override or localize the content, styles, or assets that it inherits from your primary locale. All changes you make in a secondary locale affect only that secondary locale. At any point, you can reset the overrides to re-inherit data from the primary locale — just as you do with style overrides/resets.
Note
Localization features are only available in the Designer. Content editors can collaborate and localize content in edit mode.
Learn more:
Note
Enterprise and Advanced Localization plans include automatic domain-level routing — meaning if a site visitor has a preferred language set in their browser, Webflow will attempt to route them to the correct locale version of your site. If your site doesn’t support their preferred locale, or if a site visitor has no preference set, Webflow will route them to the primary locale by default.
Learn more about localized SEO and locale routing.
How to add and manage locales
You can get started with Localization when designing in Webflow by clicking the “globe” icon in the top bar or opening Settings panel > Localization in the left toolbar. You’ll need to set your primary locale — your site’s default language or language-country combination — before adding secondary locales.
Anatomy of a locale
A locale in Webflow Localization is made up of language, country, display name, subdirectory, display image, and (for secondary locales) publishing status.
Language
Language is one of the primary differentiators (along with country) for a locale, and setting a language for each locale is required. When you set a locale’s language, Webflow automatically assigns the correct language code, e.g., en for English. You can choose the same language for more than one locale if you pair it with a country, e.g., English (United States).
Country
Setting a country for a locale is optional, unless you want to set the same language for more than one locale. Choosing a country lets you create regional variations of locales that share the same language, e.g., English (United States) and English (United Kingdom). When you set a locale’s country, Webflow automatically assigns the correct country code, e.g., US for the United States.
Display name
The locale’s display name is the text used in the Locale list element. This can be used to build a locale switcher or other experience that lets your site visitors choose the locale best suited to them. You can update the locale’s display name at any time. The display name is updated in the Locale list element when you publish your site.
Subdirectory
By default, each locale’s subdirectory (i.e., URL slug) is set to the locale’s language code if a country hasn’t been set (e.g., /en) or locale code (language and country code) if a country has been set (e.g., /en-us). You can customize a locale’s subdirectory URL slug without affecting your site’s language code.
Important
Don’t use the same URL slug for a CMS Collection, folder, or page as a locale subdirectory. If there’s a conflict, the locale “wins” and the Collection, folder, or page will return a “404 — Page not found” error.
Note
By default, your primary locale will not use a subdirectory, but you
can redirect all site traffic on your primary locale to a subdirectory
(e.g., yourdomain.com/en) by toggling
Enable publishing to the subdirectory to “On.” This requires
a
paid Localization plan.
Display image
The display image is the icon or flag associated with the locale. You can use the display image you upload here in your locale switcher. Note that you must upload the display image in Localization settings — that is, you can’t use images from the Assets panel.
When you upload a display image, it also imports to the Assets panel, where you can manage its alt text. Deleting the image in the Assets panel also deletes the image in Localization settings.
Publishing status (secondary locales only)
You can control the publishing status (i.e., enable or disable publishing) for each secondary locale you add to your site. If you want to continue publishing your site to your main domain/primary locale without publishing your secondary locales, toggle Enable publishing to the subdirectory to “Off” on each secondary locale you don’t want to publish. When you’re ready to publish content to your secondary locale, you can toggle Enable publishing to the subdirectory to “On”. You’ll need to publish your site to see these changes take effect.
Set up your primary locale
To set up your primary locale:
Open Settings panel > Localization in the left toolbar, or click the “globe” icon in the top bar and click Localization settings
Choose or type a Language
(Optional) Choose or type a Country
Review and update the other fields as needed (Display name, Create a subdirectory, Display image)
Click Save
Click Save changes at the top of Localization settings
Note
Webflow automatically supports RTL (right-to-left) script on published sites for Arabic (ar), Persian (fa), Hebrew (he), Urdu (ur), and Yiddish (yi) languages, as well as regional dialect locales of these languages (e.g., Arabic (Iraq)), even when the text has not been localized.
If you don’t want to display text elements with automatic RTL, add a custom attribute of dir="ltr" or dir="auto" to the element.
Learn more about localizing right-to-left text.
Add secondary locales
To add secondary locales:
Open Settings panel > Localization in the left toolbar, or click the “globe” icon in the top bar and click Localization settings
Choose or type a Language
(Optional) Choose or type a Country
Review and update the other fields as needed (Display name, Display image, Subdirectory, Publishing status)
Click Save
(Optional) Repeat steps 2–5 to add additional locales
Click Save changes at the top of Localization settings
Important
Don’t use the same URL slug for a CMS Collection, folder, or page as a locale subdirectory. If there’s a conflict, the locale “wins” and the Collection, folder, or page will return a “404 — Page not found” error.
How to navigate to a locale in the Designer
Once you’ve added your secondary locale(s) to your site, a new Locale view dropdown will appear in the top bar of the Designer. You can click the Locale view dropdown and choose a secondary locale from the list to access your site in design mode, edit mode, or preview mode. Preview mode lets you preview your site design in a given locale before publishing.
Once you’ve entered a Locale view, you can: