# Use Dynamic pages

The Dynamic pages area lets you manage the page versions and the dynamic page rules for the dynamic pages of your website.

From the **Dynamic pages** area, you can:

- Create and manage the [page versions](/frontend-studio/using-dynamic-pages.md#page-versions) associated with your [dynamic pages](/frontend-studio/dynamic-pages.md).
- Create and manage the [dynamic page rules](/frontend-studio/using-dynamic-pages.md#dynamic-page-rules) for your dynamic pages.

## Page versions

### Create a page version for a dynamic page

To create a page version for a dynamic page, follow these steps:

1. From the Studio home page or from the left menu, go to **Dynamic pages**.

2. From the dynamic page list, select the dynamic page for which you want to create a page version: the **Dynamic page rules** and **Page versions** panes open.

   ![The Login dynamic page selected from the dynamic page list, and the Dynamic page rules and Page versions panes displayed](https://docs.commercetools.com/frontend-studio/images/dynamic-pages-area-panes-displayed.png)

3. Optional: From the **Dynamic page rules** pane, add a data source filter for the [page preview](/frontend-studio/using-dynamic-pages.md#preview-a-page-version-for-a-dynamic-page).

4. Optional: From the **Dynamic page rules** pane, [create](/frontend-studio/using-dynamic-pages.md#create-a-dynamic-page-rule), [edit](/frontend-studio/using-dynamic-pages.md#edit-a-dynamic-page-rule), or [duplicate](/frontend-studio/using-dynamic-pages.md#duplicate-a-dynamic-page-rule) a [dynamic page rule](/frontend-studio/dynamic-pages.md#dynamic-page-rules).

5. From the **Dynamic page rules** pane, in the **Page rules** section, select the page rule with which you want to associate the page version.

6. In the **Page versions** pane, click **+ New page version**: the **Create page version** dialog opens.

7. In the **Create page version** dialog, do the following:

   1. In the **Page version name** field, enter the name of the page version. Make sure to choose a relevant name so that it will be easy to find the page version in the future.

   2. From the **Layout** drop-down, select a layout or a [page template](/frontend-studio/page-templates.md).

   3. To display the page version for specific locales only, select the locale(s) from the **Locale** drop-down: the page version will be visible for all selected locales. Otherwise, leave the **Locale** field empty.

      The **Locale** drop-down is displayed only for projects with more than one locale.

   4. To handle advanced filtering based on locale, enter a [FECL](/frontend-studio/using-fecl.md) expression in the **Custom** field. For example, to display the page version for all locales except `de_CH`, enter `locale != "de_CH"`.

   5. To make the page version the default, select the checkbox.

   6. Click **Save**: the [page builder](/frontend-studio/using-the-page-builder.md) opens.

8. Edit the page version as desired. You can [preview it](/frontend-studio/using-dynamic-pages.md#preview-a-page-version-for-a-dynamic-page) if you added a data source filter for preview in the earlier steps.

9. Click **Save** or select the saving option from the drop-down. Then, click the back arrow to return to **Dynamic pages**.

To display the page version on your website, you must make it live from the [**More** menu](/frontend-studio/using-dynamic-pages.md#edit-and-manage-a-page-version-for-a-dynamic-page).

### Edit and manage a page version for a dynamic page

After creating a page version for a dynamic page, you may need to edit or manage it. For example, to change a layout element, to make the page version live, or to delete it. To do so, follow these steps:

1. From the Studio home page or from the left menu, go to **Dynamic pages**.

2. From the dynamic page list, select the dynamic page for which you want to edit/manage the page version: the **Dynamic page rules** pane opens.

3. In the **Page rules** section, select the page rule with which the page version is associated.

4. In the **Page versions** pane, expand the section where the page version is located.

5. Hold the pointer over the page version and do one of the following:

   - Click the **Edit** icon to open the [page builder](/frontend-studio/using-the-page-builder.md) and edit the page version's layout.
   - Click the **More** icon to perform [other management actions](/frontend-studio/page-versions.md#more-options).

   ![A page version selected in the Draft section of the Page versions pane and the Edit and More icons displayed](https://docs.commercetools.com/frontend-studio/images/dynamic-page-page-version-edit-more-icons.png)

### Preview a page version for a dynamic page

When creating or editing a page version for a dynamic page, you may find it useful to preview the page version. To display the preview, you must [add a data source filter](/frontend-studio/using-dynamic-pages.md#add-a-data-source-filter-for-page-preview) for preview to the dynamic page.

A data source filter lets you configure the filtering parameters to retrieve data from a data source. You can add and [edit](/frontend-studio/using-dynamic-pages.md#edit-a-data-source-filter-for-page-preview) a data source filter only for the data source that is set in the dynamic page's schema. The available filtering parameters depend on the data source configuration.

Let's say that in the schema of your Product search dynamic page, your development team sets the Products data source, which retrieves data from your product catalog. And let's assume that the data source configuration contains the Minimum price and Maximum price fields. In this case, you can add and edit the data source filter for the Products data source. For example, you can configure the filter to retrieve products that cost a minimum of 10 Euros and a maximum of 100 Euros.

#### Add a data source filter for page preview

To add a data source filter, follow these steps:

1. From the Studio home page or from the left menu, go to **Dynamic pages**.

2. From the dynamic page list, select the dynamic page to which you want to add a data source filter: the **Dynamic page rules** pane opens.

3. In the **Data source for preview** section, click **Add data source**: the [data source filter editor](/frontend-studio/using-the-data-source-filter-editor.md) opens.

4. Optional: Edit the filter's parameters.

5. Click **Save**: the data source filter appears in the **Data source for preview** section.

#### Edit a data source filter for page preview

To edit a data source filter, follow these steps:

1. From the Studio home page or from the left menu, go to **Dynamic pages**.

2. From the dynamic page list, select the dynamic page for which you want to edit the data source filter: the **Dynamic page rules** pane opens.

3. In the **Data source for preview** section, click **Edit data source**: the [data source filter editor](/frontend-studio/using-the-data-source-filter-editor.md) opens.

4. Edit the filter's parameters.

5. Click **Save**.

If you edit the data source filter while the preview is open, the preview will not update with the new data.

## Dynamic page rules

### Create a dynamic page rule

You can create a [dynamic page rule](/frontend-studio/dynamic-pages.md#dynamic-page-rules) only if the **+ New rule** button is available in the **Dynamic page rules** pane. The button displays if in the [dynamic page schema](/frontend-development/developing-a-dynamic-page-extension.md#create-a-dynamic-page-schema) the `isMultiple` field is set to `true`. Consult with your development team if you need to change the configuration in the schema.

To create a dynamic page rule, follow these steps:

1. From the Studio home page or from the left menu, go to **Dynamic pages**.

2. From the dynamic page list, select the dynamic page for which you want to create a page rule: the **Dynamic page rules** pane opens.

3. Click **+ New rule**: the **Create dynamic page rule** dialog opens.

4. In the **Create dynamic page rule** dialog, do the following:

   1. In **General settings > Name**, enter the name of the rule.

   2. In **Page rule criteria > Select criterion**, do one of the following:

      - Select **Custom** and enter the [FECL](/frontend-studio/using-fecl.md) expression in the **Entity Criterion** field.
      - If available, select another field to set [dynamic page rule criteria](/frontend-studio/using-dynamic-pages.md#build-a-dynamic-page-rule-criterion) with the page rule criteria builder.

   3. In the **Data source** section, click **+ Add data source filter** and select the data source to get data from: the [data source filter editor](/frontend-studio/using-the-data-source-filter-editor.md) opens. Configure your data source filter and click **Save** to return to the **Create dynamic page rule** dialog.

   4. Set the configurations for the other sections.

5. Click **Save**.

A page rule without any criterion in the **Entity rules** section is not applied. In such case, the default rule would be applied.

If, for the same dynamic page, you set different page rules with the related page versions and an item matches the criteria of multiple rules, it is not possible to determine which page version displays on your website.

### Edit a dynamic page rule

To edit the settings of a [dynamic page rule](/frontend-studio/dynamic-pages.md#dynamic-page-rules), follow these steps:

1. From the Studio home page or from the left menu, go to **Dynamic pages**.

2. From the dynamic page list, select the dynamic page for which you want to edit the dynamic page rule: the **Dynamic page rules** pane opens.

3. In the **Page rules** section, select the dynamic page rule to edit.

4. Click the **Settings** icon: the **Dynamic page rule settings** dialog opens.

   ![A dynamic page rule selected in the Dynamic page rules pane and the related Settings, Duplicate, and Delete icons displayed](https://docs.commercetools.com/frontend-studio/images/dynamic-page-rule-management-icons.png)

5. In the **Dynamic page rule settings** dialog, edit the settings as desired. For example:

   - In **General settings > Name**, edit the name of the rule.

   - In **Entity rules > Entity criterion**, do one of the following:

     - Select **Custom** and enter the [FECL](/frontend-studio/using-fecl.md) expression in the **Entity Criterion** field.
     - If available, select another field to set [dynamic page rule criteria](/frontend-studio/using-dynamic-pages.md#build-a-dynamic-page-rule-criterion) with the page rule criteria builder.

   - In the **Data source** section, edit or delete an existing data source filter or add one from the [data source filter editor](/frontend-studio/using-the-data-source-filter-editor.md).

6. Click **Save** in the **Dynamic page rule settings** dialog.

When you edit a dynamic page rule, the new settings are applied to all the related page versions.

### Duplicate a dynamic page rule

If you want to create a [dynamic page rule](/frontend-studio/dynamic-pages.md#dynamic-page-rules) from an existing one, you can duplicate the latter. To do so, follow these steps:

1. From the Studio home page or from the left menu, go to **Dynamic pages**.

2. From the dynamic page list, select the dynamic page for which you want to duplicate the dynamic page rule: the **Dynamic page rules** pane opens.

3. In the **Page rules** section, select the dynamic page rule to duplicate.

4. Click the **Duplicate** icon: the **Save new dynamic page rule as draft** dialog opens.

5. In the **Save new dynamic page rule as draft** dialog opens, edit the duplicated settings as desired. For example:

   - In **General settings > Name**, edit the name of the rule.

   - In **Entity rules > Entity criterion**, click **Select criterion** and do one of the following:

     - Select **Custom** and enter the [FECL](/frontend-studio/using-fecl.md) expression in the **Entity Criterion** field.
     - If available, select another field to set [dynamic page rule criteria](/frontend-studio/using-dynamic-pages.md#build-a-dynamic-page-rule-criterion) with the page rule criteria builder.

   - In the **Data source** section, edit or delete an existing data source filter or add one from the [data source filter editor](/frontend-studio/using-the-data-source-filter-editor.md).

6. Click **Save** in the **Save new dynamic page rule as draft** dialog.

You cannot duplicate the default dynamic page rule.

When you duplicate a dynamic page rule, the related page versions are duplicated too. 
The page versions in the **Archived** section are saved in the **Archived**, while the page versions in the other sections are saved in the **Draft** section for the new rule.

### Delete a dynamic page rule

To delete a [dynamic page rule](/frontend-studio/dynamic-pages.md#dynamic-page-rules), follow these steps:

1. From the Studio home page or from the left menu, go to **Dynamic pages**.

2. From the dynamic page list, select the dynamic page for which you want to delete the dynamic page rule: the **Dynamic page rules** pane opens.

3. In the **Page rules** section, select the dynamic page rule to delete.

4. Click the **Delete** icon: the **Delete dynamic page rule?** dialog opens.

5. In the text box, enter `DELETE`.

6. Click **Delete**.

Once you delete a dynamic page rule, you will no longer be able to access either the rule or the page versions that were associated with it.

You cannot delete the default dynamic page rule.

### Page rule criteria builder

The page rule criteria builder lets you use UI elements to set dynamic page rule criteria based on [FECL](/frontend-studio/using-fecl.md) instead of writing a FECL expression from scratch.

A criterion consists at least of a field, a [conditional operator](/frontend-studio/using-dynamic-pages.md#conditional-operators), and a value. You can then use [logical operators](/frontend-studio/using-dynamic-pages.md#logical-operators) to combine more criteria or to exclude a criterion. 
The selectable fields and the type of fields to enter the values are defined by developers in your team via the [pageMatchingPayloadSchema](/frontend-development/developing-a-dynamic-page-extension.md#create-a-dynamic-page-schema) field in the dynamic page schema.

For example, let's say we want to set criteria to match blogs with an ID of 11122 or the blog type of trends. In such case, we could select the **blog.id** field, select the conditional operator **is**, set `11122` as the value, select the logical operator **or**, select the **blog.type** field, and set `trends` as the value.

![Page rule criteria builder with blog.id and blog.type fields.](https://docs.commercetools.com/frontend-studio/../images/dynamic-page-rule-criteria-example.png)

#### Conditional operators

In the page rule criteria builder you can select the following conditional operators:

- **is**: checks if the field value and the entered value are equal.
- **is not**: checks if the field value and the entered value are unequal.
- **is more than**: checks if the field value is greater than the entered value.
- **is less than**: checks if the field value is lesser than the entered value.
- **is equal or less than**: checks if the field value is less than or equal to the entered value.
- **is equal or more than**: checks if the field value is greater than or equal to the entered value.
- **contains**: checks if the entered value is present in the selected field, if the field is a list.

#### Logical operators

In the page rule builder, you can select the following logical operators to combine more criteria.

- **and**: the rule applies if all criteria are all met.
- **or**: the rule applies if at least one criterion is met.
- **not**: the rule applies if the criterion is not met.

#### Build a dynamic page rule criterion

To build dynamic page rule criteria, follow these steps:

1. From the **Select criterion** drop-down, select the field to which you want to relate a value.
2. Select the [conditional operator](/frontend-studio/using-dynamic-pages.md#conditional-operators) to relate the field and the value.
3. Set the value to relate to the field.
4. Click **Add new criterion** to add a criterion combined with a [logical operator](/frontend-studio/using-dynamic-pages.md#logical-operators). Then, define the criterion.

   You must connect all criteria with the same logical operator. For example, if you connect the first and second criteria with the **and** operator, you cannot connect the second and the third criteria with the **or** operator.

You can delete a criterion by clicking the trash can icon next to it.

## Related pages

- [Area overview page with navigation](/frontend-studio.md)
- [Previous page: Overview](/frontend-studio/dynamic-pages.md)
- [Next page: Use FECL](/frontend-studio/using-fecl.md)
- [Search documentation and API specs](/search.md)