Why Implement a Custom UI Control?

When you create a component type for Page Designer, you specify attributes that the merchant can set. For example, you could create a headline banner component type with an attribute named Image. When merchants use the headline banner component type on a page, they must configure the Image attribute to select the image to display. The type value that you assign to the attribute in the component’s meta definition file determines the UI control (for example, a check box or file picker) that the merchant uses to configure the attribute.

Page Designer provides some preconfigured options for type. For example, if you assign the type file to an attribute, the Page Designer Visual Editor presents the merchant with a file picker UI control for selecting which file to use. If you assign the type boolean, the merchant is presented with a checkbox to configure the attribute. The type enum presents the merchant with a list to select a value from.

If none of the preconfigured Page Designer UI controls are appropriate for your situation, you can create your own. For example, you want a custom UI control to let merchants select store locations on a map or choose a color for the text or background. Or, you want to let merchants place a Favorite icon on a product tile or select which Shop Now button to use.

A custom UI control doesn’t conflict with the platform code for Page Designer, and you can create more than one custom UI controls for a single component type.