Human-readable Page Title
Learn about customizing page titles in Custom Applications.
This page applies only to Custom Applications.
By default a Custom Application displays the document's <title> based on the following format:
<Entry-point-uri-path> - <project-key> - Merchant Center
This feature is available from version 21.15.0 onwards.
Page-specific titles
To provide a more readable page title, an application can override the default title in some of its pages.
Overwriting a title means to explicitly render a different version of the default page title for a specific location. This is done using the <ApplicationPageTitle> component.
For example, given the page location /my-shop/products/<id>, the page title should ideally contain the name of the Product.
<product name> - Products - my-shop - Merchant Center
Notice that we're using the Product name (not the ID) to provide meaningful information. This means that the page title should be overwritten only when the Product data has been loaded.
To overwrite the default page title, you can render the <ApplicationPageTitle> component with the additional Product name.
<ApplicationPageTitle additionalParts={['Red shoes']} />// Red shoes - Products - almond-40 - Merchant Center
The values provide in the additionalParts prop will be appended to the left-hand side of the default page title.
If a value exceeds 24 characters length, it will be truncated in the middle.
Mapping guidelines
The following guidelines aim to indicate in which type of pages there is a chance of overwriting the default page title.
Empty cells indicates that the mapping is not necessary, and the fallback value on the adjacent left-column is used.
| URL | Default mapping (App kit) | Human-readable application mapping (per-page) |
|---|---|---|
| /my-project/products | Products - my-project - Merchant Center | |
| /my-project/products/new | Products - my-project - Merchant Center | |
/my-project/products/<id> | Products - my-project - Merchant Center | <product name> - Products - my-project - Merchant Center |
/my-project/products/<id>/variants | Products - my-project - Merchant Center | <product name> - Products - my-project - Merchant Center |
/my-project/products/<id>/variants/<id> | Products - my-project - Merchant Center | <product name> - Products - my-project - Merchant Center |
| /my-project/settings/product-types | Settings - my-project - Merchant Center | Product-types - my-project - Merchant Center |
/my-project/settings/product-types/<id> | Settings - my-project - Merchant Center | <product-type name> - Product-types - my-project - Merchant Center |
/my-project/settings/project/stores/<id> | Settings - my-project - Merchant Center | <store name> - Stores - Project Settings - my-project - Merchant Center |