CMS: Adding and Setting Up a Dynamic List Page

17 min read
Dynamic list pages allow you to showcase various items from your CMS collection in an organized index. Each item, displayed in a repeater, gallery, or table, links to the collections' dynamic item page where visitors read more about the specific item.

A dataset controls the connections between the page elements and your collection fields. In the dataset settings, you can control the number of items that appear at a time. You can add filters to only include certain items or add sort conditions that control the order in which they appear.

Add a 'Load More' button to improve your page loading performance if you have a lot of items to show. You can also give visitors the ability to filter the items they see on the page by using input elements like dropdowns, radio buttons, or checkboxes.
Before you begin:

Step 1 | Add a dynamic list page

From your editor's CMS panel, create a dynamic list page for your collection. This adds a new page that displays different items from your collection in a repeater that you will customize later. 
Wix Editor
Studio Editor
  1. Go to your editor.
  2. Click CMS  on the left side of the editor.
  3. Click Your Collections.
  4. Hover over the relevant collection and click the More Actions icon
  5. Click Add dynamic page
A screenshot of adding a dynamic page from a collection in the Wix Editor.
  1. Select List page and click Add to Site

Step 2 | (Optional) Modify the URL slug structure

You may want to edit the URL slug structure of your dynamic list page to keep the web addresses of your dynamic pages organized. 

For example, you could create the following URL slug structures for your dynamic pages: 
  • Dynamic list page: https://www.{your-domain.com}/{collection-name}
  • Dynamic category page: https://www.{your-domain.com}/{collection-name}/{category}
  • Dynamic item page: https://www.{your-domain.com}/{collection-name}/{category}/{primary-field}

When editing the URL slug structure, the URLs must be unique so they do not conflict with existing web addresses used on your site. Learn more about creating unique dynamic page URLs.
Wix Editor
Studio Editor

  1. Go to your editor.
  2. Click Pages & Menuon the left side of the editor.
  3. Click Dynamic Pages
  4. Hover over the dynamic list page you just created and click the More Actions icon  on the right. 
    Tip: By default, the dynamic list page you created is titled: {Collection Name} (List) 
  5. Click SEO
  6. Click the URL slug structure field.
A screenshot of editing the URL slug structure for a dynamic list page.
  1. Customize the URL slug structure and press Enter on your keyboard. 

Step 3 | Connect the repeater to the CMS

You now have a dynamic list page with a repeater that includes 2 text elements, an image, and a button in each container. Each of your repeater's containers displays a different item from your collection. 

Connect each part of the elements to the relevant collection fields to ensure they display the info you want them to. We recommend connecting the button to your collection's dynamic item page so visitors can click to go to the relevant item's dedicated page. 

To provide more info about each item, you can attach more supported elements to the repeater. Then connect these elements to your collection fields in the dataset where you manage all the CMS connections. 
Want to use a gallery or table instead of a repeater?
If you'd rather display your collection items in a gallery or table (Wix Editor only), you can. Delete the default repeater then add a Pro Gallery or table. Then connect each part of your gallery or table to the CMS collection through the dataset, in the same way you would connect the repeater. 
Wix Editor
Studio Editor
  1. (Optional) Add elements to your repeater (e.g. buttons, text, images) or remove elements you do not need. You can adjust the size of the repeater so it can contain all the elements. 
  2. Click the repeater element and select the Connect to CMS icon .
  3. In the Connect Repeater panel on the right, click the element you want to connect.
  4. Under Connections, click the relevant drop-downs to connect the element to the relevant collection field or dataset action. 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 collection's 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 collection's dynamic item page that ends with (Item).
A screenshot of linking a button to the collection's dynamic item page.
  1. Click Repeater connections at the top of the panel on the right. 
  2. Repeat steps 3-5 above to connect the elements to collection fields or dataset actions.
  1. Click to adjust your repeater elements as needed.
    Tip: You can add or remove elements from your repeater at any time. Disconnect elements if you want to use static content that doesn't change. 
  2. Click Preview to test your dynamic list page.
  3. Click Publish if you are ready to make the changes go live. 

Step 4 | (Optional) Manage the dataset settings

By default, your dynamic page dataset allows up to 12 items to initially display in your repeater or gallery. You can adjust the maximum items that can display at a time from the dataset settings. You can also add filters to include only certain items, or add sorts to control the order in which the items display. 
Wix Editor
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 Connect Repeater panel on the right.
  2. 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. 
  3. (Optional) Click Public next to Collection Permissions if you want to change the permissions that determine who can access the content and what they can do with it. 
  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 can load per page in a connected pagination bar or per click in a "Load More" button (see the next section for steps).
    Note: This field does not apply to tables. If using a table to display your items, limit the number of items displayed by clicking the table's Layout icon , then setting a custom table height and enabling pagination. 
  5. (Optional) Click + Add Filter to only show specific items in the repeater. 
  6. (Optional) Click + Add new sort to choose the order in which the items appear in the repeater.
A screenshot of the dataset settings in the Wix Editor.
  1. Click Preview to test your dynamic list page.
  2. Click Publish if you are ready to make the changes go live. 

Step 5 | (Optional) Add a 'Load More' button

You can add a 'Load More' button to improve your page's loading performance. Your dataset's Maximum items displayed field determines how many items initially load in the repeater, and how many additional items can load after visitors click a 'Load More' button. 
Wix Editor
Studio Editor
  1. Add a button to your page:
    1. Click Add Elements  on the left side of the editor.
    2. Click Button, then drag the button onto your page where you want it to appear (e.g. below the repeater). Do not attach the button to your repeater.  
      Tip: Alternatively, you can add an image and use it as your 'Load More' button. 
  2. Click Change Text and enter the text you want to display on the button (e.g. "Load More"). 
  3. Click the Connect to CMS icon .
  4. Click the Choose a dataset drop-down and select the same dataset that connects to your repeater. 
  5. Click the Click action connects to drop-down and select Load more
A screenshot of selecting the 'Load more' dataset action.
  1. Click the button and select the Design icon  to customize the appearance of your 'Load More' button.
  2. Click Preview to test your 'Load More' button.
  3. Click Publish if you are ready to make the changes go live. 
Tip:
In the Wix Editor, you can also connect a pagination bar that allows visitors to cycle through 'pages' of items. The Maximum items displayed field determines how many items can appear in each 'page' of the pagination bar. If you would like to see pagination bars in the Studio Editor, vote for this feature here.

Step 6 | (Optional) Let visitors filter items

Give visitors ways to filter the items that appear on your dynamic list page with input elements. Choose from any of the following input elements that allow filtering: Radio Buttons, CheckboxesDropdownSelection Tags, or Slider (Range Sliders only).
A screenshot showing examples of input elements used to filter the items that appear on a dynamic list page.

FAQs

Click the questions below for answers to common questions about setting up dynamic list pages. 

Did this help?

|