# Design guidelines for Custom Views Learn about best practices for designing user-friendly Custom Views. This page applies only to Custom Views. On this page, we'll give you practical advice to help you design and build Custom Views. To do that, we'll describe some best practices for working with common UI components. ## Panel sizes A Custom View is rendered inside a panel that opens from the right side of the page, on top of the Merchant Center page you're working within. Your custom functionality must fit within the panel, therefore, it's important to choose the correct panel type for your specific use case. We provide two Custom View panel types: [extended](https://docs.commercetools.com/merchant-center-customizations/concepts/design-guidelines/custom-views.md#extended-panel) and [narrow](https://docs.commercetools.com/merchant-center-customizations/concepts/design-guidelines/custom-views.md#narrow-panel), depending on the types of content you want to display. You can select the panel type when you [add a Custom View](https://docs.commercetools.com/merchant-center/managing-custom-views.md#add-a-custom-view) in the Merchant Center. During development, you can set the panel type with the [`typeSettings.size`](https://docs.commercetools.com/merchant-center-customizations/tooling-and-configuration/custom-view-config.md#typesettingssize) key in the `custom-view-config.mjs` file. ### Extended panel The extended panel is ideal for large and comprehensive content, making it easy to accommodate large tables, charts, forms, or extensive textual content and/or interactions. Image url: https://docs.commercetools.com/merchant-center-customizations/images/custom-view-extended-panel.png Alt text: Custom Views extended panel expanded We recommend using an extended panel to: - Display large amounts of content and/or actions that require more substantial user interaction. - Present extensive flows that require detailed navigation. ### Narrow panel The narrow panel is ideal for displaying small amounts of information, and/or completing simple actions that don't require a navigation flow. Image url: https://docs.commercetools.com/merchant-center-customizations/images/custom-view-narrow-panel.png Alt text: Custom Views narrow panel expanded We recommend using a narrow panel to: - Provide additional context for a specific item on the page. For example, displaying the tracking information for an order. - Ask the user for basic input and/or complete simple actions (for example, using a short form with only a few fields). ## Dialog components [Dialog components](https://docs.commercetools.com/merchant-center-customizations/tooling-and-configuration/commercetools-frontend-application-components.md#components-for-dialogs) are presented as modals to users to display additional information ([InfoDialog](https://docs.commercetools.com/merchant-center-customizations/tooling-and-configuration/commercetools-frontend-application-components.md#infodialog)), confirm an action ([ConfirmationDialog](https://docs.commercetools.com/merchant-center-customizations/tooling-and-configuration/commercetools-frontend-application-components.md#confirmationdialog)), or collect additional information ([FormDialog](https://docs.commercetools.com/merchant-center-customizations/tooling-and-configuration/commercetools-frontend-application-components.md#formdialog)). Dialogs are best suited for use in the larger, [extended panels](https://docs.commercetools.com/merchant-center-customizations/concepts/design-guidelines/custom-views.md#extended-panel). While you can use dialogs in the smaller, [narrow panels](https://docs.commercetools.com/merchant-center-customizations/concepts/design-guidelines/custom-views.md#narrow-panel), this should only be done in exceptional cases. We recommend using a dialog to present confirmation messages when additional user actions are required. You should also use the `size=scale` prop value to ensure that the dialog is rendered responsively according to the available space. To ensure a good user experience, be sure to minimize the amount of form fields and possible actions within the dialog. ## Page content layouts [Layouts](https://docs.commercetools.com/merchant-center-customizations/development/page-content-layouts.md#layout-types) are the foundation for your page content structure. We recommend the following layout types for different panel types. (a CSV formatted table follows. The first line are the column names.) Layout type,Extended panel,Narrow panel [Full](https://docs.commercetools.com/merchant-center-customizations/development/page-content-layouts.md#full),✔,✘ [Wide (single column)](https://docs.commercetools.com/merchant-center-customizations/development/page-content-layouts.md#wide-single-column),✔,✘ [Wide (Two columns: 1/1)](https://docs.commercetools.com/merchant-center-customizations/development/page-content-layouts.md#wide-two-columns-11),✔,✘ [Wide (Two columns: 2:1)](https://docs.commercetools.com/merchant-center-customizations/development/page-content-layouts.md#wide-two-columns-21),✔,✘ [Narrow](https://docs.commercetools.com/merchant-center-customizations/development/page-content-layouts.md#narrow),✘,✔ ## Modal pages [Modal pages](https://docs.commercetools.com/merchant-center-customizations/tooling-and-configuration/commercetools-frontend-application-components.md#components-for-modal-pages) are used to display information in a separate context from the Custom View initial page. We recommend only using modal pages in the [extended panel](https://docs.commercetools.com/merchant-center-customizations/concepts/design-guidelines/custom-views.md#extended-panel). The larger size of the panel provides a smoother transition to the modal pages. ## Related pages - [Section overview page](https://docs.commercetools.com/merchant-center-customizations.md)