CMS: Displaying Collection Content in a Repeater

Connect repeaters to the CMS (Content Management System) to display dynamic content from your collections.

After connecting a repeater to a dataset that binds to your collection, choose which fields connect to each repeater element. Once connected, each item in your repeater displays content from a different collection item. This allows you to use a consistent layout that automatically populates content for all the items you want to show on your page.

Before you begin:

Make sure to add the CMS to your site if you haven't already.

Step 1 | Create a CMS collection

Create a multiple item collection for storing the content you want to use in your repeater. Add collection fields that will connect to the elements in your repeater. Then add the items that will appear in your repeater and fill in the fields for each item. If needed, you can adjust the collection permissions from their default 'Show content' setting that allows anyone to view the content.

Wix Editor

1. Go to your editor.

2. Click CMS

   

   on the left side of the editor.

3. Click Create Collection.

4. Click Start from scratch.

   Tip: Alternatively, click Create with AI to let AI (Artificial Intelligence) create a collection for you.

5. Click Next.

6. Enter a name for your collection.

7. (Coding only) Enter a collection ID to use in your code.

8. Leave Multiple item collection (Default) selected and click Create.

9. Add fields to your collection manually or by importing a CSV file:

   • Add fields manually: Click + Add Field to begin adding fields to your collection manually.

   • Import a CSV file: Click Import CSV file to upload a CSV file to your collection.

10. Add items to your collection:

    1. Click + Add Item.

    2. Add content about the item to each relevant field.

    3. Repeat this step to create as many items as you need.

1. Set the collection permissions:

   1. Click More Actions and select Permissions & privacy.

   2. Choose which permissions you want the collection to have:

      • Show content: Allow everyone or only site members to view the collection content on your live site. Admins and collaborators with CMS access always have full access to view, add, update, or delete collection items.

      • Collect content: Allow everyone or only site members to add new items to the collection from your live site with input elements or API. Also, specify who can view the content. Admins and collaborators with CMS access always have full access to view, add, update, or delete collection items.

      • Advanced: Set custom permissions for each user role to control who can view, add, update, or delete collection content. Admins and collaborators with CMS access have full access. However, you can set permissions for specific collaborator roles to restrict their access to the collection.

   3. Click Save.

Studio Editor

1. Go to your editor.

2. Click CMS

   

   on the left side of the editor.

3. Click Create Collection.

4. Click Start from scratch.

   Tip: Alternatively, click Create with AI to let AI (Artificial Intelligence) create a collection for you.

5. Click Next.

6. Enter a name for your collection.

7. (Coding only) Enter a collection ID to use in your code.

8. Leave Multiple item collection (Default) selected and click Create.

9. Add fields to your collection manually or by importing a CSV file:

   • Add fields manually: Click + Add Field to begin adding fields to your collection manually.

   • Import a CSV file: Click Import CSV file to upload a CSV file to your collection.

10. Add items to your collection:

    1. Click + Add Item.

    2. Add content about the item to each relevant field.

    3. Repeat this step to create as many items as you need.

1. Set the collection permissions:

   1. Click More Actions and select Permissions & privacy.

   2. Choose which permissions you want the collection to have:

      • Show content: Allow everyone or only site members to view the collection content on your live site. Admins and collaborators with CMS access always have full access to view, add, update, or delete collection items.

      • Collect content: Allow everyone or only site members to add new items to the collection from your live site with input elements or API. Also, specify who can view the content. Admins and collaborators with CMS access always have full access to view, add, update, or delete collection items.

      • Advanced: Set custom permissions for each user role to control who can view, add, update, or delete collection content. Admins and collaborators with CMS access have full access. However, you can set permissions for specific collaborator roles to restrict their access to the collection.

   3. Click Save.

Dashboard

1. Go to CMS in your site's dashboard.

2. Click Create Collection.

3. Click Start from scratch.

   Tip: Alternatively, click Create with AI to let AI (Artificial Intelligence) create a collection for you.

4. Click Next.

5. Enter a name for your collection.

6. (Coding only) Enter a collection ID to use in your code.

7. Leave Multiple item collection (Default) selected and click Create.

8. Add fields to your collection manually or by importing a CSV file:

   • Add fields manually: Click + Add Field to begin adding fields to your collection manually.

   • Import a CSV file: Click Import CSV file to upload a CSV file to your collection.

