Move Geolocation Currency Selector to Top of Website

Wallace7C
Visitor
3 0 2

Hello, my client is using the Geolocation app on their website using a customized Prestige theme. Geolocation comes with a currency selector at the footer. We would like to move it to the top of the website if at all possible. I noticed the selector itself is wrapped in a <div> that has no ID or class name. Is there any way to edit the app codes so we can add an ID or class name to this <div> so we can move it using CSS?

I tried reaching out to support but they just directed me to contact the theme (which has nothing to do with the app) or advised me not to make the change.

If anyone has any experience with changing the Geolocation currency selector outside of its default footer position, would love to know how you did it. Thank you!

Replies 7 (7)

glowcreativenz
Shopify Partner
15 1 5

I'm in the same boat. I'll update if I find anything.

Ashleigh
Web Designer | Shopify Partner
Glow Creative
Maya9
Excursionist
52 0 4

Did you ever figure out how to move the Geolocation currency selector to the top?

RadoslavValchev
Shopify Partner
2 0 0

Hey @Wallace7C, there are no settings in the app to move the selects wherever you want.
You need to use custom code and utilize the Localization object (Liquid objects: localization (shopify.dev)), which Shopify provides. Here is an article about how they implement it: Support multiple currencies and languages (shopify.dev)

Here is my simple solution with simple selects:

{% if localization.available_countries.size > 1 or localization.available_languages.size > 1 %}
  {% form 'localization' %}
    {% if localization.available_countries.size > 1 %}
      <label class="locale-selectors__label" for="country_code">
        <span>Country/region</span>

        <select id="country_code" class="locale-selectors__selector" name="country_code">
          {% for country in localization.available_countries %}
            <option value="{{ country.iso_code }}" {% if country.iso_code == localization.country.iso_code %}selected{% endif %}>
              {{ country.name }} &bull; ({{ country.currency.iso_code }} &bull; {{ country.currency.symbol }})
            </option>
          {% endfor %}
        </select>
      </label>
    {% endif %}

    {% if localization.available_languages.size > 1 %}
      <label class="locale-selectors__label" for="locale_code">
        <span>Language</span>

        <select id="locale_code" class="locale-selectors__selector" name="locale_code">
          {% for language in localization.available_languages %}
            <option value="{{ language.iso_code }}" {% if language.iso_code == localization.language.iso_code %}selected{% endif %}>
              {{ language.endonym_name | capitalize }}
            </option>
          {% endfor %}
        </select>
      </label>
    {% endif %}
  {% endform %}
{% endif %}


And the script code to make submit the form on selecting an option:

<script>
  const localizationForm = document.querySelector('#localization_form')
  const selects = localizationForm.querySelectorAll('select')

  selects.forEach(select => {
    select.addEventListener('change', e => {
      localizationForm.submit()
    })
  })
</script>



pramodraam
Shopify Partner
77 2 9

Hi,

 

Where do these two pieces of your code go? Is this a separate solution or something to be done on top of installing Geolocation app?

Maya9
Excursionist
52 0 4

Hi I'm trying to the same thing as I just installed the app. It makes no sense to me that the selector would be at the bottom of the page instead of at the top (where customers can actually see and utilize it). Did you ever figure out how to move it to the top?

RadoslavValchev
Shopify Partner
2 0 0

Hey @Maya9, have you tried the answer above?
It works for us, though.
Here is a screenshot from it: 

RadoslavValchev_0-1690872419531.png

 

In the end, we decided that it is best to have both selects in a modal, so currently, this button with the current language flag opens a modal with both selects - country, and language.

San1973
Visitor
1 0 0

I have 2 headers desktop and mobile, i tried using the media query but it doesn't work, any work around?

Thank you