CMS: Setting Up a Dynamic List Page

7 min read
Before you begin:
A dynamic list page displays a preview of the items from your collection on a list. Clicking an item on this list brings the visitor to a dynamic item page that displays more info about the item.
You can use a repeater, table, or gallery to list your items. For example, your list page may contain previews of recipes. Each item in the list then links to the item page for that recipe. Each item page displays the ingredients, pictures and instructions for each recipe.
Note:
You can create many dynamic list pages to display only items from categories or groups. You can then link between them as required. The Modify the URL section of this article explains how to do this.
A screenshot of a dynamic list page showing recipes in a repeater.

Step 1 | Add a dynamic list page

Create your dynamic list page from the collection you've already created a dynamic item page for. 

To add a dynamic list page:

  1. Go to CMS in your Editor:
    • Wix Editor: Click CMS  on the left side of the Editor.
    • Editor X: Click CMS  at the top of Editor X.
  2. Click Collections.
  3. Click the More Actions icon  next to the relevant collection and click Add Dynamic List Page.
A screenshot of the Content Manager section of the Add panel, highlighting the Add Dynamic List Page option

Your new dynamic list page includes a repeater that will display a preview of all the items in your collection. If you want to use this repeater, skip to the next step. If you would rather list your items in a gallery or table, you can add these elements and delete the default repeater. 

To add and connect a gallery or table:

  1. Go to the Add panel:
    • Wix Editor: Click Add  on the left side of the Editor.
    • Editor X: Click Add Elements at the top of Editor X.
  2. Add a gallery or table:
    • Wix Editor: Choose what you want to add:
      • Gallery: Click Gallery and select the relevant gallery.
      • Table: Click List, then click Tables and select the relevant table.
    • Editor X: Click Media, then click Pro Galleries and select the relevant gallery.
      Note: Tables are not yet available in Editor X.
  3. Click the gallery or table on your page.
  4. Click the Connect to Data icon  (or in Editor X).
  5. Select the fields from your collection in the drop-down menus under Connection Options.
  6. Select the default repeater and press Delete on your keyboard to remove it. 
Tip:
Learn more about displaying collection content in a gallery or a table.

Step 3 | Check connection of the elements

The repeater should already connect to the correct fields in your collection. But it's always recommended that you check everything is set up in the right way.

To check the connections in your repeater:

  1. Click the repeater, gallery, or table in your Editor.
  2. Click the Connect to Data icon  (or in Editor X).
  3. Check each of the elements and fields under Components. If necessary, click to change the connection.
A screenshot of the Connect Repeater panel showing the component connection options

Step 4 | Set the number of items to display

The default number of items displayed on a dynamic item page is 12. Set this to a different value in the dataset to display more or fewer items on your dynamic list page.

To set the number of items to display:

  1. Click your dataset element, then click Settings.
  2. Change the Number of items to display to the required value.
  3. Close the settings panel, then click Save.
A screenshot of the Dynamic Page Dataset options panel highlighting the Number of Items to Display option

Step 5 | Modify the URL

The URL of a dynamic page acts as a filter. If you remove any extra field values from the URL, the dynamic page displays all the items in the collection. It also changes the name of the page to 'Collection_name (All)'.
Follow the steps below to display only items from a particular category on your dynamic page. For this, your collection must have a text field containing category values. For this example, we use vegetarian, meat, pasta, or sauce. You can then update the URL of the dynamic list page to include the category value.

To modify the URL of your dynamic page:

  1. Go to Site Pages in your Editor:
    • Wix Editor: Click Menus & Pages  on the left side of the Editor.
    • Editor X: Click Pages  at the top of Editor X.
  2. Click Dynamic Pages.
  3. Select the new dynamic page and click the More Actions icon .
  4. Click Settings.
  5. Remove any field name or names under What's the page URL?, but, make sure the name of the collection remains.
    Note: After you remove the field, the page name changes to Collection_Name (All) - it is now a type of list page. You can refine the items displayed on your dynamic list page by adding a field to the URL. Continue with the following steps to display groups of items.
A screenshot of the Page Settings panel for Dynamic Pages, highlighting the Dynamic Value.
  1. Click Add Field.
  2. Select the field you want to filter by. This is known as the dynamic value.
A screenshot of the Page Settings panel for Dynamic Pages, highlighting the Add Field drop-down menu.
  1. Click on the field you just added. The name of the chosen field (the dynamic value) is now displayed between parentheses at the end of the URL.
A screenshot of the What's the page URL? field, showing the updated URL.
  1. Items in the collection with matching values can now be displayed as groups.
A screenshot of a collection in the Content Manager, highlighting a field for the Food Type category
  1. The on-screen drop-down allows you to set which group will be displayed.
A screenshot of the on-screen drop-down menu showing the available categories that the dynamic list page can display.
  1. Switch between groups in Preview mode to see how your page will look live.

Now that you have a dynamic list page set up, make it available to your site visitors. Add a link to your site menu or add a linkable element on any of your site pages, so your visitors can access the page. Learn more about linking to a dynamic page.