CMS Development

unicorndev
Participant

Steps for Creating Language Switcher

SOLVE

Hello! I've been trying to create a language switcher module and trying to wrap my head around creating it. I would like to see if anyone has created it before and if I could see a snippet of their code so that I can improvise on my own. 

 

I checked out the documenations and the code given just provided a search bar and it wasn't entirely too clear for me, a new Hubspot dev. 

 

I would like to create one exactly like the photo below. I would like to have the options to switch between English, Chinese and German. I already created my modules and header/footer in these languages, just need to provide a language switcher module. 

 

I'm just lost on where and how to start.

 

Thank you!

 

switcher.png

 

0 Upvotes
1 Accepted solution
A_Wessolly
Solution
Contributor | Partner
Contributor | Partner

Steps for Creating Language Switcher

SOLVE

Hi @unicorndev ,

 

when you take a look at the overview page where you can see the Website and Landing Pages, you can hover over a page and click on the "more" dropdown. There you will have the option to create Multilanguage Variant.

 

Once you have created at least one variant you can  switch inside of the page editor between the languages like you showed in the screenshot.

 

Mor Information: https://knowledge.hubspot.com/website-pages/create-pages-in-multiple-languages

Hope this helps!

 

 

View solution in original post

4 Replies 4
A_Wessolly
Contributor | Partner
Contributor | Partner

Steps for Creating Language Switcher

SOLVE

Most themes have the hubl for the language switcher in the Website Header. However this switcher is different as the one in the page editor. The one in the header gives Website visitors the ability to change the language of the pages, whereas the other switches the pages inside of the page editor to give the editor the ability to change the content of the page.

One important info: if there is only one language present the switcher wont appear in the website header because there is no reason to switch and this would only add confusion.

unicorndev
Participant

Steps for Creating Language Switcher

SOLVE

@A_Wessolly  Thank you so much! Yes, I did the necessary steps on the documentation and I managed to snag a language switcher from a template I got from the Marketplace. The template preview as shown in the marketplace looks like a drop down menu with the toggle function. I managed to get the CSS/JS code down and it still seems like its not working for me. 

 

Maybe there's another part of my code that overwritten it? Have you had that problem before?

 

The photo shown below properly picks up German but the toggle does not work. I got English as Primary language and Chinese as the other. 

switcher.png

0 Upvotes
A_Wessolly
Solution
Contributor | Partner
Contributor | Partner

Steps for Creating Language Switcher

SOLVE

Hi @unicorndev ,

 

when you take a look at the overview page where you can see the Website and Landing Pages, you can hover over a page and click on the "more" dropdown. There you will have the option to create Multilanguage Variant.

 

Once you have created at least one variant you can  switch inside of the page editor between the languages like you showed in the screenshot.

 

Mor Information: https://knowledge.hubspot.com/website-pages/create-pages-in-multiple-languages

Hope this helps!

 

 

dennisedson
Community Manager
Community Manager

Steps for Creating Language Switcher

SOLVE

@A_Wessolly , would you be able to help out here?

Thanks,

Dennis




HubSpot Community Developer ShowMake sure to subscribe to our YouTube channel
where you can find the HubSpot Community Developer Show
0 Upvotes