I want to add a flag image to the language section.

English Shopify Shopify Discussion
1

Hello. I added a second language to my www.mayaandluca.com site with the Translate & Adapt application. But I want to put country flag images next to these 2 language options to make it clear. Can you help me with this?

1.jpg
1.jpg1838×850 90.9 KB

2
  1. Go to Online Store > Themes > Edit Code.
  2. Open the file where you have added option of language.
  3. Find class “.localization-form__content-item”
  4. Add SVG/Img before the Language buttons tag starts in “” with proper Class/ID to the “Img” tag.
  5. Add CSS to this Class
  6. Add same SVG/Img that you added above and with same Class/ID name before the " " tag

For reference, the expected output after executing this code will appear as follows: https://prnt.sc/mMPLbwnlCLNQ

.localization-form__content-item{
    display: flex;
}

.imgLanguageIcon {
    background-color: white;
}
.imgLanguageIcon.selected {
    background-color: #ebebeb;
}
  1. Write this code inside the tag
$(document).ready(function() {
    $('.localization-form__content-item').on('click', function() {
        if ($(this).hasClass('localization-form__content-item--selected')) {
            $(this).removeClass('localization-form__content-item--selected');
            $('.imgLanguage').css('background-color', 'white');
        } else {
            $('.localization-form__content-item').removeClass('localization-form__content-item--selected');
            $(this).addClass('localization-form__content-item--selected');
            $('.imgLanguage').css('background-color', '#ebebeb');
        }
    });
});
1 Like
3

Thank you