# Add / Edit Page Category

## Description

In this page, the administrators can edit the existing or add absolutely new CMS Category in the webshop system.

<figure><img src="https://3147996356-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeRh5ljXXvELkmmdiRmg8%2Fuploads%2FjhIkqXq8P78AFt6LJzWh%2Fimage.png?alt=media&#x26;token=c87205a4-fbd5-4668-8387-b37300771742" alt="Adding or Editing new page category UI"><figcaption><p>Adding or Editing new page category User Interface</p></figcaption></figure>

## QA

[Link to the tests](https://build.prestashop-project.org/test-scenarios/scenarios/core/functional/bo/design/pages.html)

## Common components <a href="#common-components" id="common-components"></a>

* [Breadcrumbs navigation](https://docs.prestashop-project.org/functional-documentation/functional-documentation/ux-ui/common-components/back-office-header/breadcrumbs) - [Breadcrumb UI Kit](https://build.prestashop.com/prestashop-ui-kit/?path=/story/breadcrumb--breadcrumb).
* [Heading of the page](https://docs.prestashop-project.org/functional-documentation/functional-documentation/ux-ui/common-components/back-office-header/heading-of-the-page) - [Headings UI Kit](https://build.prestashop.com/prestashop-ui-kit/?path=/story/headings--headings).
* [E-commerce logo](https://docs.prestashop-project.org/functional-documentation/functional-documentation/ux-ui/common-components/back-office-header/prestashop-logo)&#x20;
* [PrestaShop version number](https://docs.prestashop-project.org/functional-documentation/functional-documentation/ux-ui/common-components/back-office-header/prestashop-version-number)&#x20;
* [Quick access dropdown](https://docs.prestashop-project.org/functional-documentation/functional-documentation/ux-ui/common-components/back-office-header/quick-access-dropdown)&#x20;
* [Search input](https://docs.prestashop-project.org/functional-documentation/functional-documentation/ux-ui/common-components/back-office-header/search-input-field)
* [Shop switcher with eye icon](https://docs.prestashop-project.org/functional-documentation/functional-documentation/ux-ui/common-components/multistore-component/shop-switcher-with-eye-icon)
* Bell icon (todo link)
* [Account icon](https://docs.prestashop-project.org/functional-documentation/functional-documentation/ux-ui/common-components/back-office-header/account-icon)
* [Save button](https://docs.prestashop-project.org/functional-documentation/functional-documentation/ux-ui/common-components/forms/save-button)
* [Cancel button](https://docs.prestashop-project.org/functional-documentation/functional-documentation/ux-ui/common-components/forms/cancel-button)

## Page section

Page section starts with the title *CMS Category* only.

### Name

<table><thead><tr><th width="200">Description</th><th>Value</th><th align="center">Error message</th><th data-hidden></th></tr></thead><tbody><tr><td>Mandatory</td><td>YES</td><td align="center">-</td><td>Error message if not allowed</td></tr><tr><td>Allowed/Forbidden values</td><td>Symbols like "#$%@" etc. are forbidden</td><td align="center">"@$@#$@#$@" is invalid - Language: English (English)</td><td></td></tr><tr><td>Default value</td><td>Prefilled or empty input</td><td align="center">-</td><td></td></tr><tr><td>Help text</td><td>Invalid characters:&#x3C;>;=#{}</td><td align="center">-</td><td></td></tr><tr><td>Tool tips</td><td>-</td><td align="center">-</td><td></td></tr><tr><td>Lower limit</td><td>-</td><td align="center">-</td><td>Error message if bellow the limit</td></tr><tr><td>Upper limit</td><td>-</td><td align="center">-</td><td>Error message if up to the limit</td></tr><tr><td>Behavior</td><td><a href="#name-behavior">link to the behavior</a></td><td align="center">-</td><td></td></tr></tbody></table>

### Displayed

<table><thead><tr><th width="200">Description</th><th>Value</th><th align="center">Error message</th><th data-hidden></th></tr></thead><tbody><tr><td>Mandatory</td><td>NO</td><td align="center">-</td><td>Error message if not allowed</td></tr><tr><td>Allowed/Forbidden values</td><td>-</td><td align="center">-</td><td></td></tr><tr><td>Default value</td><td>Enabled</td><td align="center">-</td><td></td></tr><tr><td>Help text</td><td>-</td><td align="center">-</td><td></td></tr><tr><td>Tool tips</td><td>-</td><td align="center">-</td><td></td></tr><tr><td>Lower limit</td><td>-</td><td align="center">-</td><td>Error message if bellow the limit</td></tr><tr><td>Upper limit</td><td>-</td><td align="center">-</td><td>Error message if up to the limit</td></tr><tr><td>Behavior</td><td><a href="#displayed-behavior">link to the behavior</a></td><td align="center">-</td><td></td></tr></tbody></table>

### Parent category

<table><thead><tr><th width="200">Description</th><th>Value</th><th align="center">Error message</th><th data-hidden></th></tr></thead><tbody><tr><td>Mandatory</td><td>NO</td><td align="center">-</td><td>Error message if not allowed</td></tr><tr><td>Allowed/Forbidden values</td><td>-</td><td align="center">-</td><td></td></tr><tr><td>Default value</td><td>Home</td><td align="center">-</td><td></td></tr><tr><td>Help text</td><td></td><td align="center">-</td><td></td></tr><tr><td>Tool tips</td><td>-</td><td align="center">-</td><td></td></tr><tr><td>Lower limit</td><td>-</td><td align="center">-</td><td>Error message if bellow the limit</td></tr><tr><td>Upper limit</td><td>-</td><td align="center">-</td><td>Error message if up to the limit</td></tr><tr><td>Behavior</td><td><a href="#parent-category-behavior">link to the behavior</a></td><td align="center">-</td><td></td></tr></tbody></table>

### Description

<table><thead><tr><th width="200">Description</th><th>Value</th><th align="center">Error message</th><th data-hidden></th></tr></thead><tbody><tr><td>Mandatory</td><td>NO</td><td align="center">-</td><td>Error message if not allowed</td></tr><tr><td>Allowed/Forbidden values</td><td>-</td><td align="center">-</td><td></td></tr><tr><td>Default value</td><td>Prefilled or empty input values</td><td align="center">-</td><td></td></tr><tr><td>Help text</td><td><em>-</em></td><td align="center">-</td><td></td></tr><tr><td>Tool tips</td><td>-</td><td align="center">-</td><td></td></tr><tr><td>Lower limit</td><td>-</td><td align="center">-</td><td>Error message if bellow the limit</td></tr><tr><td>Upper limit</td><td>-</td><td align="center">-</td><td>Error message if up to the limit</td></tr><tr><td>Behavior</td><td><a href="#description-behavior">link to the behavior</a></td><td align="center">-</td><td></td></tr></tbody></table>

### Meta title

<table><thead><tr><th width="200">Description</th><th>Value</th><th align="center">Error message</th><th data-hidden></th></tr></thead><tbody><tr><td>Mandatory</td><td>NO</td><td align="center">-</td><td>Error message if not allowed</td></tr><tr><td>Allowed/Forbidden values</td><td>-</td><td align="center">-</td><td></td></tr><tr><td>Default value</td><td>Prefilled or empty input</td><td align="center">-</td><td></td></tr><tr><td>Help text</td><td>Invalid characters:&#x3C;>={}</td><td align="center">-</td><td></td></tr><tr><td>Tool tips</td><td>-</td><td align="center">-</td><td></td></tr><tr><td>Lower limit</td><td>1</td><td align="center">-</td><td>Error message if bellow the limit</td></tr><tr><td>Upper limit</td><td>255</td><td align="center">This field cannot be longer than 255 characters - Language: English (English)</td><td>Error message if up to the limit</td></tr><tr><td>Behavior</td><td><a href="#meta-title-behavior">link to the behavior</a></td><td align="center">-</td><td></td></tr></tbody></table>

### Meta description

<table><thead><tr><th width="200">Description</th><th>Value</th><th align="center">Error message</th><th data-hidden></th></tr></thead><tbody><tr><td>Mandatory</td><td>NO</td><td align="center">-</td><td>Error message if not allowed</td></tr><tr><td>Allowed/Forbidden values</td><td>-</td><td align="center">-</td><td></td></tr><tr><td>Default value</td><td>Prefilled or empty input</td><td align="center">-</td><td></td></tr><tr><td>Help text</td><td>Invalid characters:&#x3C;>={}</td><td align="center">-</td><td></td></tr><tr><td>Tool tips</td><td>-</td><td align="center">-</td><td></td></tr><tr><td>Lower limit</td><td>1</td><td align="center">-</td><td>Error message if bellow the limit</td></tr><tr><td>Upper limit</td><td>512</td><td align="center">This field cannot be longer than 512 characters - Language: English (English)</td><td>Error message if up to the limit</td></tr><tr><td>Behavior</td><td><a href="#meda-description-behavior">link to the behavior</a></td><td align="center">-</td><td></td></tr></tbody></table>

### Meta keywords

<table><thead><tr><th width="200">Description</th><th>Value</th><th align="center">Error message</th><th data-hidden></th></tr></thead><tbody><tr><td>Mandatory</td><td>NO</td><td align="center">-</td><td>Error message if not allowed</td></tr><tr><td>Allowed/Forbidden values</td><td>-</td><td align="center">-</td><td></td></tr><tr><td>Default value</td><td>Prefilled or empty input, placeholder "Add tag"</td><td align="center">-</td><td></td></tr><tr><td>Help text</td><td>Invalid characters:&#x3C;>={}</td><td align="center">-</td><td></td></tr><tr><td>Tool tips</td><td>-</td><td align="center">-</td><td></td></tr><tr><td>Lower limit</td><td>1</td><td align="center">-</td><td>Error message if bellow the limit</td></tr><tr><td>Upper limit</td><td>255</td><td align="center">This field cannot be longer than 255 characters - Language: English (English)</td><td>Error message if up to the limit</td></tr><tr><td>Behavior</td><td><a href="#meta-keywords-behavior">link to the behavior</a></td><td align="center">-</td><td></td></tr></tbody></table>

### Friendly URL

<table><thead><tr><th width="200">Description</th><th>Value</th><th align="center">Error message</th><th data-hidden></th></tr></thead><tbody><tr><td>Mandatory</td><td>YES</td><td align="center">The field friendly_url is required at least in your default language.</td><td>Error message if not allowed</td></tr><tr><td>Allowed/Forbidden values</td><td>Various symbols like etc. @#$@#$ are not allowed.</td><td align="center">"@#$@#$%@%@#$%#@$%" is invalid. - Language: English (English)</td><td></td></tr><tr><td>Default value</td><td>Prefilled or empty input</td><td align="center">-</td><td></td></tr><tr><td>Help text</td><td>Unless the 'Accented URL' option is enabled (in Shop parameters > Traffic &#x26; SEO), only letters, numbers, underscores (_), and hyphens (-) are allowed.</td><td align="center">-</td><td></td></tr><tr><td>Tool tips</td><td>-</td><td align="center">-</td><td></td></tr><tr><td>Lower limit</td><td>1</td><td align="center">-</td><td>Error message if bellow the limit</td></tr><tr><td>Upper limit</td><td>64</td><td align="center">This field cannot be longer than 64 characters - Language: English (English)</td><td>Error message if up to the limit</td></tr><tr><td>Behavior</td><td><a href="#friendly-url-behavior">link to the behavior</a></td><td align="center">-</td><td></td></tr></tbody></table>

## Behavior descriptions

### Name behavior

[Forms Normal UI Kit](https://build.prestashop-project.org/prestashop-ui-kit/?path=/story/forms--normal) component. Ability to edit or add the Name of the CMS Category.

### Displayed behavior

[Forms Switch UI Kit](https://build.prestashop-project.org/prestashop-ui-kit/?path=/story/forms--switch-story) component. Ability to disable or enable the whole Page appearance in the webshop.

### Parent category behavior

UI block with the [Forms Radio Buttons UI Kit](https://build.prestashop-project.org/prestashop-ui-kit/?path=/story/forms--radio-buttons) components. Ability to choose the desired Parent category for the CMS Category page.

### Description behavior

[Forms Normal UI Kit](https://build.prestashop-project.org/prestashop-ui-kit/?path=/story/forms--normal) component. Ability to edit or add Description text for the CMS Category Page.

### Meta title behavior

[Forms Normal UI Kit](https://build.prestashop-project.org/prestashop-ui-kit/?path=/story/forms--normal) component. Ability to edit or add Meta title text for the CMS Category Page.

### Meda description behavior

[Forms Normal UI Kit](https://build.prestashop-project.org/prestashop-ui-kit/?path=/story/forms--normal) component. Ability to edit or add Meta description text for the CMS Category Page.

### Meta keywords behavior

[PS Tags UI Kit](https://build.prestashop-project.org/prestashop-ui-kit/?path=/story/ps-tags--ps-tags) component. Ability to edit or add Meta keywords (separated by comma) for the Page.

### Friendly URL behavior

[Forms Normal UI Kit](https://build.prestashop-project.org/prestashop-ui-kit/?path=/story/forms--normal) component. Ability to edit or add Friendly URL text for the Page.

## Multistores functionality

This page is [Multistores dependent](https://docs.prestashop-project.org/functional-documentation/functional-documentation/ux-ui/common-components/multistore-component/multistores-dependent) page.