> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dc.ag/llms.txt
> Use this file to discover all available pages before exploring further.

# Top Product Preview

> Automatically display top products as a preview on a page.

The content type **Top Product Preview** automatically displays the top products of the web shop as a preview on a page. The selection is determined by the system based on the top product flag in the shop.

<Info>
  This function is only available if you are also using **dynamic commerce**.
</Info>

## Selecting the content type

In the editor of a page, shopping world, or building block, click **+ New**, then in the **Shop** tab click **Top Product Preview**. The **"New Top Product Preview"** dialog opens.

## Fields

### General

| Field                  | Meaning                                                           |
| ---------------------- | ----------------------------------------------------------------- |
| **Description**        | Internal name (default: Top Product Preview, max. 255 characters) |
| **Number of products** | Maximum number of top products displayed                          |

### Publication

| Field           | Meaning                                                                 |
| --------------- | ----------------------------------------------------------------------- |
| **Layout area** | Area of the page layout in which the preview appears (default: Content) |
| **Active**      | Makes the preview visible                                               |

## Related topics

<CardGroup cols={2}>
  <Card title="Product Preview" icon="tag" href="/docs/en/dynamic-content/user-guide/inhaltsarten/artikelvorschau">
    Display specific products by numbers or categories.
  </Card>

  <Card title="Category Preview" icon="folder" href="/docs/en/dynamic-content/user-guide/inhaltsarten/kategorievorschau">
    Display web shop categories.
  </Card>

  <Card title="Web Shop" icon="cart-shopping" href="/docs/en/dynamic-content/user-guide/inhaltsarten/webshop">
    Integrate ready-made web shop components.
  </Card>

  <Card title="Content Types" icon="shapes" href="/docs/en/dynamic-content/user-guide/inhaltsarten">
    All available content types.
  </Card>
</CardGroup>