This documentation is for developers only. If you're not a developer, please send this information to your developer, as they can follow the documentation.
If you have more than one store synced with Orbe, please don't follow this article. Your selector should be the one created by the Orbe app.
If you need to customize this selector, please contact our Support team via app chat or email at support@orbe.app.
In our app Orbe, we have an app embed called "Market Selector" that allows any Shopify merchant to add and customize a country and language selector in the footer of any Shopify Theme. These selectors use the Orbe technology.
However, some merchants would like to use their native Shopify theme country and language selector with Orbe because they want its style and UX in their theme. They can work with a developer to synchronize this theme selector with Orbe for that case.
Tutorial
This tutorial provides a straightforward and effective method for integrating a country selector with Orbe, ensuring a seamless user experience.
1. Retrieve the store domain
First, ensure we correctly set cookies across your Shopify store by capturing the domain.
This can be achieved using Orbe's getCountryDomain function. If this function does not provide a result, we'll use window.location.hostname as a reliable fallback.
Locate the function in your Shopify theme that triggers when a user selects a country or language. This function usually handles the event and submits the form in the last step.
onItemClick(event) {event.preventDefault();const form =this.querySelector('form');this.elements.input.value=event.currentTarget.dataset.value;if (form) form.submit();}
For each scenario, it is super important that you update this:
Country change: Update the cookie mdApp_countryCodeDomain and indicate in a URL parameter this update to Shopify Markets. This is only necessary for country change as you may set up a different subdomain or domain for a market, and you will move these preferences throughout the URL parameter to Shopify Markets.
Language change: Update the cookie mdApp_showRecommendationLang.
Here is the code improvement based on the above example:
onItemClick(event) {event.preventDefault();constform=this.querySelector('form');constinputType=event.currentTarget.dataset.input;constvalue=event.currentTarget.dataset.value;// Determine if it is a country_code or language_code changeconstinputCountry=form.querySelector('input[name="country_code"]');constinputLanguage=form.querySelector('input[name="locale_code"]');// Get the return_toconstreturnToInput=form.querySelector("input[name='return_to']");if (inputCountry) {// Check if the 'country' parameter exists and if not add it to the URLif (returnToInput.value.match(/(\?|&)country=[^&]*/)) {// Replace the existing country parameterreturnToInput.value =returnToInput.value.replace(/(\?|&)country=[^&]*/,`$1country=${value}`); } else {// Add the country parameterif (returnToInput.value.includes('?')) {returnToInput.value +=`&country=${value}`; } else {returnToInput.value +=`?country=${value}`; } }// Update the Orbe cookie for country code document.cookie = `mdApp_countryCodeDomain=${value}; domain=${shopDomain}; path=/; max-age=${60 * 60 * 24 * 60};`;
} if (inputLanguage) {// Update the Orbe cookie for language code document.cookie = `mdApp_showRecommendationLang=${value}; domain=${shopDomain}; path=/; max-age=${60 * 60 * 24 * 60};`;
}// Update the form's input field and submit the formthis.elements.input.value = value;if (form) form.submit();}