CMS: Adding and Setting Up a Dynamic Item Page

15 min read

Use dynamic item pages to instantly produce an unlimited number of pages, each representing a different item from your CMS collection. The dynamic page acts as a template, with each collection item getting its own unique version and web address. You can customize the URL structure of your dynamic pages to keep them organized and ensure each item gets a unique URL.

Start by creating your dynamic item page, then design its layout by adding and arranging the elements. Connect the page elements, such as text and images, to your collection fields through the built-in dataset. As a result, each item's unique version of the page shows content from the item's collection fields.

We recommend pairing your collection's dynamic item pages with a dynamic list page that shows a catalog of your items in a repeater, gallery or table. When visitors click an item on the dynamic list page it takes them to the dynamic item page where they view details about the item.

Before you begin:

Create a CMS collection that includes the items that will each display in their own version of this dynamic item page.

Step 1 | Add a dynamic item page

Create a dynamic item page for your collection from the CMS panel in your editor. This adds the page that acts as a template for each item's unique version. Each version will share the same dynamic item page and simply swap out the details depending on the item.

Wix Editor

Studio Editor

Go to your editor.
Click CMS on the left side of the editor.
Click Your Collections.
Hover over the relevant collection and click the More Actions icon .
Click Add dynamic page.

A screenshot of adding a dynamic page from a collection in the Wix Editor.

Select Item page and click Add to Site.

Step 2 | (Optional) Modify the URL slug structure

You may want to edit the URL slug structure that determines the web addresses of your dynamic pages. This allows you to keep the URLs organized and structured in your own custom way.

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 changing the URL slug structure, the URLs must remain unique so they do not conflict with existing web addresses. Make sure to create a URL slug structure for your dynamic item page that ensures each item has a unique URL. Without a unique URL, an item cannot have a version of the dynamic page. Learn more about creating unique dynamic page URLs.

Wix Editor

Studio Editor

Go to your editor.
Click Pages & Menuon the left side of the editor.
Click Dynamic Pages.
Hover over the dynamic item page you just created and click the More Actions icon on the right.
Tip: By default, the dynamic item page you created is titled: {Collection Name} (Item)
Click SEO.
Click the URL slug structure field.
Customize the URL slug structure and press Enter on your keyboard.
Tip: Click Add Variable and select the relevant field to add the field's dynamic value to the URL of your dynamic item page.

A screenshot of modifying the URL slug structure of a dynamic item page.

Step 3 | Connect page elements to the CMS

By default, your new dynamic item page includes elements, such as text and an image, that are automatically connected to your CMS collection fields.

Add and arrange the elements that you want to include in your dynamic item page. Then connect the elements to your CMS collection fields within the dataset if you want them to dynamically change based on the item. Leave elements disconnected from the CMS if you want their content to remain the same across each version.

You should also have default "Previous" and "Next" buttons that automatically take visitors to the previous or next item returned by the dataset. You can link an extra "Back" button to the collection's dynamic list page or another location that lists your items.

Wix Editor

Studio Editor

(Optional) Add elements to your page (e.g. buttons, text, images) or remove elements you do not need.
Connect the elements on your page to your CMS collection:

Back button