Important: This guide is only for using langify v1 with single domain configuration. It is incompatible with langify v2 implementation. If you are using langify v1 or v2 you can easily tell by the design of langify. Here it is explained in more detail: Which version of langify do I have installed?

If you are using langify with a single-domain setup, you can use the geolizr API Widget to redirect your visitors to the language matching the visitor's location.

This step-by-step guide will show you how to set up the API Widget for a store that is using langify for 2 languages, English and German:


1. Select the API Widget from the menu (if it's still disabled, please enable it by clicking the button next to the widget title):

2. Switch to the "Themes" tab, select your theme from the "Themes" list and click "Save":

3. Open your theme in the shopify theme editor by clicking "Edit HTML/CSS" in the "Online Store -> Themes" section of your shopify backend:

4. Open your "Layout/theme.liquid" template and search for "</body>":

5. Paste the following snippet right before/above the </body> string:

<script>
var callbackCalled = false;
var langifyCompleteCallback = function(object) {
    callbackCalled = true;
    GeolizrAPI.addEventListener('geolizr.geoData', function(geoData) {
        var countryToLanguages = {
            "DE": "<langify-code-for-DE>",
            "GB": "<langify-code-for-GB>",
            "US": "<langify-code-for-US>"
        }
        var onChangeLanguage = function() {
            Geolizr.cookie.set('manually_selected_language', true);
        }

        $('#ly-languages-switcher').change(onChangeLanguage);
        $('.ly-languages-switcher-link').click(onChangeLanguage);

        if (typeof langify.switcher.getSlickSwitcher !== "undefined") {
            var onSlickSwitcher = function() {
                if ($('#ly-slick-languages-switcher .dd-option').length > 0)
                    $('#ly-slick-languages-switcher .dd-option').click(onChangeLanguage);
            };

            var observer = new MutationObserver(onSlickSwitcher);
            observer.observe($('body')[0], {
                childList: true,
                subtree: true
            });
        }

        var languageId = countryToLanguages[geoData.country.code];
        if (!Geolizr.cookie.get('manually_selected_language') && languageId && languageId != "{{ language }}") {
            langify.helper.saveLanguage(languageId);
        }
    });
}
setTimeout(function() {
    if (callbackCalled === false) {
        langifyCompleteCallback()
    }
}, 800); 
</script>


6. The countryToLanguages object can be used to configure which country should be redirected to which language.


In this case German (DE) visitors will be redirected to the language ly2315 (German), whereas visitors from United Kingdom (GB) and United States (US) will be redirected to the language ly2076 (English).


(You can add as many country/language pairs as required)


You can see which ID belongs to which language by opening the "Settings / Languages" section in langify:




7. Afterwards it should look something like this:

8. That's it. Your visitors should now be redirected to the language matching their country.