How to create a page for each item (details pages)

In TeleportHQ, a details page is one page design that becomes a separate page for every item in a list, for example /products/blue-shirt and /products/red-dress. Open a page's menu, turn on Is Details Page, choose the list it shows (a database table, a REST API, a Google Sheet or a CSV file), and design the page once with elements bound to the current item. With a headless CMS, TeleportHQ can also create list and details pages for you.

Before you start#

• Connect a data source that returns a list. See What are data sources, and which ones can I connect?
• The list needs a field that is unique and filled in for every item, like slug or id. It becomes the last part of each page's address.

Turn a page into a details page#

1. In the left sidebar, click Pages, Components & Tree View.
2. Create a page for the item design, for example Product. See How to add a new page.
3. In the pages list, right-click the page, or click the ⋯ at the right of its row.

4. Click Is Details Page. The Select Source panel opens beside the menu: "Choose the list this details page renders one page per item of."

   

5. Click the list the page should show, for example products. Sources that don't return a list are greyed; point at one to read why, for example "This data source does not return a list of items".
6. If TeleportHQ finds a good address field (one that is filled in and unique, like slug), it picks it for you and you're done. Otherwise the Select URL Field panel opens: click the field for the address. Each field shows its type and notes such as recommended, may be empty, not unique or missing on some items. Pick a recommended one.

The page's menu now shows Is Details Page turned on and a Source row such as products (slug). In the pages list, the page gets a details-page icon (tooltip Details Page (dynamic route)).

Design the details page#

1. Open the details page on the canvas.
2. At the top left of the canvas, click the item button (it reads, for example, products: Chocolate cake, or Select an item) and pick the item to preview.
3. Add elements, for example a heading, an image and a description.
4. Bind each one to the current item's fields: click the plug icon next to the field in the right panel and pick the value. See How to show data from a data source on your pages.

Every item's page uses this design with its own data.

Set the page title and description for search engines#

1. Right-click the details page in the pages list.
2. Click Page SEO Settings.
3. Under URL, check the address and the Link Example, for example /products/chocolate-cake.
4. Under Meta Settings, next to Meta Title, click Bind to dynamic value and choose the item's name under Current Products.
5. Do the same for Meta Description.

Now each item's page has its own title in Google results. This works for details pages built on a database table, a REST API or a Google Sheet. See How to set a page's title and description for Google.

Link list items to their details page#

1. On a list page, select the card's link or button, for example View details.
2. In the small toolbar above the selected element, click the link button.
3. Open the Page tab and, under Details Pages, click your details page.
4. In the … value: box, click Bind dynamic value and pick the list item's address field, for example slug.
5. Click Apply.

Each card now opens its own item's page.

Create CMS list and details pages#

When your TeleportHQ project is connected to a headless CMS, TeleportHQ can build the pages for each content type:

• While connecting: in Generate CMS Pages, tick content types and click Complete Setup. See How to connect a headless CMS.
• Later: in Pages, Components & Tree View, right-click the folder that should hold the pages, point at New Page and choose New CMS Page. In the Create CMS Page window, pick CMS List Pages or CMS Details Pages, tick the content types, and click Create CMS Pages. A message confirms "List page(s) created successfully" or "Details page(s) created successfully". If a content type is missing, sync it first from the CMS connection's menu.

CMS pages are listed under Collection Pages, in List Pages and Details Pages. A CMS list page shows every entry; a CMS details page shows one entry per address. To change a CMS details page's address or SEO, right-click it and choose Page SEO Settings.

Check that it worked#

Publish your site and open a details page address, for example /products/chocolate-cake. Each item shows its own content. In the editor, switch items with the item button at the top left of the canvas to check that every binding updates.

Troubleshooting#

Is Details Page is greyed out: "Add a data source to enable details pages" The project has no data source. Add one first.

Is Details Page is greyed out: "Managed by …" The page belongs to a feature, such as the Blog, the E-Commerce store or Custom Pages, which manages its details pages for you.

Two items open the same page The address field isn't unique. Point at the Source row in the page's menu: the Change Differentiator panel opens. Pick a unique field such as id or slug.

"Details page is missing it's main CMS Item node. Please regenerate the page" A CMS details page lost its main CMS Item. Delete the page and create it again with New CMS Page.

"The content type of this listing page no longer exists. If that is intentional, this page can be deleted. Otherwise the content type needs to be restored." The content type was deleted in your CMS. Restore it in the CMS, or delete the page.

Good to know#

• Search engine texts: a typed Meta Title gets a warning past 70 characters and a typed Meta Description past 160 (it stops at 200).
• Disconnecting a CMS removes all CMS list and details pages.