Ajouter un drapeau pays Picto à côté du selecteur de langue : Widget Shopify Geolocalisation

[Zoubidou75]

Bonjour à tous,

Je travaille actuellement sur un site Shopify (Reaverfit.com) et j'aimerais ajouter une fonctionnalité à notre widget de géolocalisation situé dans le pied de page (footer). Je souhaite afficher un petit drapeau SVG à côté du nom de chaque langue. Par exemple, un drapeau français à côté du mot "Français", un drapeau anglais à côté de "English", etc.

J'ai déjà les fichiers SVG de chaque drapeau disponibles dans mes ressources et j'ai compris comment intégrer un SVG dans le code HTML. Cependant, je ne suis pas sûr de comment intégrer cela dans le widget de géolocalisation spécifiquement, pour qu'un drapeau différent s'affiche à côté de chaque langue.

Voici un extrait du code actuel du widget :

    <div class="Footer__Aside">
      {%- if section.settings.show_currency_selector and shop.enabled_currencies.size > 1 -%}
        {%- assign currency_selector = true -%}
      {%- endif -%}

      {%- if section.settings.show_locale_selector and shop.published_locales.size > 1 -%}
        {%- assign locale_selector = true -%}
      {%- endif -%}

      {%- if locale_selector or currency_selector -%}
        <div class="Footer__Localization">
          {%- form 'localization', id: 'localization_form_footer', class: 'Footer__LocalizationForm' -%}
            {%- if currency_selector -%}
              <div class="Footer__LocalizationItem">
                <input type="hidden" name="currency_code" value="{{ form.current_currency.iso_code }}">
                <span class="u-visually-hidden">{{ 'footer.general.currency' | t }}</span>

                <button type="button" class="SelectButton Link Link--primary u-h8" aria-haspopup="true" aria-expanded="false" aria-controls="footer-currency-popover">
                  {{ form.current_currency.iso_code }} {% if form.current_currency.symbol %}{{ form.current_currency.symbol }}{% endif %}
                  {%- render 'icon', icon: 'select-arrow' -%}
                </button>

                <div id="footer-currency-popover" class="Popover Popover--small Popover--noWrap" aria-hidden="true">
                  <header class="Popover__Header">
                    <button type="button" class="Popover__Close Icon-Wrapper--clickable" data-action="close-popover">{% render 'icon' with 'close' %}</button>
                    <span class="Popover__Title Heading u-h4">{{ 'footer.general.currency' | t }}</span>
                  </header>

                  <div class="Popover__Content">
                    <div class="Popover__ValueList Popover__ValueList--center" data-scrollable>
                      {%- for currency in form.available_currencies -%}
                        <button type="submit" name="currency_code" class="Popover__Value {% if currency.iso_code == form.current_currency.iso_code %}is-selected{% endif %} Heading Link Link--primary u-h6"  value="{{ currency.iso_code }}" {% if currency.iso_code == form.current_currency.iso_code %}aria-current="true"{% endif %}>
                          {{ currency.iso_code }} {% if currency.symbol %}{{ currency.symbol }}{% endif %}
                        </button>
                      {%- endfor -%}
                    </div>
                  </div>
                </div>
              </div>
            {%- endif -%}

            {%- if locale_selector -%}
              <div class="Footer__LocalizationItem">
                <input type="hidden" name="locale_code" value="{{ form.current_locale.iso_code }}">
                <span class="u-visually-hidden">{{ 'footer.general.locale' | t }}</span>

                <button type="button" class="SelectButton Link Link--primary u-h8" aria-haspopup="true" aria-expanded="false" aria-controls="footer-locale-popover">
                  {{- form.current_locale.endonym_name -}}
                  {%- render 'icon', icon: 'select-arrow' -%}
                </button>

                <div id="footer-locale-popover" class="Popover Popover--small Popover--noWrap" aria-hidden="true">
                  <header class="Popover__Header">
                    <button type="button" class="Popover__Close Icon-Wrapper--clickable" data-action="close-popover">{% render 'icon' with 'close' %}</button>
                    <span class="Popover__Title Heading u-h4">{{ 'footer.general.locale' | t }}</span>
                  </header>

                  <div class="Popover__Content">
                    <div class="Popover__ValueList Popover__ValueList--center" data-scrollable>
                      {%- for locale in form.available_locales -%}
                        <button type="submit" name="locale_code" class="Popover__Value {% if locale.iso_code == form.current_locale.iso_code %}is-selected{% endif %} Heading Link Link--primary u-h6" value="{{ locale.iso_code }}" {% if locale.iso_code == form.current_locale.iso_code %}aria-current="true"{% endif %}>
                          {{- locale.endonym_name -}}
                        </button>
                      {%- endfor -%}
                    </div>
                  </div>
                </div>
              </div>
            {%- endif -%}
          {%- endform -%}
        </div>
      {%- endif -%}

Pourriez-vous m'aider à trouver une solution pour ajouter ces drapeaux SVG à côté de chaque nom de langue dans ce widget ?

Je vous remercie par avance pour votre aide.

Cordialement,