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

[MertOzay]

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?

[SetuBridge_ · Accepted solution]

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 "<button type="submit" name="locale_code">" 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 "<form id="localization_form-ancmt"> " 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;
}

7. Write this code inside the <script> 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');
        }
    });
});

[MertOzay]

Thank you