Help Center
    Home
  1. Creating your site
  2. Advanced features
  3. CMS
  4. Working with dynamic pages and the CMS
    5. CMS: Displaying Dynamic Content in a Repeater

CMS: Displaying Dynamic Content in a Repeater

17 min read
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 collection

Create a multiple item collection for storing the content you want to use in your repeater. Then add collection fields that will connect to the elements in your repeater and set the collection permissions. 
Wix Editor
Editor X
Studio Editor
  1. Go to your Editor.
  2. Click CMS  on the left side of the Editor. 
  3. Click Create Collection.
  4. Enter a name for your collection. 
  5. Leave Multiple items (Default) selected and click Create. 
  6. Add fields to your collection manually or by importing a CSV file:
  7. Set permissions for the collection: 
    1. Click More Actions and select Permissions & privacy. 
    2. Click the What type of content will you store in this collection? drop-down and select an option. If necessary, you can click the drop-downs to adjust who can view, add, delete, and update content. Learn more about setting collection permissions. 
    3. Click Save. 
A screenshot of setting collection permissions and privacy.
A screenshot of a sample CMS collection.

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
Editor X
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 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.
Important:
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 in the dynamic item page. 

Step 3 | Connect your 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
Editor X
Studio Editor
  1. In your Editor, click the repeater you added.
  2. Click the Connect to CMS icon .
  3. Create a new dataset or connect an existing one: 
    • Create a new dataset: 
      1. Click Create Dataset. If you already have a dataset on your page, click the Choose a dataset drop-down and select Create a New Dataset.
      2. Click the Choose a collection drop-down and select the relevant collection. 
      3. (Optional) Click the Dataset name field and enter a name for the dataset. 
      4. Click Create. 
    • Connect an existing dataset: 
      1. Click the Choose a dataset drop-down.
      2. Select the dataset you want to connect.  
  1. Under Elements, 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 Connection Options, 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 the button element to the dynamic item page, click the Click action connects to field and select the dynamic item page that ends with (Item).
  • To link an image element to the dynamic item page, click the Link connects to drop-down and select the dynamic item page that ends with (Item).
  1. Click All Connections at the top of the Connect Repeater panel. 
  2. 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
Editor X
Studio Editor
  1. In your Editor, select the dataset that connects to your repeater.
  2. Click Settings. 
  3. Click the Dataset mode drop-down and select and option: 
    • Read: Allow the dataset to display your collection content in the repeater.
    • Read & Write: Allow the dataset to display your collection content in the repeater and allow visitors to add or edit collection content with input elements. 
  4. Edit the Maximum items displayed field to adjust the maximum items that can initially load in the repeater. This is also the maximum items that load when visitors click a 'load more' button (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 a 'Load More' button

If your collection has more items than the repeater's dataset can display at a time, add a 'Load More' button. When visitors click the button, the additional repeater items load. The Maximum items displayed field in the dataset settings determines how many items can initially load in the repeater, and how many additional items can load when the 'Load More' button is clicked.
Wix Editor
Editor X
Studio Editor
  1. Click Add Elements  on the left side of the Editor.
  2. Click Button, then drag the button to where you want it to appear. Make sure to place it outside of the repeater so it does not attach to it.
    Tip: Alternatively, you can add an image and use it as your 'Load More button. 
  3. Click Change Text and enter the text you want to display on the button (e.g. "Load More"). 
  4. Click the Connect to CMS icon .
  5. Click the Choose a dataset drop-down and select the dataset connected to your repeater. 
  6. Click the Click action connects to drop-down and select Load more. 
  1. Click the button and select the Design icon  to customize the appearance of your 'Load More' button.

FAQs

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

Did this help?

|

In This Article

  • Step 1 | Create a collection
  • Step 2 | Add and customize your repeater
  • Step 3 | Connect your repeater items to your collection
  • Step 4 | Manage the dataset settings
  • Step 5 | (Optional) Create a 'Load More' button
  • FAQs

Related Content

CMS (Formerly Content Manager): About Your Collection Fields
CMS: About Displaying Collection Content in a Table or Gallery
CMS (Formerly Content Manager): Adding and Setting Up a Dataset
CMS (Formerly Content Manager): Creating a Collection
CMS (Formerly Content Manager): An Overview

Hire a Professional

Get matched with a Wix Partner who can help you reach your site goals.
Get Matched