Improve Shopify Store with Multilingual Support and Liquid Techniques

In the world of e-commerce, providing a seamless multilingual experience is crucial for reaching a global audience. Shopify merchants often face the challenge of dynamically adjusting their store’s content based on the user’s language preference. One common approach is to use the language code in the URL to modify page content. This article will explore various methods to achieve this functionality in Shopify, with a focus on using Liquid code for language detection.

Understanding Language Codes in Shopify URLs

Before diving into the technical solutions, it’s important to understand how language codes typically appear in Shopify URLs.

The Structure of Multilingual Shopify URLs

In most cases, the language code in a Shopify URL follows this pattern:

https://www.yourstorename.com/language-code/rest-of-the-url

For example:

https://www.example.com/en/collections/all
https://www.example.com/fr/collections/all

Here, ‘en’ represents English, and ‘fr’ represents French.

Why Language Codes Matter

Language codes in URLs serve several purposes:

1. They allow search engines to understand the language of the page content.
2. They enable users to easily switch between language versions of a page.
3. They provide a basis for developers to implement language-specific functionality.

Methods for Detecting Language Code in Shopify

There are several approaches to detecting the language code in Shopify. Let’s explore the most effective methods, starting with the recommended solution.

Using Liquid’s Built-in Variables

The most reliable and straightforward method to determine the current language in Shopify is by using Liquid’s built-in variables.

The shop.locale Variable

{% if shop.locale == 'en' %}
  <!-- English content -->
{% elsif shop.locale == 'fr' %}
  <!-- French content -->
{% endif %}

This method is clean, efficient, and works across all pages of your Shopify store.

Extracting Language Code from URL

While not as robust as using shop.locale, extracting the language code from the URL can be useful in certain scenarios.

Using Liquid Filters

{% assign lang_code = request.path | slice: 1, 2 %}
{% if lang_code == 'en' %}
  <!-- English content -->
{% elsif lang_code == 'fr' %}
  <!-- French content -->
{% endif %}

This method uses the slice filter to extract the first two characters after the initial forward slash in the URL path.

JavaScript-based Solution

For more complex scenarios or when working with certain third-party apps, a JavaScript solution might be necessary.

<script>
  var langCode = window.location.pathname.split('/')[1];
  if (langCode === 'en') {
    // English-specific JavaScript
  } else if (langCode === 'fr') {
    // French-specific JavaScript
  }
</script>

This script splits the URL path and extracts the language code, allowing for dynamic content manipulation on the client side.

Implementing Language-Specific Content

Once you’ve determined the language code, you can use it to display different content based on the user’s language preference.

Conditional Content Display

{% if shop.locale == 'en' %}
  <h1>Welcome to our store!</h1>
{% elsif shop.locale == 'fr' %}
  <h1>Bienvenue dans notre boutique !</h1>
{% else %}
  <h1>Welcome / Bienvenue</h1>
{% endif %}

Dynamic Asset Loading

{% assign lang = shop.locale %}
<img src="{{ 'banner-' | append: lang | append: '.jpg' | asset_url }}" alt="Banner">

This example loads a language-specific banner image based on the current locale.

Best Practices for Multilingual Shopify Stores

When implementing language-based content in Shopify, keep these best practices in mind:

Use Native Shopify Translations

Whenever possible, use Shopify’s built-in translation features. This ensures better SEO and a more maintainable codebase.

Avoid Client-Side Translation Services

While apps like Weglot offer easy translation solutions, they can negatively impact SEO as they often rely on JavaScript for translation, which search engines may not properly index.

Implement Proper Hreflang Tags

Use hreflang tags to help search engines understand the relationship between your multilingual pages:

<link rel="alternate" hreflang="en" href="https://www.example.com/en/page">
<link rel="alternate" hreflang="fr" href="https://www.example.com/fr/page">

Test Thoroughly

Always test your language detection and content switching across different browsers and devices to ensure a consistent user experience.

Advanced Techniques for Language-Based Customization

For more sophisticated language-based customizations, consider the following techniques:

Using Metafields for Language-Specific Data

Metafields can store language-specific content that can be easily retrieved based on the current language:

{% if shop.locale == 'en' %}
  {{ product.metafields.custom.description_en }}
{% elsif shop.locale == 'fr' %}
  {{ product.metafields.custom.description_fr }}
{% endif %}

Creating Language-Specific Sections

You can create separate section files for different languages and include them conditionally:

{% if shop.locale == 'en' %}
  {% section 'header-en' %}
{% elsif shop.locale == 'fr' %}
  {% section 'header-fr' %}
{% endif %}

Leveraging App Blocks for Language-Specific Apps

If you’re using apps that provide language-specific functionality, you can use app blocks to include them only for relevant languages:

{% if shop.locale == 'en' %}
  {% render 'app_block', type: 'english_reviews' %}
{% elsif shop.locale == 'fr' %}
  {% render 'app_block', type: 'french_reviews' %}
{% endif %}

By implementing these advanced techniques, you can create a truly localized experience for your international customers, potentially increasing engagement and conversions across different markets.

Remember, the key to successful multilingual e-commerce is not just translation, but cultural adaptation and a seamless user experience across all supported languages. With Shopify’s robust platform and the techniques outlined in this article, you’re well-equipped to create a global online store that speaks to customers in their own language.