Solved

Remove countries from the country/currency selector - Dawn theme

Ulalala
New Member
16 0 0

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

 

Accepted Solution (1)
ThePrimeWeb
Shopify Partner
1026 267 212

This is an 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)

ThePrimeWeb_0-1706780438102.jpeg

 

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

ThePrimeWeb_1-1706780468159.png

 

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

ThePrimeWeb_2-1706780539137.png

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? Contact me here

View solution in original post

Replies 8 (8)

techlyser_web
Shopify Partner
1004 188 189

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.

techlyser_web_0-1706769960807.png

 

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
Ulalala
New Member
16 0 0

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.

techlyser_web
Shopify Partner
1004 188 189

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

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
Ulalala
New Member
16 0 0

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

ThePrimeWeb
Shopify Partner
1026 267 212

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)

ThePrimeWeb_0-1706773066217.png

 

 

<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>

 

 

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? Contact me here
Ulalala
New Member
16 0 0

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:

スクリーンショット 2024-02-01 17.17.29.png

Thank you so much!

ThePrimeWeb
Shopify Partner
1026 267 212

This is an 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)

ThePrimeWeb_0-1706780438102.jpeg

 

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

ThePrimeWeb_1-1706780468159.png

 

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

ThePrimeWeb_2-1706780539137.png

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? Contact me here
Ulalala
New Member
16 0 0

@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.