Hi there,
We’re in a transition to move from a well known external translation app to Shopify markets ‘Translate & Adapt’. However, how can we add the language flag icon selector (within Shopify) in the top right corner of the menu? We’re using the Cascade template in Shopify.
Would be great if someone could help!
hey @andyberendsen follow these steps
Since you are transitioning to Shopify Markets and using Translate & Adapt, first ensure that multiple languages are enabled:
Go to Shopify Admin > Settings > Markets.
Select your primary market and ensure multiple languages are added under the Languages section.
Click Manage and make sure the language selector is enabled.
Now, you’ll need to modify your theme.liquid or header.liquid file.
Go to your Shopify Admin > Online Store > Themes.
Click Actions > Edit Code.
Locate header.liquid (or theme.liquid if header.liquid does not exist).
Find the navigation menu section ( or header).
Insert the following Liquid code where you want the selector to appear (typically inside or ):
{% form 'localization' %}
{% endform %}
{% form 'localization' %}
{% for locale in localization.available_languages %}
{% endfor %}
{% endform %}
Upload flag images to Settings > Files in Shopify and name them using language codes (e.g., en.png, fr.png).
To make the language selector look good, add this CSS in theme.css or base.css
.language-selector {
position: absolute;
top: 10px;
right: 20px;
}
.language-dropdown {
background: transparent;
border: none;
font-size: 16px;
cursor: pointer;
}
.language-selector button {
background: none;
border: none;
cursor: pointer;
}
.language-selector img {
width: 24px;
height: 16px;
margin: 5px;
border-radius: 3px;
}
if this code work please do not forget to like and mark it solution
best regard
MUSTUFA
Hello there Andy @andyberendsen You should have a look at this short video and let me know if it helps you out https://m.youtube.com/watch?v=-EgDj5DVKes
Thanks!
How can I find the place where I need to copy/paste the code? I can’t find or header in the header.liquid file.
See code here: https://codepen.io/Andy-Berendsen/pen/raNvYQL
If you want to add language names and flag icons in the header menu, simply go to theme.liquid or theme.css and add the CSS below:
{% style %}
/* ========================= ACTIVE LANGUAGE FLAG ========================= */
.toolbar-button > span:first-child {
display: flex;
align-items: center;
gap: 8px;
}
/* English active */
html[lang=“en”] .toolbar-button > span:first-child::before {
content: “”;
width: 20px;
height: 14px;
display: inline-block;
background: url(“https://cdn.shopify.com/s/files/1/0686/6242/7753/files/en.svg?v=1779864644”) no-repeat center;
background-size: contain;
}
/* Norwegian active */
html[lang=“nb”] .toolbar-button > span:first-child::before {
content: “”;
width: 20px;
height: 14px;
display: inline-block;
background: url(“”) no-repeat center;
background-size: contain;
}
/* ========================= DROPDOWN LANGUAGE FLAGS ========================= */
.locale-options .disclosure-list__label {
display: flex;
align-items: center;
gap: 8px;
}
/* English dropdown */
.locale-options li:first-child .disclosure-list__label::before {
content: “”;
width: 20px;
height: 14px;
display: inline-block;
background: url(“https://cdn.shopify.com/s/files/1/0686/6242/7753/files/en.svg?v=1779864644”) no-repeat center;
background-size: contain;
flex-shrink: 0;
}
/* Norwegian dropdown */
.locale-options li:last-child .disclosure-list__label::before {
content: “”;
width: 20px;
height: 14px;
display: inline-block;
background: url(“”) no-repeat center;
background-size: contain;
flex-shrink: 0;
}
/* Hide active language from dropdown */
/* Hide English when English is active */
html[lang=“en”] .locale-options li:first-child {
display: none;
}
/* Hide Norwegian when Norwegian is active */
html[lang=“nb”] .locale-options li:last-child {
display: none;
}
{% endstyle %}
After adding this, you will be able to see language-specific flag icons in the header menu as well as in the language dropdown list.