Help Center
    Help Center
  1. Creating your site
  2. Advanced features
  3. CMS
  4. Working with dynamic pages and the CMS
    5. CMS: Creating Dynamic Pages that List Items by Category

CMS: Creating Dynamic Pages that List Items by Category

26 min read
Organize your CMS (Content Management System) collection items by category on your website with dynamic pages. You can create a dynamic 'category' page with a different version for each category. In each version, visitors view a list of the items within the category and can click to view the specific items. 

For example, let's say you're a book blogger with reviews for many different genres like mystery, romance, and fantasy. By setting up dynamic pages for each genre, your book-loving visitors can easily navigate to the reviews they are interested in, improving their experience.

This guide will show you how to establish dynamic pages for each category, adjust URL structures, personalize your pages, and, if desired, create an overarching dynamic page that displays all your categories. 
Before you begin:
  • Make sure you have a CMS collection with items that you want to categorize. 
  • Make sure you've created a dynamic item page for your collection. You will add a dynamic link to this page from your dynamic 'category' page so visitors can click to view details about a particular item. 

Step 1 | Add a field for categorizing your collection items

To display different categories of items on your site, your collection needs a field that defines which category each item belongs to. Add or choose a 'category' field in your collection, then enter values in the field to categorize each item. 

To add a 'category' field to your collection:

  1. Go to CMS in your site's dashboard. Alternatively, you can click CMS in your editor, then click Your Collections. 
  2. Click the relevant collection.
  3. Click Manage Fields. 
  4. Click + Add Field, choose the Text or Number field type and click Choose Field Type. 
  5. Enter the Field name (e.g. Category).
  6. (Optional for Velo only) Update the Field ID, which is used in the site's code. You cannot update this ID later. 
  7. (Optional) Enter Help text that will appear in your collection view as a tooltip next to the field name.
  8. (Optional) Click the Validations tab to make this a required field, limit the character count, or accept specific values only. Learn more about adding field validations.
  9. (Optional) Click the Default value tab to add text that gets added to the field automatically for each new item in the collection. Learn more about adding default values to fields.
  10. Click Save.
A screenshot of saving a new field that will be used to categorize collection items.
  1. Enter the name of the category that each item belongs to in your new 'category' field. Make sure to spell, capitalize, and use the same number of spaces for each unique category. 
A screenshot of a category collection field with values for each item.

Step 2 | Add a dynamic page that lists items per category

Create a new dynamic list page for your collection. Later, this dynamic page will serve as a template with different versions for each category. Each version will only show items that belong to its category. 
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 for a collection.
  1. Select List page and click Add to Site. 

Step 3 | Modify the URL slug structures

You need to convert your new dynamic list page to a type of dynamic item page that lists items per category. To do so, edit the page's URL slug structure. Make sure to add your 'category' field as a variable and to keep the slug structure unique to your site. 
Important:
If you change the URL slug structure of your dynamic pages, all the existing links to these pages will no longer work. This affects links within your site, any links you've shared externally, and SEO links in search engines. We're releasing a feature that will let you add an automatic redirect, taking visitors and search engines from the old URL to the new one. 

Unique URL slug structure

The URL slug structure cannot already be used by other existing pages on your site. To be unique, the URL slug structure cannot have the same prefix (e.g. {Collection name}) and the same number of variables as another page on your site, even if the variables are different. 

The CMS will not allow you to save changes to the URL slug structure if it conflicts with an existing one. This is why you may want to alter the URL slug structures of your collection's other dynamic pages. 

What converts the dynamic list page to a dynamic item page?

When you create any dynamic page, a Page Link field is added to your collection. The Page Link field generates the actual URL slug values for each item in your collection based on the URL slug structure of the dynamic page. 

Editing the dynamic page's URL slug structure causes the Page Link field values to adjust accordingly. If multiple items in your collection have the same Page Link value (URL slug), the CMS determines that these items should share the same page. So, the dynamic page is turned into a dynamic item page with a different version for each unique Page Link value (URL slug). 
Creating dynamic 'category' pages from combined field variables:
You can create dynamic 'category' pages with versions for each unique combination of field values. If you add multiple field variables to the URL slug structure of a dynamic page, the values are combined in the Page Link field. If this field is the same for multiple items, the dynamic page is converted to a dynamic item page with versions for each unique Page Link value (URL slug).

Example URL slug structures you can create

You can use any text or number fields as variable in your dynamic pages' URL slug structures. For example, you could create the following URL slug structures for your dynamic pages: 
  • Dynamic item page: https://www.{your-domain.com}/{collection-name}/{category}/{primary-field}
  • Dynamic category page: https://www.{your-domain.com}/{collection-name}/{category}
  • Dynamic list page: https://www.{your-domain.com}/{collection-name}

To edit the URL slug structures of your dynamic pages:

Wix Editor
Studio Editor
  1. Go to your editor.
  2. Click Pages & Menuon the left side of the editor.
  3. Click Dynamic Pages. 
  4. Edit the URL slug structures of the dynamic pages that connect to your collection. Click the relevant dynamic page type below for directions: 

Step 4 | Customize your dynamic category page

Your dynamic 'category' page should now act as a dynamic item page with different versions for each of your categories. In each version, a repeater has various elements already connected to your CMS collection fields to show details about each item within the category. 

You can add or remove elements in the repeater, modify their CMS connections, and resize the repeater to fit everything. Use the Preview toolbar to view how each version of your page looks. We recommend connecting text at the top of the page to your CMS 'category' field so that each version shows the name of the category at the top. 
Want to use a gallery or table instead of a repeater?
If you'd rather display the items in a gallery or table, you can. Delete the default repeater and add a Pro Gallery or table. Then connect each part of your gallery or table to the CMS collection through the dataset.

