Streaming live at 10am (PST)

Any idea to make a site multilingual?

Hi there,

I need to build a small/medium site in a tight budget/time, so Webflow looks like a good option. However there’s one aspect that will probably make me reject it…

This site has to be multilingual (up to 3!). It won’t have many pages (maybe 6-8) so one solution would be building one page for each language. Not the best scenario but totally doable considering that these pages won’t need much updates.

However this site will also have an Ecommerce CMS collection. About 3 categories with up to 10/15 products each. Unlike other pages these products will need to be updated often, so it doesn’t make sense building 3 CMS collections (one for each language).

Does anybody have an idea to make it work? I don’t want to use external tools like Weglot (very expensive)…

By the way, I don’t understand how such a powerful and popular tool like Webflow is taking so long to allow this essential feature. Here in Europe almost all sites need at least 2 languages. Webflow team, you are losing a big piece of the cake here :roll_eyes:

Regards

1 Like

Hi @gtc

So there is a native solution which some users, including @vincent have used, and that is Symbol Overrides. This allows you to design a static site exactly how you want to, and then update the content easily and quickly.

If you ever change the design, then every symbol instance will be updated too.
Symbol overrides on the Wefblow university

Hello.
Maybe this helps?
http://multilinguale.webflow.io/

1 Like

I’ve recorded a short demo (4 mins) for you so you can see how to do this without Custom code.
and this is a live version by Vincent. https://symbol-content-override.webflow.io/

1 Like

Hi @magicmark,
Could you please explain me how Symbols Overrides would be helpful in the site I want to build?

EDIT:
@magicmark I just watched your recording. Thank you!
Does it work when editing the content from the Editor panel?
This solution is great for static pages but won’t work with CMS Collections. Any idea?

1 Like

Ah I’m so sorry. I missed that you’re using Ecommerce, my bad for not reading correctly.

It does work when editing from the Editor panel. Your client will be able to update the content in a symbol with overrides, and by default, element’s that aren’t linked will be disabled from editing (you can change this though).

Webflow team, you are losing a big piece of the cake here

We’d love to build every possible feature all in one go, but they take time to get right. A wise man once told me You can’t make a baby in one month with 9 women. :smiley:

Hey @gtc,
Here’s what I did on www.masterthehandpan.com

For static pages, I just used a basic folder ‘FR’ and a switch button on the main menu. Very basic but at least I have full control over the design and specificity of each langages. Nothing fancy :slight_smile:

BUT on the blog I use another strategy. Have a look with this article

As you can see, there’s a switch button on the top right of the cover image, to change the langage : but we’re staying in the same collection (blog) and on the same topic.

The solution is to create a collection ‘Blog’ and add 2 specific fields :

  • one to set the langage of the article
  • one to cross reference the alternate langage article (reference field)

Then I create 2 new articles for each langage, and each one of them cross reference the alternate langage.

Finally, when building the collection template, I just need to filter which text I want to see according to the langage selected.

In your specific case, I would suggest to have for exemple a collection called “about” with dropdown menu to select the langage, and 2 reference fields to cross reference the alternate pages.
Then create 3 items, for each langage. And finally build the template page with the langage filter…

I did not cover the eCommerce functionnality because I did not used yet this feature on the website. Maybe my solution won’t work… or it will need to be mixed with the symbol solution…

I hope my explanation was clear enough… probably not as clear as @magicmark nice video :wink:

Thank you @magicmark @pixelemotion for your detailed solutions!
I will investigate to make sure that it fits the requirements for my project.
Regards!

Hi @magicmark, thank you for your video! I have a question about the homepage for the different languages. How can I make my “homepage” in different language does’t show the slug /home.

For example, www.mypage.com/en instead of www.mypage.com/en/home?

Thank you!

Hi there! If you want to display content using 3 languages, like multi-lingual one, it’s better you build 3 seperate stores. It gives you the best flexibility to control differences of products, prices, shipping cost, and stock availability.

Furthermore, among different shops, you could detect your website visitors’ locations based on their IPs and auto direct them to correct website URLs displaying local languages.

If you are interested, you may potentially use Geo Targetly. With its Geo Redirect tool, you can set up redirecting rules easily without coding.

Hope it helps!