Country Detection
Overview
The Country Detection feature uses location data to suggest the most relevant online shop for each customer. It automatically detects the customer's location and offers the option to switch to the local version of the shop or continue browsing globally, allowing for a more tailored shopping journey.
To determine location, the feature relies on information about the customer's current time zone, which is provided by their web browser. This method ensures a smooth and unobtrusive experience, allowing customers to start exploring relevant products and offers right away.
Country Detection Pop-up
Getting Started
The Country Detection functionality detailed below is accessible out of the box starting with version SFB 1.3.0. If you're using this version or a later one, you can skip this step.
If you started with a version prior to SFB 1.3.0, you can pull in the new components using the following command:
npx @scayle/storefront-cli add country-detection
This will create new files in your project and install the corresponding NPM module for the composables. For more details on the available composables for this feature, please refer to the Composables Overview.
The main component that will be generated is called `CountryDetection` which you can then include in your default layout as such:
<CountryDetection />
Display Logic
Single Shop Configuration
If you have only one shop, geolocation logic is not activated, and no pop-up will appear. The assumption is that this single shop serves all customers, regardless of their location.
Multiple Shop Configurations
When you have multiple shops, the Country Detection logic becomes active.
- One Shop per Country:
- If you have a shop that matches the customer's detected country and they visit a shop for a different country, a pop-up will appear.
- For example, if you have shops for Germany, the UK, and the US, and a customer in Germany visits the UK shop, the pop-up will suggest switching to the German shop.
- If you have a shop that matches the customer's detected country and they visit a shop for a different country, a pop-up will appear.
- Multiple Shops per Country:
- If you have more than one shop for the customer’s country, the pop-up will offer choices for each available shop.
- For example, if you have two shops for Germany (one in German and one in English) and a customer in Germany visits the UK shop, the pop-up will suggest both German shops. The options will be "Switch to Germany shop (English)" or "Switch to Germany shop (German)," with an additional option to stay on the current shop.
- If you have more than one shop for the customer’s country, the pop-up will offer choices for each available shop.
- No Local Shop Available:
- If there is no shop for the customer’s detected country, and you do not have a global shop, no pop-up will be shown. However, if you do have a global shop, the pop-up will suggest switching to it.
Pop-up Behavior & Localization
The location-based pop-up message is designed to be shown only once during a customer's visit unless their location changes. Customers who have logged in will not see this message since their preferences are already saved.
It is designed to be dismissed easily, disappearing if a customer clicks outside of it and won't reappear during the same visit. To ensure a consistent experience, the message is translated based on the language settings of the website.
Customizing the Default Implementation
The Country Detection process is designed to be adaptable and easily configurable. If you prefer to use a specialized third-party service or an alternative browser-based solution, you can adjust the setup with ease.
For detailed instructions on tailoring how a customers location is determined, setting up shopping experiences specific to certain regions, or managing country codes and language translations, please consult our Customization Guideline.
