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.
typeSettings.size 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.
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.
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
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
| Layout type | Extended panel | Narrow panel |
|---|---|---|
| Full | ✔ | ✘ |
| Wide (single column) | ✔ | ✘ |
| Wide (Two columns: 1/1) | ✔ | ✘ |
| Wide (Two columns: 2:1) | ✔ | ✘ |
| Narrow | ✘ | ✔ |