App reviews, troubleshooting, and recommendations
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!
I'm in the same boat. I'll update if I find anything.
Did you ever figure out how to move the Geolocation currency selector to the top?
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 }} • ({{ country.currency.iso_code }} • {{ 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>
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?
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?
Hey @Maya9, have you tried the answer above?
It works for us, though.
Here is a screenshot from it:
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.
I have 2 headers desktop and mobile, i tried using the media query but it doesn't work, any work around?
Thank you
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024