9. Add items to your collection:

   1. Click + Add Item.

   2. Add content about the item to each relevant field.

   3. Repeat this step to create as many items as you need.

1. Set the collection permissions:

   1. Click More Actions and select Permissions & privacy.

   2. Choose which permissions you want the collection to have:

      • Show content: Allow everyone or only site members to view the collection content on your live site. Admins and collaborators with CMS access always have full access to view, add, update, or delete collection items.

      • Collect content: Allow everyone or only site members to add new items to the collection from your live site with input elements or API. Also, specify who can view the content. Admins and collaborators with CMS access always have full access to view, add, update, or delete collection items.

      • Advanced: Set custom permissions for each user role to control who can view, add, update, or delete collection content. Admins and collaborators with CMS access have full access. However, you can set permissions for specific collaborator roles to restrict their access to the collection.

   3. Click Save.

Step 2 | Add and customize your repeater

Add a repeater then drag elements such as text, images, or buttons onto its items/containers. You can adjust the size of the repeater or remove elements to make sure everything you need in the repeater can fit. When you add an element to a repeater, the element is automatically added to each repeater item.

Later, you will connect the elements to collection fields to replace the content. Each repeater item will show a different item from your collection.

Wix Editor

1. Go to your editor.

2. Go to the page or section where you want to add your repeater.

3. Click Add Elements

   

   on the left side of the editor.

4. Click List.

5. Click and drag the repeater you want to use onto the page.

1. Add or remove elements from your repeater. You can resize the repeater so it can fit all the necessary elements inside it. Later, you will connect the elements to collection fields to replace the content. Each repeater item will show a different item from your collection.

Studio Editor

1. Go to your editor.

2. Go to the page or section where you want to add your repeater.

3. Click Add Elements

   

   on the left side of the editor.

4. Click Layout Tools

5. Click Repeaters.

6. Click and drag the repeater you want to use onto the page.

1. Add elements to your repeater such as text, images and buttons. You can also delete elements from the repeater if you don't need them. Later, you will connect the elements to the relevant collection fields. Each repeater item will show a different item from your collection.

Tip:

Select a repeater item and click Add Media to add an image as the background. In the next step, you can select the image and click the Connect to CMS icon

to connect it to images in your collection.

Important:

We recommend that you make sure your repeater contains a button or image element, so you can link to the dynamic item page. This lets visitors click the image or button to navigate to the relevant item's dynamic item page.

Step 3 | Connect the repeater items to your collection

Datasets are the tool you use to connect your repeater elements to your collection fields. Once you connect an element to a dataset, you can choose which collection fields to use with each part of the element. Connect each element that you want to display collection content in. Then resize, move, or adjust the elements to your liking.

Wix Editor

1. In your editor, click the repeater you added.

2. Click the Connect to CMS icon

   

   .

3. Click the Choose a dataset drop-down and select an existing dataset that connects to your collection. Alternatively, select Add a Dataset, then choose the collection you want to connect, give it a name and click Create.

1. Under Connections, click the element you want to connect first.

2. (Optional) If you want to connect the element to a different dataset, click the Choose a dataset drop-down and select another dataset. Otherwise, leave it connected to the same dataset.

3. Under Connections, click the relevant drop-downs to connect each part of the element to the relevant collection field. The options vary depending on the element type.

Tips:

• To link a button to the collection's dynamic item page, click the Click action connects to drop-down and select the dynamic item page that ends with (Item).

• To link an image to the collection's dynamic item page, click the Link connects to drop-down and select the dynamic item page that ends with (Item).

1. Click Repeater connections at the top of the panel on the right.

2. Repeat steps 4-7 above to connect each element in which you want to display collection content.

1. (Optional) Click to resize, move, or adjust any of the elements in your repeater. You can add, remove, connect or disconnect elements at any time.

Studio Editor

1. In your editor, click the repeater you added.

2. Click the Connect to CMS icon

   

   .

3. Click the Choose a dataset drop-down and select an existing dataset that connects to your collection. Alternatively, select Add a Dataset, then choose the collection you want to connect, give it a name and click Create.

1. Under Connections, click the element you want to connect first.

2. (Optional) If you want to connect the element to a different dataset, click the Choose a dataset drop-down and select another dataset. Otherwise, leave it connected to the same dataset.

