• Requirements
  • Step 1: Query for browsing context suggestions
  • Step 2: Update the current localization
  • Next steps

Detect and set a visitor’s optimal localization

If you have multiple localized versions of a single store using Shopify Markets, then you should make sure that each visitor interacts with the optimal version of the store. Depending on the merchant’s shop configuration, search engines might be able to pre-localize visitors, and Shopify might automatically redirect visitors. However, it’s still possible for a visitor to be browsing in a context for a market that they aren’t actually located in.

This guide shows how to use the Ajax API to detect a visitor’s optimal localization and to update their current state.

Note

As a best practice, don’t try to prevent visitors from browsing in a context other than their detected optimum. GeoIP detection isn’t perfect, especially when visitors are using VPNs, and sometimes customers want to have a product shipped to somewhere other than their current location. Shopify’s checkout will ensure that the prices and product availability are appropriate for the shipping address the customer eventually chooses.

Requirements

Anchor link to section titled "Requirements"
  • You have more than one market configured on your Shopify store.

Step 1: Query for browsing context suggestions

Anchor link to section titled "Step 1: Query for browsing context suggestions"

To use the customer’s browser settings and IP address to determine if a shop offers a better localized experience, you can query for browsing context suggestions. You can request country or language suggestions, or both, and provide values that should be excluded from suggestions. The names of languages and countries will be returned in the suggested language if there is one, or the current storefront language if not.

Step 2: Update the current localization

Anchor link to section titled "Step 2: Update the current localization"

The returned suggestions can be used to update the current localization by submitting a localization form. For a full tutorial detailing how to build a country and language selector in themes, refer to Support multiple currencies and languages. The following example shows a minimal implementation of building and submitting a localization form in JavaScript:

Next steps

Anchor link to section titled "Next steps"
  • Learn how to detect and set a user’s optimal localization when building a Hydrogen shop.
  • Learn how to add a country and language selector to your theme so customers can choose their own locale preference.
  • Get an overview of the localized experiences that are possible with Shopify Markets, and how to effectively support them.
  • Explore an example of using the Storefront API to load a shop’s supported countries and languages.
  • Use the GraphQL Admin API to translate an online store’s content.

On this page

  • Requirements
  • Step 1: Query for browsing context suggestions
  • Step 2: Update the current localization
  • Next steps