Shopify - There is a conflict with my market/currency selector

In this article, you'll learn more about how to deal with a potential conflict between Weglot and your market/currency selector.

If you use the Shopify Dawn theme or Glaze theme, you may experience an undesired behavior when installing Weglot on your website, which keeps your market/currency selector open.

It comes from the fact that Weglot and these Shopify themes both use the CSS class "country-selector".

There are 2 different solutions to deal with this:

Use JavaScript code

You can go to your Shopify admin, then select "Online Store", go to "Themes", click on "...", and "Edit Code", and paste this code in the theme.liquid file, in the head section of the existing code:

<script>
function removeCountrySelectorClass() {
  var element = document.querySelector("#HeaderCountryForm > div > div > div.disclosure__list-wrapper.country-selector");
  if (element) {
    element.classList.remove("country-selector");
  }
}

document.addEventListener("DOMContentLoaded", function() {
  removeCountrySelectorClass();
});
</script>

Use CSS

You can go to your Weglot dashboard > Settings > Language Switcher > Custom CSS and add this code:

div.disclosure__list-wrapper.country-selector {
  display: revert-layer !important;
}

Don't forget to save the changes you've made.

If you are still experiencing this undesired behavior on your website, do not hesitate to contact us at support@weglot.com.