Translating Shopify stores with Sanity

Seif Ghezala's photo
Seif Ghezala
Updated 2023-11-13 路 4 min
Table of contents

At Tinloof, we have an internal library that does a lot of heavy lifting when it comes to building fast Remix websites that have their content managed from Sanity.

A while ago, we took a step back to research and implement a localization setup with Sanity that handles all use-cases and provides a decent user experience for content managers.

Now that we have a great localization workflow, we included it in our code generation tool, and in this article, we鈥檒l cover what that looks like from both the user and developer perspectives.

Content workflow

The demos below are from a research demo store we're developing, which is a redesigned version of Tony's Chocolonely online shop.

Navigating through different locales

All translatable documents like pages, products, blog articles, and navigation headers or footers can be filtered through by configured locale.

The configured locale can be a language, a country, or a combination of both.

Notice that you also have the option to view unfiltered documents of a certain type.

Video poster

Once you're on a document, you can also navigate between its various translations from the Translations tab.

Video poster

Creating a document

If you create a document when you're on a specific locale filter, then the locale is automatically assigned to the document.

In this example, I'm looking at pages from Denmark. Notice how when I create a document, it automatically has the Denmark locale assigned to it.

If you create a document from the unfiltered tab (All), you're prompted to select a locale for it.

Video poster

Translating a document

Translations can be added from the "Translations" tab. When a translation is created, content from the original document is copied over to the translation document and any references are translated automatically.

What does that mean?

Let's take the navigation header for example, which consists mainly of references to other pages that are displayed as links.

The "Worldwide" header points to "Worldwide" pages. When I create a German translation of it, content is copied from the "Worldwide" header but the new header links to German pages automatically.

Moreover, when you want to link to any other document from the German header, you can only link to German documents.

This makes translations much easier to handle while avoiding any potential errors when linking to other documents.

Video poster

Development workflow

Tinloof's localization implementation is based on scalability and developer user experience.

Defining locales

Locales are defined as a property of a general config.ts file and you can change them at any point.

// config.ts
export const config = {
// ...,
locales: {
"en-uk": {
country: "United Kingdom",
country_iso: "UK",
icon: "馃嚞馃嚙",
currency: "GBP",
},
"en-us": {
country: "United States",
country_iso: "USA",
icon: "馃嚭馃嚫",
currency: "USD",
},
"de-de": {
country: "Germany",
country_iso: "DEU",
icon: "馃嚛馃嚜",
currency: "EUR",
},
},
};

The configured locales are automatically reflected on the Remix routing, GROQ queries, and Sanity studio configurations.

Defining which documents are translatable

You can make a document translatable/localizable by adding setting the localized flag to true on the schema.

// schemas/documents/blogArticle.ts
export default {
// ...,
localized: true
}

Recent articles

SEO best practices on Sanity

When we build a website with Sanity, we configure SEO best practices to rank higher on search engine result pages.
Omar Benseddik's photo
Omar Benseddik
2022-09-05 路 7 min

Images and videos on Sanity

This article is outdated. You can read the Managing Tinloof-powered websites article instead. - Images and videos have to be properly configured to rank in search engine result pages...
Omar Benseddik's photo
Omar Benseddik
2022-09-18 路 7 min