Localize page settings

Updated

Localize your page’s SEO details, Open Graph settings, and custom code.

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 only available on certain Localization plans.

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:

<div class="code-block">
<pre class="code-block_body">
<!--Make sure to first "Escape" the HTML before pasting below...use this tool:
https://www.freeformatter.com/html-escape.html-->
<code id="snippet1"  class="code-block_code">
&lt;script&gt;
// 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
}
&lt;/script&gt;
</code></pre>
</div>

Or, for dynamic CSS: 

<div class="code-block">
<pre class="code-block_body">
<!--Make sure to first "Escape" the HTML before pasting below...use this tool:
https://www.freeformatter.com/html-escape.html-->
<code id="snippet1"  class="code-block_code">
&lt;script&gt;
// 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
}
&lt;/script&gt;
</code></pre>
</div>

Related articles