Built on WIX Headless

Docs Widgets Dynamic Page widget

Dynamic Page widget

Show one CMS collection item per URL with layouts and per-item SEO on Wix Harmony — find every setting in the Dynamic Page panel.

Panel map
Dynamic PageSettings

Collection and fields

  • Collection / Fields to display
  • Show system fields / Add more fields

The Dynamic Page widget shows one collection item per URL (for example /fruits/apple). The URL decides which collection item fills the layout.

Recommended: create the page as a native Wix dynamic page. Alternative: use the app /item Site Page when native collection pages fail (fixed path; item slugs not auto-listed in the sitemap). The Dynamic Page widget, and links from Repeater, Table, Slideshow, Media Gallery, and Calendar, open those URLs.

  1. Open the collection.
  2. Choose More actions → Add collection page.
  3. Wix adds a native dynamic page. Note its path — the part before the item slug. A Fruits collection might use fruits for URLs like /fruits/apple.

Wix stores each item’s slug in the Item slug field.

Step-by-step: How to set up Dynamic Pages.

Connect to a native Wix dynamic page

On the Dynamic Page widget, and on any Repeater, Table, Slideshow, Media Gallery, or Calendar that should open those item URLs:

  1. Connect the same collection.
  2. Set Page path to the native page path (fruits in the example). Do not include a leading slash.
  3. Set Page link field to Item slug — the Wix slug field. A collection set up for an older /item page may also have a Dynamic page slug field; leave it unselected on a new native page.

Page path set to the native page path, with Page link field set to Item slug

Use the same Page path and Page link field on the Dynamic Page widget and on every widget that links to that page. Place the Dynamic Page widget on the native collection page when that page should render the item.

Setup

Display widgets, including Dynamic Page, are added from Add → Elements → Installed Apps — see Add widgets. Place Dynamic Page on the native collection page.

Use AI setup in the panel for a plain-language start, then refine in Manual. Details: AI setup.

  1. Create a native Wix dynamic page for the collection (More actions → Add collection page).
  2. On that page, add Dynamic Page and open Settings.
  3. In Content, connect the collection and choose fields.
  4. In Dynamic page, set Page path and Page link field as in Connect to a native Wix dynamic page.
  5. In Layout, pick a mode (Preset / Custom / HTML / CSS).
  6. Optionally configure Filters, Data refresh, Payments, Formatting, Design, and SEO.

Content

Where: Manual overview → Content drill row

Where: Settings → Content

  1. Set Collection to the CMS collection this template should serve.
  2. Under Fields to display, check the fields visitors should see.
  3. Use Show system fields if you need _id or other system fields.
  4. Use Add more fields to jump to the collection and create missing fields, then return and check them.

Only fields you select here appear on the live item page (and become available under Formatting).

Filters

Where: Manual overview → Filters drill row

Where: Settings → Filters

Use filters to gate which collection items may show on the live item page (for example only when Status equals Published). This is not a search bar or filter toolbar — visitors still open one item per URL.

  1. Under Field filters, add filters with the same options as on Table and Repeater (Search & filters).
  2. Prefer Fixed mode for rules that always apply to every visitor.
  3. Show mode applies only when matching filter values are present in the page URL — turn on Sync URL query params if visitors may arrive from a filtered list that uses Add as URL query params.
  4. Set Unavailable message to the text visitors see when the item fails a filter (default: This content is unavailable.).

When an item does not match, the widget shows the unavailable message instead of field content (SEO tags from the widget are not applied in that case).

Access

Where: Settings → Access (Pro)

Separate from Filters: Access controls who may view item content (members or pricing plan holders), not whether the URL item matches a field rule. Protect the entire Dynamic Page or gate by item rules; customize the blocked state. See Content access.

Data refresh

Where: Settings → Data refresh

Full reference: Data refresh.

  1. Turn on Show refresh button if visitors should manually reload the current item.
  2. Set Auto-refresh to an interval (Every 15 seconds through Every 5 minutes), or leave Off.

Dynamic page URLs

Where: Manual overview → Dynamic page drill row

Where: Settings → Dynamic page

This section wires the template to item URLs. For a new page, use Connect to a native Wix dynamic page.

Native collection page

  1. Set Page path to the native page path (fruits for /fruits/apple).
  2. Set Page link field to Item slug.
  3. Optionally pick a Preview item to fill the template in the editor. Live pages always use the URL slug.

Alternative: /item Site Page

Use when native Add collection page fails on your site.

  1. In CMS Collections, choose Set up /item item page on the collection (creates Dynamic page slug).
  2. In the editor, place Dynamic Page on the app Site Page (/item, or /item-1, /item-2, … when you add another Dynamic Page from Installed Apps).
  3. Set Page path to that page’s prefix — item for /item/jane-doe, or item-1 / item-2 for additional Site Pages.
  4. Set Page link field to Dynamic page slug.
  5. Optionally pick a Preview item. Live pages always use the URL slug.

Downsides: the prefix cannot be renamed. You can add the /item page to the sitemap, but individual item URLs are not listed automatically like native collection item pages.

An /item page already on the site

Existing /item pages from earlier app versions keep working with the same Page path and Dynamic page slug settings.

Hint in the panel: Editor only — live pages use the URL slug.

Payments

Where: Settings → Payments (Pro)

Catalog payments on the item page are separate from Form pay-on-submit. Full catalog setup: Catalog payments.

  1. Connect a collection in Content first.
  2. If the collection is not a catalog yet, use Enable payments.
  3. When the catalog is ready, turn on Show payment actions.
  4. Under Actions, enable Add to cart and/or Buy now.
  5. Expand each action to set Label, After add to cart (for Add to cart), and button style.

Without Pro, the section shows an upgrade prompt and payment actions stay unavailable.

Formatting

Where: Manual overview → Formatting drill row → expand a field by its display name

Where: Settings → Formatting → expand a field by its display name

Requires fields selected in Content. Full reference for Address, Color, Video, references, empty states, and date options: Field formatting.

Layout

Where: Settings → Layout

  1. Set Mode:
    • Preset — then pick Hero, Split, Stack, or Minimal
    • Custom — click Arrange fields and drag fields on a grid (same idea as custom Repeater cards)
    • HTML / CSS — write markup with {{…}} field tokens, plus CSS; Reset template restores the default
  2. For Preset and Custom, adjust Gap (px) and Padding (px).

Design

Where: Settings → Design

Set Background for the item template surface.

Per-item SEO

Where: Settings → SEO

Map collection fields so each item URL can have its own search and social preview:

  1. Title field — text field (or None)
  2. Description field — text field (or None)
  3. Share image field — image field (or None)

Recommended for public portfolios, directories, and listings. Walkthrough: SEO for CMS item pages.

Item pages are most useful when listings link into them.

Where (on Repeater, Table, Slideshow, Media Gallery, or Calendar): that widget’s Settings → Dynamic page

  1. Connect the same collection as this Dynamic Page.
  2. Turn on Link to item page (wording may vary slightly by widget).
  3. Set Page path to the same path as the item page (for example fruits). Set Page link field to Item slug.
  4. Choose how the click works for that widget (whole card/row, button, image, …).

Clicks then open that item’s URL on this template (for example /fruits/apple).

Another collection

Each collection gets its own native dynamic page:

  1. Open that collection and choose More actions → Add collection page.
  2. Add Dynamic Page to the new page and configure Content, Dynamic page, Layout, and the rest as above.
  3. Set Page path on the widget and on every linked display to that page’s path.