Apply consistent property design patterns across commerce components

Apply consistent property design patterns

Consistent property design across all your widgets, sections, and page templates creates a predictable editing experience. We'll talk mostly about widget properties in this section, but the principles apply to all Page Builder component properties.

We recommend grouping widget properties into these five categories:

Content source properties - These properties define where the widget gets its data. Built-in Combined content selector form component allows you to restrict which reusable content users can link to. They also provide options for allowing single or multiple selections.

Override properties - Text overrides (choose between short text, text area, and rich text based on the content) and provide clear labeling. Use naming conventions across the whole project, for example, "Override [FieldName] (optional)." Include a description that explains the fallback behavior, for example: "If empty, displays the product name from the Content hub."

Display/Styling properties - Layout options (grid, list, card styles), color schemes (use presets rather than custom color pickers to maintain brand consistency), spacing controls (padding, margins, gaps), and responsive behavior toggles.

Behavior properties - Interactive elements (links, buttons, hover effects), animation and transition options, and loading behaviors such as lazy loading and autoplay settings with sensible defaults.

Visibility/Conditional properties - Show/hide toggles for optional elements (dates, authors, metadata), conditional display based on whether data is present in the referenced content item, and permission-based visibility for audience-specific content.

How these categories apply across component types

Widgets use all five categories extensively, where content source and override properties are mostly relevant to Mixed content patterns.

Sections primarily use display/styling and visibility properties, with minimal content source needs (mainly widget zone configuration, background image/color, and rarely section title) and no override properties.

Templates balance content source (page-level filtering), display (global layout modes), and visibility (conditional areas) with fewer behavior properties than widgets.