To customize your dynamic category page:

Wix Editor
Studio Editor
  1. Go to your editor.
  2. Go to your dynamic category page: 
    1. Click Pages & Menuon the left side of the editor.
    2. Click Dynamic Pages. 
    3. Click the dynamic category page you created in the previous section's steps. 
A screenshot of selecting the dynamic category page in the Wix 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:
  • Connect text at the top of the page to your 'category' field so it dynamically adjusts, depending on which category is displayed. 
  • Connect the image or button in your repeater to your dynamic item page used to display one item at a time.
A screenshot of connecting a button to the dynamic item page.
  1. Click Repeater connections at the top of the panel. 
  2. Repeat steps 3-7 above to connect the elements to collection fields or dataset actions.
A screenshot of the repeater's CMS connections on a dynamic category page.
  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 and use the toolbar to test each version of your dynamic category page.
    Tip: If you get a 404 error message when you enter preview mode, save and reload your editor, then try again. 
A screenshot of using the Preview toolbar to view other versions of a dynamic page.
  1. Click Publish if you are ready to make the changes go live. 

Step 5 | (Optional) Create a dynamic page that lists your categories

Now that you have a dynamic page with different versions for each of your categories, you may want to create a page that lists all of these categories. That way, visitors can view an index of all your categories, then click to go to the relevant version of the dynamic 'category' page you created earlier. 

To do this, you need a separate collection with an item for each of your categories. Your 'categories' collection will also need a Multi-Reference field referencing items from your main collection. You can also add an image field for each category's image and a text field to provide a brief description of each category. 

Then, add a dynamic list page for your 'categories' collection. You need to add a dataset that connects to your main collection and has a filter that includes the Title ('categories') field from your 'categories' collection. Customize the page and modify its URL slug structure if needed. 

a | Create a collection for listing your categories

  1. Go to CMS in your site's dashboard.
  2. Click + Create Collection at the top right. 
  3. Click Start from scratch, then click Next.
  4. Enter a name for your collection, leave Multiple items (Default) selected and click Create. 
  5. Add a multi-reference field that references your main collection:
    1. Click Add Field, select Multi-reference, then click Choose Field Type. 
    2. Enter the Field name.
    3. Click the Referenced Collection drop-down, select the main collection that includes your 'category' field, then click Save. 
A screenshot of adding a Multi-Reference field in a Category collection.
  1. (Optional) Add more fields to display on your list of categories page (e.g. image, text). For example, you could add an image field for displaying an image representing each category.  
  2. Add a new item for each category:
    1. Click + Add Item.
    2. Enter the name of one of your categories in your primary Title field. 
    3. Click the Multi-Reference cell and select the items that have a category field matching this item's primary Title field. 
    4. Fill out any additional fields you added for this item/category. 
    5. Repeat these steps to add items representing each category. 
A screenshot of a Categories collection with Multi-Reference fields.

b | Add a dynamic page for displaying your list of categories

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 collection you just created for listing your categories and click the More Actions icon . 
  5. Click Add dynamic page. 
A screenshot of adding a dynamic page.
  1. Select List page and click Add to Site. 
  2. Add a dataset that connects to your main collection and has a filter that includes the Title ('categories') field from your 'categories' collection:
    1. Click CMS  on the left side of the editor.
    2. Click Add Content Elements then select Dataset.
    3. Click the drop-down, select the main collection and click Create.
    4. Click + Add Filter in the Dataset Settings panel on the right. 
    5. Click the Field drop-down and select your 'category' field. 
    6. Select Another dataset under Value source. 
    7. Click the Dataset drop-down and select your collection that lists the categories. 
    8. Leave Title selected in the Field drop-down and click Add Filter.
A screenshot of adding a filter to the dataset.
  1. Connect the 'Read More' buttons in your repeater to your dynamic category page:
    1. Click the button in your repeater and select the Connect to CMS icon .
    2. Click the Choose a dataset drop-down and select the dataset you just added that connects to your main collection.
    3. Click the Click action connects to drop-down and select the dynamic 'category' page. 
A screenshot of linking to the dynamic 'category' page.
  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 and select the Connect to CMS icon to adjust the connections between the elements and your collection. 
A screenshot of adjusting the CMS connections in a repeater.
  1. (Optional) Modify the URL slug structure of this dynamic page. 
  2. Click Preview to test your connections. 
  3. Click Publish if you are ready to make the changes go live. 
Next:

FAQs

Click below for answers to common questions about creating dynamic category pages. 

Did this help?

|

In This Article

  • Step 1 | Add a field for categorizing your collection items
  • Step 2 | Add a dynamic page that lists items per category
  • Step 3 | Modify the URL slug structures
  • Unique URL slug structure
  • What converts the dynamic list page to a dynamic item page?
  • Example URL slug structures you can create
  • Step 4 | Customize your dynamic category page
  • Step 5 | (Optional) Create a dynamic page that lists your categories
  • a | Create a collection for listing your categories
  • b | Add a dynamic page for displaying your list of categories
  • FAQs

Related Content

CMS: Adding and Setting Up a Dynamic Item Page
CMS: Adding and Setting Up a Dynamic List Page
CMS: Linking to Dynamic Pages
CMS: Creating Multi-Reference Fields
CMS: About Dataset Click Actions for Buttons and Images

Hire a Professional

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