How to add language icon flag to the menu

Shopify Discussion

Topic summary

A user is migrating from an external translation app to Shopify’s native ‘Translate & Adapt’ feature and needs help adding a language flag icon selector to the top-right menu corner of their Cascade template store.

Solution Provided:

  • First enable multiple languages in Shopify Admin > Settings > Markets
  • Modify the theme by editing header.liquid or theme.liquid files via Online Store > Themes > Edit Code
  • Insert Liquid code using the localization form to create a language selector
  • For flag icons instead of text, upload flag images (named by language codes like en.png) to Settings > Files and reference them in the code
  • Add CSS styling to position the selector in the top-right corner

Current Status:
The original poster is having difficulty locating the <nav> or header section in their header.liquid file and has shared their code via CodePen for further assistance. A video tutorial was also suggested as an additional resource. The discussion remains open with implementation details being worked out.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
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