Customize page configurations

Alongside personalizing content in the CMS dashboard and on the Designer canvas, you also have the ability to customize your page’s slug (i.e., URL), page-level SEO configurations, and Open Graph configurations. By default, each page on your website derives its configurations from the primary locale, but you have the option to modify these on any secondary locale(s). 

Prior to commencing: Explore the Localization overview to acquaint yourself with Localization. 

Note: Some Localization functions are exclusively accessible on particular Localization plans. Take a comprehensive look at the comparison of Localization plans and features. 

In this guide, you’ll discover: 

1. How to tailor page-level SEO and Open Graph configurations
2. How to adjust custom code

Tailoring page-level SEO and Open Graph configurations

To personalize your SEO and Open Graph configurations for each page: 

1. Press the Locale view dropdown in the top bar
2. Select your preferred locale
3. Access the Pages panel
4. Hover over the page whose configurations you wish to modify 
5. Click the configurations “cog” icon 

Subsequently, you can manually adjust your SEO configurations and Open Graph configurations as usual — or hover over each field and click the “globe” icon to machine-translate text. 

Learn more about SEO customization.

Insider tip: For Collection pages, you have the option to integrate Collection fields into your SEO configurations and Open Graph configurations. 

How to adjust custom code

Comparable to other design elements (i.e., layout of elements and components), custom code in secondary locales is inherited from the primary locale. You are unable to append or eliminate custom code while in a secondary locale. 

If you wish to create custom code that exclusively impacts a specific locale, we suggest utilizing the HTML lang attribute as a selector to target the locale, like this:

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

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

Alternatively, for dynamic CSS: 

<style>
/* Custom 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;
}

/* Include additional language-specific styles as necessary */
</style>