3. Under Connections, click the relevant drop-downs to connect each part of the element to the relevant collection field. The options vary depending on the element type.

Tips:

• To link a button to the collection's dynamic item page, click the Click action connects to drop-down and select the dynamic item page that ends with (Item).

• To link an image element to the collection's dynamic item page, click the Link connects to drop-down and select the dynamic item page that ends with (Item).

1. Click Repeater Connections at the top of the panel.

1. Repeat steps 4-7 above to connect each element you want to display collection content in.

1. (Optional) Click to resize, move, or adjust any of the elements in your repeater. You can add, remove, connect or disconnect elements at any time.

Step 4 | Manage the dataset settings

Adjust the dataset settings to control the dataset mode, the total items that can load at a time, the items that display, and the order in which they appear.

Wix Editor

1. Go to the repeater's connected dataset settings:

   1. Click the repeater.

   2. Click the Connect to CMS icon

      

      .

   3. Click Dataset Settings in the Connect Repeater panel on the right.

2. (Optional) Click the permission type next to Permissions to determine who can view, add, update, or delete the collection's content.

3. (Optional) Click the Dataset name field if you need to edit the name of the dataset.

4. (Velo only) Click the Dataset ID field to edit the ID used to identify the dataset in your page's code.

5. Click the Dataset mode drop-down and select the relevant option:

   • Read: Connected elements can read and display content from your collection. The elements cannot modify the collection content.

   • Read & Write: Connected elements can display content from your collection. Input elements can add or edit content in your collection.

6. Edit the Items per load field to set the maximum number of items that can load at a time.

   Note: This is also the maximum number of items that can load when visitors click 'Load More' buttons, 'Next/Previous page' buttons, or pagination bars. See the next section for steps.

1. (Optional) Click + Add Filter to only show specific items in the repeater.

2. (Optional) Click + Add new sort to choose the order in which collection items appear in the repeater.

Studio Editor

1. Go to the repeater's connected dataset settings:

   1. Click the repeater.

   2. Click the Connect to CMS icon

      

      .

   3. Click Dataset Settings in the Inspector panel.

1. (Optional) Click the permission type next to Permissions to determine who can view, add, update, or delete the collection's content.

2. (Optional) Click the Dataset name field if you need to edit the name of the dataset.

3. (Velo only) Click the Dataset ID field to edit the ID used to identify the dataset in your page's code.

4. Click the Dataset mode drop-down and select the relevant option:

   • Read: Connected elements can read and display content from your collection. The elements cannot modify the collection content.

   • Read & Write: Connected elements can display content from your collection. Input elements can add or edit content in your collection.

5. Edit the Items per load field to set the maximum number of items that can load at a time.

   Note: This is also the maximum number of items that can load when visitors click 'Load More' buttons, 'Next/Previous page' buttons, or pagination bars. See the next section for steps.

1. (Optional) Click + Add Filter to only show specific items in the repeater.

2. (Optional) Click + Add Sort to choose the order in which collection items appear in the repeater.

Step 5 | (Optional) Create 'Load More' or navigational buttons

You can display up to 1000 items at a time in your repeater. However, if you want to display a lot of items, consider adding a 'Load More' button to improve loading performance. Adjust the 'Items per load' field to control the number of items that can load at a time in the dataset's connected repeater.

The 'Items per load' field also determines the number of items displayed per 'page' in your repeater if you connect 'Next/Previous page' buttons or a pagination bar.

Wix Editor

Choose what you want to do:

Studio Editor

Important accessibility consideration:

If you add a 'Load More' button in the Studio Editor, make sure that any elements you want to place below the repeater, including the 'Load More' button, are attached to a separate section. Otherwise, the elements will overlap when the 'Load More' button is clicked. Learn more accessibility best practices for the CMS.

Choose what you want to do:

FAQs

Click below for answers to the most frequently asked questions about connecting repeaters to the CMS.

How do I link a repeater item to a dynamic item page?

You can set up your repeater so that clicking an image or button takes you to the item's dynamic item page. Make sure your repeater already has an image or button attached to it. When connecting the button or image (see step 3 above), click the Click action connects to drop-down and select the relevant dynamic item page.

Learn more about:

• Displaying collection content on your page.

• Dataset actions for images and buttons.