Skip to content

Language Switcher

The language selector in the header: a button showing the current language, and a panel listing every published translation of the page. Best for: letting visitors move between the language versions of your pages.

📷 Hero image

Target file: assets/img/language-switcher/hero.webp

A close crop of the right side of the site header with the switcher open. The button reads EN in uppercase with a chevron beside it, and a white rounded panel sits below listing English and Français. Dark text on a Light header background. Captured at desktop width.

At a glance

Header Multilingual Configuration

  • What it does: shows the current language in the header and opens a list of the page's other published translations.
  • Best used for: the header of a multi-language site built with HubSpot language variations.
  • Not the right fit if: your site is single-language, or you want a navigation menu (use Navigation or Megamenu).
  • 🔗 Live demo: (add demo link)

You do not add this module

It is mounted in the header for you and cannot be dropped onto a page. Turn it on with Add language switcher functionality in Theme Settings, under Website header. Everything else is set on the module itself.

Styling moved out of Theme Settings in August 2026

The trigger and the dropdown used to be styled from Theme Settings. Both are now settings on this module, under Style, and the old theme group has been removed. If you styled the switcher before that date, set it again here.

How to use it

  1. Set up your language variations in HubSpot so the page has more than one language version.
  2. In Theme Settings > Website header, turn on Add language switcher functionality.
  3. Open the header in the global content editor and select Language Switcher.
  4. Pick How language names are shown, then turn the globe and the chevron on or off.
  5. Style the button under Style > Preset settings > Trigger, and the panel under Dropdown.

How language names are shown

The button and the panel can read differently, which is the point of this setting.

Value Button Panel
Short form EN EN, FR, DE
Long form English English, French, German
Hybrid (default) EN English, French, German

Hybrid is the default because it suits a tight header: the button stays narrow while the list stays readable. It is also the only mode rendered entirely on the server, so the labels never flicker on load. Short form and long form load a small script to relabel the list after HubSpot renders it.

Common setups

Goal Setting
Compact codes like EN and DE How language names are shown = Short form
Full names everywhere How language names are shown = Long form
Short button, readable list How language names are shown = Hybrid
Show a globe before the code Turn Add globe icon on
Drop the chevron Turn Add chevron off
Button follows a dark header Leave Trigger > Text color on Default (scheme)
Button in a fixed colour Trigger > Text color = Custom color
Tighter panel Lower Dropdown > Dropdown spacing and Gap between languages
Panel with no shadow Dropdown > Shadow = None
Square panel Dropdown > Round corner = 0

Field reference

33 fields: three on Content, and thirty under Style split between the button and the panel.

Content
Field Type What it does Default
How language names are shown choice (radio) Short form, Long form or Hybrid, as described above. Hybrid
Add globe icon boolean Shows a globe before the language on the button. off
Add chevron boolean Shows a downward chevron after the language on the button. on
Style > Preset settings > Trigger

The button in the header: globe, language code and chevron. All three take one colour, so they cannot drift apart.

Field Type What it does Default
Text color choice Default (scheme) follows the header, including a page's Header color scheme override. Custom color fixes it. Default (scheme)
Custom text color color Used only when Text color is Custom color. #FFFFFF
Text transform choice Casing of the code on the button. Does not touch the panel. Uppercase
Make font bold boolean Bolds the code on the button. off
Globe icon size [desktop] number Globe size, in px. 20
Globe icon size [mobile] number Globe size below 1024px. 18
Font size [desktop] number Size of the language code. 16
Font size [mobile] number Size of the code below 1024px. 15
Arrow icon size [desktop] number Chevron size. 12
Arrow icon size [mobile] number Chevron size below 1024px. 11
Globe icon stroke width number Line thickness of the globe. 1.5
Arrow icon stroke width number Line thickness of the chevron. 1.5
Gap between text and icons [desktop] choice Space between globe, code and chevron, from the theme gap scale. M
Gap between text and icons [mobile] choice The same below 1024px. XS
Style > Preset settings > Dropdown

The panel that opens below the button, and the language names inside it.

Field Type What it does Default
Background color color Panel background. #FFFFFF
Show border boolean Draws a border around the panel. on
Border width number Border thickness, in px. Shown when Show border is on. 1
Border color choice Primary, Secondary, Tertiary, Light, Dark, Black, White, White transparent or Custom. Shown when Show border is on. Light
Custom border color color Used only when Border color is Custom. Opens pre-filled from your theme Light colour, so it is a starting point to adjust rather than a blank white. inherited
Shadow choice None, Light shadow, Regular shadow or Dark shadow. Light shadow
Round corner choice From the theme roundness scale, or Custom. M
Custom round corner number Used only when Round corner is Custom. 8
Dropdown spacing spacing Padding inside the panel, around the list. 18px 24px
Text color color Language names in the list. Inherits your Body text colour. inherited
Hover color color Language name under the pointer. Inherits your link hover colour. inherited
Font size [desktop] number Size of the language names. 16
Font size [mobile] number Size of the names below 1024px. 16
Make font bold boolean Bolds the language names. off
Text transform choice Casing of the names in the list. Capitalize
Gap between languages choice Vertical space between one language and the next, from the theme gap scale. XL (16px)

Tips & gotchas

It appears only when there is somewhere to go

The switcher renders nothing unless the page has at least one published translation. A translation that exists but is unpublished is not counted, so the header stays clean on a single-language site.

Border color Light is almost invisible on a white panel

Light reads your theme's Light colour, which ships as a very pale grey and against the default white background is close to no border at all. Two ways to get a border you can see: switch Border color to Custom, which opens pre-filled with that same theme colour so you can darken it to around #E2E7EE, or change the Light colour in Theme Settings, which affects every element using it across the site.

The button follows the header, the panel does not

Leave Trigger > Text color on Default (scheme) and the button flips with the header on a page set to a dark scheme. The panel's own colours are fixed values, so set a background and text colour that read well against both if you use both header schemes.

Two casings, on purpose

The button and the panel have separate Text transform settings. The defaults pair an uppercase EN on the button with capitalised names in the list, which is the usual look.

Mobile sizes are separate

Globe, font and chevron sizes each have a mobile value that takes over below 1024px, so a switcher tuned for desktop does not crowd a narrow header.