Remove countries from the country/currency selector - Dawn theme

[Ulalala]

Hi,

I would like to remove countries and keep only the currencies in the country/currency selector in dawn theme so it looks like EUR, CHF, USD, AUD etc. in the list.

Could someone please help?

Thank you so much for your help in advance!

https://vintage.kyoto/

kvw2525

[niraj_patel]

Hello @Ulalala 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid

<style>
   .footer__content-bottom-wrapper {
      display: none !important;
   }
</style>
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.

[Ulalala]

Hi,

Thank you so much for your quick response, but hiding the selector is not what I want to do.

I want the options to be just the currencies.

Thank you.

[niraj_patel]

apologies for mis-under standing
you have to remove code from footer.liquid file.

[Ulalala]

Thank you for your response! Could you tell me which code to remove?

[ThePrimeWeb]

Hey @Ulalala,

Please go into the "Edit Code" option and search for "country-localization.liquid"

Now carefully replace the highlighted portion with the code given below (Mine is line 8 to line 44)

<div class="disclosure">
  <button
    type="button"
    class="disclosure__button localization-form__select localization-selector link link--text caption-large"
    aria-expanded="false"
    aria-controls="{{ localPosition }}List"
    aria-describedby="{{ localPosition }}Label"
  >
    <span>
      {{- localization.country.currency.iso_code }}
    </span>
    {% render 'icon-caret' %}
  </button>
  <div class="disclosure__list-wrapper" hidden>
    <ul id="{{ localPosition }}List" role="list" class="disclosure__list list-unstyled">
      {%- for country in localization.available_countries -%}
        <li class="disclosure__item" tabindex="-1">
          <a
            class="link link--text disclosure__link caption-large focus-inset{% if country.iso_code == localization.country.iso_code %} disclosure__link--active{% endif %}"
            href="#"
            {% if country.iso_code == localization.country.iso_code %}
              aria-current="true"
            {% endif %}
            data-value="{{ country.iso_code }}"
          >
            <span class="localization-form__currency">
              {{- country.currency.iso_code }}</span>
          </a>
        </li>
      {%- endfor -%}
    </ul>
  </div>
</div>

[Ulalala]

Thank you so much for your help @ThePrimeWeb !

It successfully hided the country names, but would it be possible to just who one currency each?

To show only 1 EUR instead of this:

Thank you so much!

 

[ThePrimeWeb · Accepted solution]

Hey @Ulalala,

That might not be possible because this is selector is designed to switch the country, not the currency. Yes, the currency switches but it's switches based on country. So, if I remove 3 of the extra "EUR" selections, what will happen is that the users will not be able to switch to their country.

I do have a suggestion for you, not sure if you would like it. Basically, I could add the country next to the currency in Emoji (Only problem is some desktop's don't support this. All phones should be supported)

This is what i've done so far (This is on my phone)

On my PC that doesn't support it, looks like this

Since most visitors are on phone anyway, it could be nice. 

If you want to do this, just paste this code in the same "country-localization.liquid" file at the very bottom

<script>
  function getFlagEmoji(countryCode) {
    return countryCode.toUpperCase().replace(/./g, char => 
        String.fromCodePoint(127397 + char.charCodeAt())
    );
  }


  var linkElements = document.querySelectorAll('.link--text');
  linkElements.forEach(function(linkElement) {
      var dataValue = linkElement.getAttribute('data-value');
      var spanElement = linkElement.querySelector('.localization-form__currency');
    
      if (spanElement) {
          spanElement.textContent += ' '+ getFlagEmoji(dataValue);
      }
  });
</script>

Screenshot for reference

[Ulalala]

@ThePrimeWeb 

Thank you so much for your fun suggestion! I will consider what would be the best thing to do including your suggestion.

Thank you so much.

[Joseht]

Hello sir,

can this code used in the same place of my store? My website is elixirdiuomo.com, no pass needed. 

Thanks in advance!