💡 To set up connections in a standard list, see Connect properties to boxes in a 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 to check.
Here's how to display properties managed outside the Design Editor — such as those in Studio CMS — in boxes inside a dynamic list or carousel. We'll use Studio CMS CMS properties as an example.
Point: The list and carousel features in Studio.Design
A list lets you manage boxes that share the same layout all in one place. A carousel builds on the list feature, showing multiple pieces of content one after another as slides.
Along with managing text, images, and other data in one place, you can connect a list to Studio CMS and other sources so it becomes a dynamic element that updates automatically as the content changes.
For details and steps for each feature, see the help articles below.
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, first switch the item to edit mode. This step is the same for every property type.
For how to enter and exit edit mode, see the help articles below.
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 to use on any item.
Open the [Image] tab in the right panel.
Click the [URL] field in the [Image] tab, then choose the property you want under [Select from CMS properties].
Once it's set up correctly, the images registered for the other items appear too — 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 to use on any item.
Open the [Text] tab in the right panel.
Click the [Text] field in the [Text] tab, then choose the property you want under [Select from CMS properties].
Once it's set up correctly, the text registered for the other items appears too — not just the one you selected.
2-3. Connect a slug property
Select the box you want to use on any item.
Open the [Settings] tab in the right panel.
Click the [Link] field in the [Settings] tab, then click the [+] that appears on the right side of the field.
Choose the property you want under [Select from CMS properties].
Once it's set up correctly, the slug (article link) registered for each of the other items appears too — not just the one you selected.
2-4. Connect an external link added as a text property
Select the box you want to use on any item.
Open the [Settings] tab in the right panel.
Click the [Link] field in the [Settings] tab, then click the [+] that appears on the right side of the field.
Choose the property you want under [Select from CMS properties].
Once it's set up correctly, the external links registered for the other items appear too — not just the one you selected.
2-5. Connect a color property
Select the box you want to use on any item.
Open the [Settings] tab in the right panel.
Click the color swatch in the color settings field to open the color palette.
The settings field varies depending on which element you're connecting the color property to.
Select the [CMS] tab in the color palette.
Pick the property you want from the list to connect it.
2-6. Connect a select or multi-select property
Select and multi-select properties are connected to a text box.
Tips: If the property you're connecting is a multi-select type, [Connect as list] is turned on automatically, and the connected box is turned into a list.
Select the text box you want to use on any item.
Open the [Text] tab in the right panel.
Click the [Text] field in the [Text] tab, then choose the property you want under [Select from CMS properties].
Once it's set up correctly, the text registered for the other items appears too — not just the one you selected.
2-7. Connect a video property
Video properties can only be connected to a video box.
Select the image box you want to use on any item.
Open the [Video] tab in the right panel.
Click the [URL] field in the [Video] tab, then choose the property you want under [Select from CMS properties].
Once it's set up correctly, the images registered for the other items appear too — not just the one you selected.
2-8. Connect a PDF property
PDF properties are connected as download links.
Select the box you want to use on any item.
Open the [Settings] tab in the right panel.
Click the [Link] field in the [Settings] tab, then click the [+] that appears on the right side of the field.
Choose the property you want under [Select from CMS properties].
Once it's set up correctly, the PDF download links registered for the other items appear too — not just the one you selected.
2-9. Connect a property using a connector
You can also connect properties using a connector. Connectors work with every property type.
Note: The following CMS properties can only be connected to a box using a connector.
Number property
Boolean property
Select the box you want to use on any item.
Open the [Data] tab in the right panel.
Drag out a connector from the blue dot next to the property name and drop it on the box you want to connect it to.
Once it's set up correctly, the properties registered for the other items appear too — not just the one you selected.
Note: Boxes that rich text properties can connect to
Rich text properties can only be connected to a rich text box. They can't be connected to a text box.
Connecting a reference property
When you connect a reference property, how it appears and how you select it under [Select from CMS properties] depends on whether the property is single-select or multi-select.
■ Connecting a single-select reference property
It appears in a separate section from the other properties. Click the arrow next to the property name and choose the property you want to connect.
■ Connecting a multi-select reference property
Note: Multi-select reference properties can't be connected using a connector.
They appear in the same list as the other properties.
When you connect the property, [Connect as list] is turned on automatically, and the connected box is turned into a list.
Tips: Select an item from the Layers panel and connect it
You can also select the element you want from the Layers panel. This makes boxes inside an item editable, just like edit mode does.
Open the Layers panel.
Select the layer for the list or carousel you want.
Click the [>] at the start of a layer name marked with the grid icon
to expand the layers below it.
Select a list item (a layer numbered [0], [1], [2], and so on).
Open the [Data] tab and check that the property list and the blue dots (the starting points for connectors) are showing.
To connect from a settings field, select the target box further down the hierarchy and open the relevant settings field in the right panel.