Tip: What is a component?
Components let you register design elements that you use repeatedly throughout a project as shared parts, so you can reuse and manage them all at once. To learn the basics, see Components.
Normally, the data and design of identical components are shared, and you can't customize them individually at each placement. However, by using component properties, you can switch the data and design for each individual component instance.
Types of component properties
Components support the following six types of properties.
Property type | Description |
Text property | Links to a text box or rich text box. |
Image property | Set an uploaded image or free image and link it to an image box. |
URL property | Set a link to a page within the project or to an external site. |
Number property | Register and use numeric values. |
Boolean property | Represents on/off (true/false). Useful for tagging recommended products or changing the color of specific data. |
Color property | Register and use a color (color code). |
Add a property
Double-click the component, or select it and press Enter to enter edit mode.
In the right panel, open the [Data] tab.
If the panel is closed, open the right panel.
Click the edit icon
in the top right of the tab.Click the [+] button next to [Properties] to add a property.
Set the property type and name.
When you add a text or image box inside the component, an option to automatically add it as a property will appear.
Edit a property value
Double-click the component, or select it and press Enter to enter edit mode.
In the right panel, open the [Data] tab.
If the panel is closed, open the right panel.
Edit the value for each property.
Link a property to a box inside the component
Linking with the connector
Select the blue circle to the left of the property you want to link.
Drag the connector to the target box to link them.
Linking from each element's settings tab
In the right panel, select the appropriate property from each element's settings tab.
Delete a property
Double-click the component, or select it and press Enter to enter edit mode.
In the right panel, open the [Data] tab.
If the panel is closed, open the right panel.
Click the name of the property you want to delete.
Select [Delete] to remove the property.
Rename a property
Double-click the component, or select it and press Enter to enter edit mode.
In the right panel, open the [Data] tab.
If the panel is closed, open the right panel.
Click the name of the property you want to rename to edit it in the text field.
Change the displayed data (images, text, etc.)
Use the following properties to change the data (images, text, etc.) of the same component at each placement.
Text property
Image property
URL property
You can set and edit property values individually for each placement of the component.
Change the component's design
Use the following properties to change the design of the same component at each placement.
Color property
Boolean property
Control element visibility (Boolean property)
Note: The "is True" and "is False" display conditions available with CMS Boolean values can't be selected for components. You can only adjust visibility using the toggle.
With Boolean properties, you can show or hide specific elements. This is helpful when you want to display special content only at certain placements.
Set the property value.
Set the Boolean value individually for each placement of the component.
Use the Boolean property as a display condition.
Select the element inside the component whose visibility you want to control.
In the right panel, open the [Settings] tab and select the Boolean value under [Display condition].
If the panel is closed, open the right panel.
