Skip to content
maka-img_mm_marketplace
maka marketplace

Discover Products to help you POWER up with CMS Hub

maka-img_mm_power-pro
Power Pro Theme

Check out the POWER demo and see all the latest features

maka-img_mm_performance
Performance

POWER is optimized to perform, review the results

maka-img_mm_customer-showcase
Customer Showcase

See how our customers used the POWER Theme

POWER Pro V25 released on August 18th 2022 – Read Changelog

maka-img_mm_documentation_3
Getting Started

Follow our guide to save time and avoid missing a step

maka-img_mm_module-library
Module Library

From page speed impact to set up instructions, you'll find it all

maka-img_mm_video-tutorials
Video tutorials

Find all POWER videos in the same spot for quick answers

maka-img_mm_faq
FAQs

Have questions?
We have answers

Experiencing an issue with POWER? Submit a support ticket here

maka-img_mm_about-us
About us

“Would I rather be feared or loved? Easy. Both. I want people to be afraid of how much they love me.”
– Michael Scott, not us

maka-img_mm_blog
Blog

This is mostly a demo right now. We are working on some really cool things around the office.

maka-img_mm_career
Career

Quite possibly the most fun you will have at work, ever. Did we mention how cool we are?

Having issues with POWER?
SUBMIT A SUPPORT TICKET


Schedule a Q&A or Demo
PREPURCHASE CONSULTATION


Other questions?
CONTACT US / LIVE CHAT

LIVE Chat 7CT AM – 7CT PM – Get in touch here

Multi-Language Website Pages

How to activate the language switcher for a HubSpot website

maka_icon_dictionary.2

MULTI-LANGUAGE PAGES

HubSpot has built-in multi-language support, and POWER theme automatically detects non-English pages to translate default content and include the Language Switcher in the header.

translations-example

FAQ

How is the language detected?

The theme detects the language code in the URL, either in the domain (.de) or the language slug (/de).

What if my language is not in the translations file?

You'll need to follow the steps to clone the _translations.html to your child theme where you can provide your own translations.

🚀 When you have this file updated, we would appreciate it if you would send it back to us via the support form so we can include it in the base file for the next theme update!

 

What If I want to customize the translation for an existing language?

You can follow the steps for cloning the translations.html to add a new language, but instead of adding the code again, you would find your language in the file and make the adjustments you would like to.

Setup Instructions

Creating translated pages will automatically show the language switcher in the header bar (this will only be visible on pages with multiple languages).

doc_img_13

Non-English Websites or Websites with Multiple Languages

Setting up non-English pages for a single language follows the same initial process as setting up pages for multiple languages.

  HubSpot Knowledge Base create pages in multiple languages

Marketing → Website → Website Pages

There are many languages that have variations, be careful when selecting your language to always choose the same version and to note the proper language code (ex: DE, EN, FI)

Example:
For Finnish, if you choose "Finnish" the abbreviation is "FI" but if you choose "Finnish - Finland" the abbreviation is "FI-FI"

language-choices

There are a few aspects of the native multi-language support which are not currently included, but our theme offers solutions for including translation for system pages and the ability to set the text for hard-coded copy per language directly from the modules.

Here are the steps you'll need to take to set up your website in a language other than English or in multiple languages using the POWER theme.

Translate System Pages and Default Content

Create translation to chosen language for System Pages (404, 500, search, etc.) and also default content for Blog Listing and Blog Posts, including Post Previews.

POWER theme already includes translations for: 

  • German
  • French
  • Italian
  • Dutch
  • Spanish
  • Portuguese
  • Danish
  • Swedish
  • Finnish
  • Norwegian

If you are using one of these languages, you will not have to complete this step.

Marketing → Files and Templates → Design Tools → @marketplace → maka_Agency → Power Theme → Templates → Translations

You will need to access the theme files for the template here (you won't need to know how to code, just how to copy & paste).

From the marketplace template files for the theme, you'll need to clone the translations folder with the  _translations.html file to your child theme.

translations-file

Right-click on the folder (translations) and choose Clone to child theme. Once you have done this, you will see the same folder and HTML file in your child theme folder.

This new file is where you will make the edits in the next step (you can't edit the file contained in the marketplace theme directly).

Marketing → Files and Templates → Design Tools → POWER x YOURCOMPANY → Templates → Translations

Open the _translations.html file from your child theme.

Copy this code:

If you prefer, you may copy one of the other existing languages in the _translations.html to translate to your language from one of the existing translations instead of from English.

Scroll to the end of the file and paste the copied code above the line that says:

endif

it's okay to add an extra line break.

On the code, you just pasted, change the following (we're using Norwegian as an example for the new language):

  • Change German to Norwegian (inserting your language name here in place of Norwegian)
  • Leave the rest of the characters on this line as-is, this is just a comment to help identify the language being translated for reference
  • In the next line of code, you'll need to find "de" and change it to "no" four times (inserting your language abbreviation here in place of "no")
  • You'll use the abbreviation for your language which will indicate to the browser the correct translation to show for the language, make sure you change out each instance in this line of code (4 times)
  • Change the English placeholder text to your language for each item, making sure not to delete the quote marks

Example: For Norwegian, you would change this line:

english-blog-next-example

to:

norwegian-blog-next-example

🚀 When you have this file updated, we would appreciate it if you would send it back to us via the support form so we can include it in the base file for the next update!

Review your System Page templates to make sure they are pointing to the templates in your child theme.

Standard Text / Translation for Theme Modules

With POWER theme, you are able to translate the default copy contained in the theme modules.

Marketing → Website → Website Pages

If your entire site will be one non-English language only, you will just change the text in the settings once, but if you are using more than one language, you will need to change the language at the top of the screen here to adjust for each language:

toggle-language-page-settings

On the left sidebar in the template settings, you will see a section called Standard Text / Translation for any page copy written in the code. If you don't see this section, the module does not have any default content.

This is especially important for the global header and global footer elements when you set up the theme.

global-header-translation

Example:
On the Teams module, there are two items in the code for the theme: one for the link text and one that only shows on mobile to indicate to the user to tap/touch the image.

standard-text-translation

You would just need to replace the text in each box with the translation to the language selected (you can change these defaults for English as well).

Settings → Website → Navigation

To fully translate your website to one or more languages, you'll need to set up an advanced navigation menu for each language.

Once you have the navigation setup, you will configure it as part of the setup for the header/footer to display the correct language here:

language-header-footer

You'll select the corresponding navigation for each header, for each language.

To switch between languages, you'll toggle the language at the top of the page (#1 on the image above).

On the left, you'll have to set up the menu for each of the page types (PAGE, LANDING, BLOG, and SYSTEM) for the header and footer (#2 on the image above).

You can also choose to turn on an optional arrow as a UX indicator to change the language within the header settings:

header-dropdown-language-switcher-arrow

Translate Forms for HubSpot Website Pages

The last step is creating your forms in multiple languages.

  HubSpot Knowledge Base create a form in multiple languages

Next Steps

Now you're ready to build pages in your preferred languages! Start setting up your multi-language forms to convert site visitors at all stages of the buyer's journey.

Next up:

NEVER MISS A POWER UPDATE

We are continuously improving our modules and updating our documentation. Stay in the loop.