How to add language icon flag to the menu

Shopify Discussion
1

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!

2

hey @andyberendsen follow these steps

Enable Shopify Markets Language Selector

Since you are transitioning to Shopify Markets and using Translate & Adapt, first ensure that multiple languages are enabled:

  1. Go to Shopify Admin > Settings > Markets.

  2. Select your primary market and ensure multiple languages are added under the Languages section.

  3. Click Manage and make sure the language selector is enabled.

2. Add a Language Selector in the Header (Using Liquid)

Now, you’ll need to modify your theme.liquid or header.liquid file.

  1. Go to your Shopify Admin > Online Store > Themes.

  2. Click Actions > Edit Code.

  3. Locate header.liquid (or theme.liquid if header.liquid does not exist).

  4. Find the navigation menu section ( or header).

  5. Insert the following Liquid code where you want the selector to appear (typically inside or ):


    {% form 'localization' %}
        
    {% endform %}
  • Optional: Add Flags Instead of Text If you want flags instead of text, replace the with an image:

    {% 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).

  • Style the Language Selector (CSS)

    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;
}

  • Save and Test- Save your changes and refresh your store.

    • Switch between languages to confirm it’s working.

  • if this code work please do not forget to like and mark it solution

best regard
MUSTUFA

3

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

4

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