Here's how to apply list properties managed in the Design Editor to boxes inside a list or carousel. We'll walk through how to connect each type of property — image, text, URL, boolean, and color — as well as how to connect properties using a connector.
💡 If you're setting up connections in a dynamic list that pulls in data from outside the Design Editor, such as Studio CMS, see Connect properties to boxes in a dynamic list or carousel.
💡 If you're not sure what data source a list or carousel uses, see How to tell list and carousel types apart and check the data source first.
Point: Lists and carousels in Studio.Design
A list lets you manage several boxes that share the same layout all at once. A carousel builds on the list feature, displaying multiple pieces of content one after another as slides.
In addition to managing data like text and images in one place, you can connect a list to Studio CMS and other sources so it becomes a dynamic element that updates automatically as your content changes.
For more details and step-by-step instructions, see the help articles for each feature.
Step 1. Switch an item in the list or carousel to edit mode
To connect a property to a box inside a list or carousel, you first need to switch the item to edit mode. This applies to every property type.
For how to enter and exit edit mode, see these help articles:
Step 2. Connect a property to a box
2-1. Connect an image property
Image properties can only be connected to an image box.
Select the image box you want on the item.
Open the [Image] tab in the right panel.
Click the [URL] field in the [Image] tab, then choose the image property you want from the menu that appears.
In the image below, the image property [image] is selected.
Once set up correctly, the images registered for the other items will appear as well, not just the one you selected.
2-2. Connect a text property
Text properties can only be connected to a text box.
Select the text box you want on the item.
Open the [Text] tab in the right panel.
Click the [Text] field in the [Text] tab, then choose the text property you want from the menu that appears.
In the image below, the text property [text] is selected.
Once set up correctly, the text registered for the other items will appear as well, not just the one you selected.
2-3. Connect a URL property
Select the box you want on the item.
Open the [Settings] tab in the right panel.
Click the [Link] field in the [Settings] tab once, then click the [+] that appears on the right side of the field.
Choose the URL property you want from the menu that appears.
In the image below, the URL property [url] is selected.
Once set up correctly, the links registered for the other items will apply as well, not just the one you selected.
2-4. Connect a property using a connector
You can also connect properties using a connector. Connectors work with every property type.
Tips: Color properties and boolean properties can only be connected to boxes using a connector.
While in edit mode, open the [Data] tab in the right panel.
Drag out a connector from the blue dot to the left of the property name and drop it onto the box you want to connect.
Once set up correctly, the properties registered for the other items will apply as well, not just the one you selected.
Tips: Select an item from the Layers panel and connect properties
You can also select the element you want from the Layers panel. Just like edit mode, this makes the boxes inside the item editable.
Open the Layers panel.
Select the layer for the list or carousel you want. If the layer is collapsed, click the [>] to the left of the layer name to show the layers nested inside.
Select an item layer (a layer with a number such as [0], [1], [2], or [3] at the beginning of its name).
When you select an item layer, the properties and blue dots (the starting points for connectors) appear in the [Data] tab of the right panel.
This is the state you'll work in when connecting properties with a connector.
To connect an image, text, or URL property from a settings field, select the box you want and make the connection from the corresponding field in the right panel.
