How to hide elements based on selected country

You can use custom CSS in your page's head section to show or hide elements based on the country selected through the Currency Selector Component.

For example, you may have a product description with two tables — one with metric units and one with imperial. You can show imperial units only to US customers and metric units to Australian and Canadian customers.

In the example below:

1. We hide an element with the metric-table class when United States is selected.
2. We hide an element with the imperial-table class when Australia or Canada is selected.

<style>
[sf-country="US"] .metric-table {
	display: none;
}

[sf-country="AU"] .imperial-table,
[sf-country="CA"] .imperial-table {
	display: none;
}
</style>

‍

Change the class selectors and country codes to fit your use case. You can find the complete country code list in the Shopify Storefront API documentation.