Binding Dynamic Content

Learn how to connect design elements to CMS fields and collection items to create dynamic, data-driven pages.

What is Content Binding?

Content binding connects design elements to CMS data. Instead of static text, bound elements display dynamic content from your collections. Change the data once, and it updates everywhere it's used.

The CMS Binding Panel

Access the CMS Binding Panel from the left sidebar to bind selected elements:

Select an element on the canvas
Open the CMS Binding Panel
Choose a collection and field
The element updates with live data

Bindable Element Types

Text - Bind to text, rich text, or computed fields
Image - Bind to image fields
Link - Bind href to URL or reference fields
Visibility - Show/hide based on boolean fields
Color - Bind background or text color

Binding Text Elements

Select a text element
In the Binding Panel, choose your collection
Select the text field (Title, Description, etc.)
Text updates to show field data

Binding Images

Select an image element
Open the CMS Binding Panel
Select an image field from your collection
Image displays the field's value
Alt text can be bound to a separate text field

Conditional Visibility

Show or hide elements based on data:

Bind visibility to a boolean field
Element shows only when field is true
Useful for "featured" badges, sale tags, etc.

Binding in Collection Lists

When designing a collection list item:

Bindings refer to "Current Item" automatically
Each list item displays its own data
Links automatically point to the item's detail page

Binding in Templates

On collection template pages:

Select "Current [Collection] Item" as the source
All fields from the current item are available
Page displays data for the item being viewed

Best Practices

Design with placeholder content first
Use realistic sample data in collections
Test with items of varying content lengths
Handle empty/null field values gracefully
Consider how content looks in all breakpoints