Use dynamic item pages to instantly produce a large 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 slug 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

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.

1. Select Item page and click Add to Site. 
   Tip: Select List page as well to add a dynamic list page for the collection at the same time.

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}

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 its own version of the dynamic item page. Learn more about creating unique dynamic page URLs.

When editing the URL slug structure, the 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.

Show me an example of conflicting URL slug structures that cannot be used

• 
  

• 
  

Important:

If you want the old URLs to automatically redirect to the new ones you create by adding variables, make sure your site first has a connected domain. If your site does not have a domain connected, the old URLs will no longer work and instead, will load 404 error pages.

To edit the URL slug structure of your dynamic item page:

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 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)

5. Click SEO.

6. Edit the URL slug structure field:
   Click Edit next to the URL slug structure field and choose what you want to do:Add Variable: Click + Add Variable and choose a 'Text' or 'Number' field to use its values in the URL slug structure.
   Add or edit static values: Click the field and enter the static values you want to use in the URL slug structure or edit the existing values. Use only letters, numbers or dashes. 
   Tip: You can add non-Latin characters to the URL slug.
   Click Save.
   

1. Click Replace URLs to confirm the changes. The dynamic page's previous URLs will be deleted and will no longer work. Instead, the new URLs will be generated for the dynamic 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

1. (Optional) Add elements to your page (e.g. buttons, text, images) or remove elements you do not need.

2. Connect the elements on your page to your CMS collection:

Back button

Connect the Back button to your dynamic list page:

1. Click the Back button at the top of the strip, then click the Connect to CMS icon .
   Tip: Alternatively, click the Link icon  and select the relevant linking option if you want to link the button to another location.

2. Click the Click action connects to drop-down and select the collection's dynamic list page, titled: {Collection name} (List)

3. Choose how you want the link to open: In the current window or As a new window

4. (Optional) Display dynamic text on the "Back" button by clicking the Label connects to drop-down and selecting the field you want to display on the button.

Text elements

To use dynamic text that changes based on the item displayed, connect the relevant text elements to the collection fields you want to display.

Note: Do not connect static text to the CMS if you want the text to remain the same across all versions of this dynamic item page. Edit static text as you normally would by clicking the text element and selecting Edit Text.

To use dynamic text that changes based on the item displayed:

1. Click the relevant text element, then click the Connect to CMS icon .

2. Click the Text connects to drop-down and choose the field you want to display.

3. Repeat this step for each text element you want to display dynamic text in.

Image

Connect the image to your collection fields:

1. Click the image, then click the Connect to CMS icon .

2. Click the drop-downs under Connections to connect each part of the image element:Image source connects to: Select the image field you want to display.
   Alt text connects to: Select the field you want to use as the alt text. You can choose the following field types: Text, Number, Date and Time, Address, Tags
   Link connects to: Select a dataset action, dynamic page, or field you want to link to the image.
   

Previous / Next buttons

By default, these buttons already connect to the Previous / Next dynamic page dataset actions, which take visitors to the previous or next item's version of this dynamic item page.

If necessary, you can edit the connections:

1. Click the Previous button at the bottom of the strip.

2. Click the Connect to CMS icon .
   Tip: Alternatively, click the Link icon  and select the relevant linking option if you want to link the button to another location.

3. Click the relevant drop-down to edit the connections:Click action connects to: Choose the dataset action that will occur or the dynamic page that will load when visitors click the button.
   Label connects to: Select a field if you want to dynamically display its text on the button.
   

4. Click the Next button at the bottom of the strip and repeat steps 2-3 above.

Tip:

Learn more about the CMS connection options for each supported element.

3. Click Preview and use the Preview toolbar to test each version of your dynamic item page.

4. Click Publish if you are ready to make the changes go live.

FAQs

Click a question below to learn more about setting up dynamic item pages.

What is a dataset?

Datasets are the vital link between the elements on your page and the content in your CMS collection. You can use datasets to create a two-way connection, allowing you to display collection content, capture user inputs, or both.

Datasets allow you to control which parts of your page elements connect to which fields in your collection. Each dataset connects to a collection and each element connected to the dataset connects to a field in the collection. This unlocks a new way of managing which content appears and where.

Learn more about datasets.

Can I link my site menu to specific dynamic item page URLs?

Yes. You can create links in your site menu that take visitors to specific versions of your dynamic item page. You can also create links to your dynamic list page and to specific sections and anchors on your dynamic pages.

Learn how to link your site menu to dynamic pages.

Can I show numerous images and videos on a dynamic item page?

Yes. If you have several media files for each item in your CMS collection, you can display them in a gallery on your dynamic item page.

First, upload the media files for each item to a media gallery field type in your collection. Then connect a gallery on your dynamic item page to a dataset that links to your connection. Connect your image sources connect to option to the media gallery field and publish your site to make the changes go live.

Learn more about connecting galleries to the media gallery field in CMS collections.

Why should I add a variable field to the URL slug structure?

Adding a variable field to your URL slug structure changes the URL slugs (dynamic page URLs) of your collection items. The dynamic page URL helps search engines and visitors understand what the page content is about. It also adds structure and organization to your site's dynamic URLs.

For a dynamic item page to have a dedicated version for each collection item, the page's Page Link field needs a unique URL slug. Otherwise, the page cannot exist for each item. You may need to add variables to the URL slug structure, to ensure each item has a unique URL slug.

If multiple items in your collection have the same value in their primary field, and you do not add a variable to the dynamic item page's URL slug structure, only 1 URL is generated for multiple items. This is because the primary field is used in the dynamic item page's URL slug structure by default. Since only 1 URL is created for both items, only 1 item will have a dedicated version of the dynamic item page, the other will not.

For example, if your dynamic item page URL slug structure ends with /team/{primary-field}, and 2 items in the collection have "Sara" in the primary field, only 1 URL is generated for /team/sara. So only 1 version of the dynamic item page is created for only 1 of the 2 collection items.

To solve this, you could add a variable field to the URL slug structure to create unique URL slugs for each item. For example, add a "phone" field if each item has a different value in a "phone" field. The URL would then be /team/sara/{phone} so each item gets its own unique dynamic item page URL.

Learn how to add variable fields to your page's URL slug structure.

Can I create dynamic pages that list items by category?

Yes. 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 allows you 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.

Learn how to create dynamic pages that list items by category.

Can I add a tooltip to an image that appears when visitors hover over the image?

We have removed the option to add tooltips to image elements as tooltips are not accessible to all users. It is no longer possible to set tooltips for static images or images that connect to the CMS. Instead, use the alt text field to explain images in a way that screen readers can understand them.