Localize page settings

In addition to localizing content in the CMS panel and on the Designer canvas, you can also localize your page’s slug (i.e., URL), page-level SEO settings, and Open Graph settings. By default, each page on your site inherits its settings from the primary locale, but you can edit these on any secondary locale(s). 

Before you get started: Check out the Localization overview to familiarize yourself with Localization. 

Note: Some Localization features are available only on certain Localization plans. Check out a complete comparison of Localization plans and features. 

In this lesson, you’ll learn: 

1. How to localize page-level SEO and Open Graph settings
2. How to localize custom code

How to localize page-level SEO and Open Graph settings

To localize your SEO and Open Graph settings for each page: 

1. Click the Locale view dropdown in the top bar
2. Choose your desired locale
3. Open the Pages panel
4. Hover over the page whose settings you want to edit 
5. Click the settings “cog” icon 

From there, you can manually edit your SEO settings and Open Graph settings as normal — or hover over each field and click the “globe” icon to machine-translate text. 

Learn more about SEO localization.

Pro tip: On Collection pages, you can add Collection fields to your SEO settings and Open Graph settings. 

How to localize custom code 

Similar to other design elements (i.e., layout of elements and components), custom code in secondary locales is inherited from the primary locale. You cannot add or remove custom code while in a secondary locale. 

If you want to create custom code that only affects a specific locale, we recommend using the HTML lang attribute as a selector to target the locale, like so:

<script>
// Get the lang attribute from the HTML element
const htmlLang = document.documentElement.lang;

// Check the lang attribute and run a script accordingly
if (htmlLang === 'en') {
console.log('This page is in English. You can run English-specific code here.');
// Add your English-specific code here
} else if (htmlLang === 'fr') {
console.log('This page is in French. You can run French-specific code here.');
// Add your French-specific code here
} else {
console.log('This page is in a language other than English or French.');
// Add code for other languages here
}
</script>

Or, for dynamic CSS: 

<style>
/* Default styles for all languages */
p {
font-size: 16px;
color: black;
}

/* Styles for English content */
:lang(en) p {
font-weight: bold;
}

/* Styles for French content */
:lang(fr) p {
font-style: italic;
}

/* Add more language-specific styles as needed */
</style>