How to support multiples languages

Locale files are JSON files that contain a set of translations for text strings used throughout the theme.

When an additional locale (language) is published, Store Pages automatically creates a URL path for it (/es).

Duplicate the defaul locale inside the locale folder, rename it with the locale id that indentify the language (es.json, en.json, etc).

Enable the locale in the theme.json configuration:

{
  ...
  "default_locale": "en",
  "published_locales": [
    "en",
    "es"
  ]
  ...
}

Add to your templates

Add inside of the head tag the content of the tags related with multiple pages

{% content_for_head %}

This generate the content for links to help SEO.

<link rel="alternate" hreflang="x-default" href="/">
<link rel="alternate" hreflang="es" href="/es/">
<link rel="alternate" hreflang="en" href="/">

Get the list of locales

<p class="text-sm mb-8">
  {% for published_locale in published_locales %}
    <a class="text-sm mr-4 {% if published_locale.code == locale %}font-bold{% endif %}" href="{{ published_locale.url }}">
      {% if published_locale.code == "en" %}
        🇬🇧 English
      {% elsif published_locale.code == "es" %}
        🇪🇸 Español
      {% else %}
        🌐 {{ published_locale.code }}
      {% endif %}
    </a>
  {% endfor %}
</p>

Once the locale is uploaded to the platform you will be able to edit the keys and unpublish the locales.