Display markets instead of countries in region selector

[lplabranche]

Hello,

I would like to display Markets only (Canada, USA, International) in the region selector instead of countries name.

Is this possible?

thanks

www.toujoursfaim.com pass:encorefaim

[Kudosi-Carlos]

Hello @lplabranche 

You can swap out the country list for your three markets by editing the language/currency selector snippet in your theme. Here’s the quick way in Dawn (or any OS 2.0 theme):

1. Edit the selector snippet

In Admin go to Online Store → Themes → Actions → Edit code

Open snippets/currency-selector.liquid (or snippets/language-selector.liquid if you only offer one currency)

2. Replace the country loop with markets

• Find the loop in liquid that looks like:

{% for country in localization.available_countries %}
<option value="{{ country.iso_code }}">{{ country.name }}</option>
{% endfor %}

• Then replace it with:

{% assign markets =
"Canada:CA,United States:US,International:XX" | split: ","
%}
{% for entry in markets %}
{% assign parts = entry | split: ":" %}
<option value="{{ parts[1] }}">{{ parts[0] }}</option>
{% endfor %}

Here CA and US are your real country codes (so Shopify still directs pricing/buy buttons correctly), and XX is a dummy code you can catch in your backend to treat as “all other countries.”

3. Save & test

Refresh your storefront—your selector will now show “Canada,” “United States,” and “International” only. If you need more backend logic (like routing “XX” to a specific shipping profile), you can catch that code in your theme or via an app integration.

[Grahme]

To display markets (like "Canada", "USA", "International") instead of individual countries in a region selector, you'll need to create a custom region selector or use an existing one that supports market selection.

[Grahme]

To display markets (like "Canada", "USA", "International") instead of individual countries in a region selector, you'll need to create a custom region selector or use an existing one that supports market selection.

Marion County Property Appraiser

[lplabranche]

Hey! Thanks for your reply, however I think the snippet is called country-localization.liquid.

Here are the original codes. It kind if worked when i've replaced the highlighted loop, however it fucked the font displayed and currency, which I would like to remain the same.

Could you please help me to modify it properly without changing the fonts and display?

{%- comment -%}
Renders the country picker for the localization form

Accepts:
- localPosition: pass in the position in which the form is coming up to create specific IDs
{%- endcomment -%}

<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 }}
{{ localization.country.currency.symbol }} | {{ localization.country.name -}}
</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 }}
{{ country.currency.symbol }} |</span
>
{{ country.name }}
</a>
</li>
{%- endfor -%}
</ul>
</div>
</div>
<input type="hidden" name="country_code" value="{{ localization.country.iso_code }}">

Thank you very much for your help. I can see we are very close!