Studio Two Editor: About Data Sources

Use data sources to show live content anywhere on your site. A data source can be a CMS collection, a Wix app (e.g. Wix Blog) or custom code. You decide what goes in each element, such as a post's title or a product's image.

Choose a field for each part of an element, such as a button's text and its link. For example, show a post's title on the button and link it to the post's page. You only see fields that fit, so image fields don't appear for a text element.

Attach a source to a page or container to make its content available to every element inside it. You don't need to do this before you connect an element. When you select a source, the editor attaches it to one of these for you:

• The page: For most elements.
• The element itself: For elements that can hold a source, such as repeaters.
• The global section: For elements in a global section, such as your header.

While you design, your connected elements show real content from the source. If there's no item to show, you see placeholder data instead (e.g. Post Title), so you can still style the element.

1. Go to your editor.
2. Select the element you want to connect.
3. Click the Open Inspector icon at the top right of the editor.
4. (If not already open) Click the Settings tab.
5. Click the Connect to data icon next to the relevant property (e.g. Text, Link, Alt text).
6. Click Select source and select the source that holds the content.
7. Click Select field and select the field you want the element to show.
8. (If needed) Fill in the parameters that appear below the field (e.g. Page Link Parameter).
9. Click Apply.

Select the source that holds the content you want to show. The Connect Source list includes these types of sources:

• CMS collection: Any collection you create in the CMS (Content Management System).
• Wix apps: Apps such as Wix Stores and Wix Blog add their own sources under the app's name. For example, Wix Blog adds Post (one post), Posts (a list of posts) and Related Posts.
• Custom code: A source you build with code. Describe what you need and create it with AI, or write the code yourself.

You can also create a new source from the same list, or set one up with AI. Add more than one source to a page or section when you need content from different places. For example, show a portfolio from a CMS collection and your latest blog posts on the same page.

Attach a source to the container that holds your content: a page, section, container, repeater, header or footer. Every element inside that container can then use the source, so you don't need to set it up for each element.

Check which sources a container can use in the Settings tab of the Inspector panel:

• Available sources: Sources attached to a container above this one, such as the section or page it's in. This list only shows up when there are sources to show.
• Connected sources: Sources attached directly to this container.

A source you attach to a page is available to all of the page's sections and containers. Your header and footer aren't part of the page, so they don't get its sources. Attach a source to them directly.

You can't use a container's sources for elements outside it. For example, to connect a Load More button to a repeater's list, attach the source to the section that holds both. Then connect the repeater and the button to the section's source.

Look for pink labels on the canvas to see what's connected to data. A container with a source shows the source's name on its label. Static elements have blue labels.

1. Go to your editor.

2. Select the relevant page, section or container.

3. Click the Open Inspector icon at the top right of the editor.

4. (If not already open) Click the Settings tab.

5. Click + Connect Source under Data sources.

6. Select the source you want to use:

   • CMS collection: Select one of your collections. If you don't have one yet, click Create New.

   • Custom code: Select one of your custom code sources. If you don't have one yet, click Create New.

   • Wix apps: Select a source from the app's list (e.g. Posts under Wix Blog).

Find the sources attached to a container in the Settings tab of the Inspector, under Connected sources. Click the More Actions icon next to a source to see its options:

• Manage [source name] (e.g. Manage Portfolio): Change the source's settings, such as its filters, sorts and how many items show at a time. These settings apply to every element connected to this source. Only sources with settings have this option.
• Edit in Collection: Go to the CMS collection that holds the content.
• Edit in Dashboard: Go to the app's dashboard, where the app keeps its content (e.g. your blog posts).
• Remove: Detach the source from this container. Connected elements stay on the page, but stop showing its content.

For sources with settings, you can also select the container and click Manage [source name] on the action bar (e.g. Manage Portfolio).

Use a repeater to show a list of items with one design, such as blog posts or portfolio projects. Connect your repeater to a source and design one item, and every item shows its own content in that design.

Learn more about adding and setting up repeaters.

Add a collection page and select Item page to show one item at a time with the same design. The page's elements are already connected to the collection. While you design, use the preview toolbar at the top of the canvas to preview the page with each item.

You can also add a page with a repeater that lists all of a collection's items. Learn more about adding and setting up item pages.

Add elements from a Wix app to start with their data already in place. You can find them in the Add Elements panel under the app's name (e.g. Wix Bookings). For example, the Wix Blog feed and post list show your site's posts as soon as you add them. A Wix Bookings Service list shows your services. The elements on a new collection page also arrive connected. So do the elements inside a repeater, once you connect it.

You can still customize the design and layout of these elements from the action bar or on the canvas.

Add standard elements, such as text and images, and connect them yourself when you want full control over which content shows where. Learn more about setting up the Studio Two product page in Wix Stores.

Set a condition to hide an element based on a true/false field in your content. Select True or False for Hide if to choose when it's hidden. For example, hide a 'Sold' label on every painting that's still for sale. You can find Conditional visibility under Advanced in the Settings tab of the Inspector.

• Fields you can use: True/false fields only, including fields that calculate a true/false value.
• Where you can't add a condition: On a page, or on a global section itself (e.g. your header or footer). You can still add conditions to the elements inside them.
• Hidden elements on the canvas: When the editor can tell an element will be hidden (e.g. on a collection page or in a repeater), it shows stripes on it. The stripes disappear when you select the element.

Use event handlers to run a function from one of your sources when visitors interact with an element. You can choose On Click, On Double Click, On Mouse In, On Mouse Out, On Focus or On Blur.

1. Go to your editor.
2. Select the element.
3. Click the Open Inspector icon at the top right of the editor.
4. (If not already open) Click the Settings tab.
5. Scroll down to Event handlers under Advanced.
6. Click the Connect to data icon next to the relevant event (e.g. On Click).
7. Click Select source and select the source.
8. Click Select field and select the function you want to run.
9. (If needed) Fill in the parameters that appear below the function.
10. Click Apply.

Click a question below to learn more about data sources in the Studio Two Editor.