From Silos to Synergy: The Complete Playbook to Frontend Tech-Stack Unification

Hygraph
Docs

5.2 Content localization

#Overview

Hygraph allows having different locales for your content. We want part of the content of our e-commerce to be in two languages: English & Spanish. This is why we selected the Localize field checkbox for some of our fields during schema creation.

The reason why we've placed this into a separate section is that before we can actually write the localized content, we need to add a new locale to our project.

We'll use this lesson to add our new locale and to write the localized content.

#Add a locale

Adding a locale in Hygraph is really easy. First we need to navigate to Project settings > General > Locales. There, we'll see our default locale, which is English.

In this case we want to add Spanish, so we'll then use the dropdown menu to select Spanish from the list. We can also start typing the word to start filtering values. Selecting Spanish will autocomplete the API ID field.

Finally, we'll click Add, and the new locale will be added to our project.

#Localized content

Now that a new locale has been added to our project, we are ready to start adding localized content to our content entries.

#Summer campaign

Our Summer campaign landing page has a localized title and also contains components that have localized fields. We'll add the Spanish localization with the following localized information:

FieldTranslated content
Landing page titleCampaña de verano
Stripes > Call to Action > HeadingPrepárate para el verano con estas increíbles ofertas
Stripes > Call to Action > Body¡Las rebajas de verano están en pleno apogeo! ¡Vea las increíbles ofertas de verano que enumeramos a continuación!
Stripes > Product grid > HeadlineRopa de verano

#Products

Let's repeat the process for some of our products. We'll go into each of these product entries in the content editor, add the Spanish locale, and type in the following translations:

Blue running shoes

FieldTranslated content
Product nameZapatillas para correr azules
Product descriptionEstas zapatillas de running azules ofrecen tanto forma como función, brindando un apoyo excepcional y estilo para tus actividades deportivas. El material transpirable y la suela acolchada garantizan una experiencia cómoda kilómetro tras kilómetro.

Plaid shirt

FieldTranslated content
Product nameCamisa a cuadros
Product descriptionEsta camisa a cuadros emana un encanto atemporal, ideal para un día casual fuera o una reunión relajada por la tarde. El patrón clásico a cuadros y el ajuste cómodo la convierten en una prenda básica para un estilo sin esfuerzo.

Black leather shoes

FieldTranslated content
Product nameZapatos de cuero negro
Product descriptionEstos zapatos de cuero negro combinan de manera impecable la sofisticación con la durabilidad, convirtiéndolos en una elección versátil tanto para ocasiones formales como para uso diario. El diseño elegante y el cuero de alta calidad garantizan un atractivo atemporal que complementa cualquier conjunto.

Necklace

FieldTranslated content
Product nameCollar
Product descriptionEste collar blanco está elaborado con partes de caracoles de mar, evocando la esencia relajada y playera. Perfecto para quienes buscan un toque marino en su estilo diario.

Headband

FieldTranslated content
Product nameVincha
Product descriptionEsta vincha de algodon blanco brinda un toque elegante y sofisticado a tu peinado. Ideal para completar tu look con un toque de moda y comodidad.