Index Collection Page

What is an Index Collection Page

An index page is the "homepage" of a collection, where a list of its elements/items will be displayed.

If your project requires an index page, you need to add it manually. For example, you can create a "Services" page that displays data from your services collection.

Creating an Index Collection Page

1. Add an index page

Go to the Pages tab (left panel) and click the New Page button. In the list, select CMS Page , then choose the name of your collection and click on Index Page .

A new page with the name of the collection will be created. The page will already include a predefined structure: Section → Container , with a heading and a Collection widget inside.

You can add one or more additional Collection widgets to the index page and link them to the same or a different collection. However, there can only be one widget with a semantic URL , and it cannot be deleted unless you assign the semantic URL to another widget.

2. Add elements to the Collection widget

Now you need to add interface elements to the Collection widget to display the data from the collection fields.

For example, for a collection element/item like "Services" , you will need two text elements (e.g., service name and price) and an image.

To do this, select Collection Item in the layers and add the required elements to it.

3. Link the collection fields to the elements on the canvas

To transfer data from the collection to the corresponding interface elements, you need to create a link/connection between them.

To do this, select one of the elements inside Collection Item on the canvas or in the layers (e.g., Text ). Go to the Settings tab (right panel) and, in the Dynamic data section, open the Binded field dropdown. By default, the value is set to "None" because the element is not linked to any field.

Select the field you want to link to the element from the list (e.g., "Title" ).

The data from the selected field will automatically populate in this element on the canvas. An icon will appear in the corresponding layer, indicating that the element is linked to the collection field.

Similarly, link the corresponding collection fields to the other elements.

4. Save the changes and publish the page

To apply all changes, save the page ( Ctrl + S ) and click the Publish button, or use the shortcut Ctrl + Shift + S (save and publish).

Semantic URL

A semantic URL is a human- and search-engine-friendly page address that reflects its content. For example, for a services page, it could be: https://sitename/services.

Why is a semantic URL needed

If a collection contains many elements, the list is typically divided into multiple pages with pagination (e.g., 10 elements per page).

A semantic URL is automatically generated for each pagination page. These URLs are indexed by search engines, which positively impacts the website's SEO performance.

For example, for the "Services" collection, the pages with service lists will have URLs like: https://sitename/services/1, https://sitename/services/2, and so on.

How to configure a semantic URL

The semantic URL is automatically assigned to the Collection widget placed on the index page by default. You can see it in the widget settings on the right panel.

If there are multiple Collection widgets on the index page, you can assign a semantic URL to any of them. To do this, go to the widget settings and click the Enable semantic URL button.

Index Page Settings

To access the settings, click on the icon to the right of the page name.

The page settings panel will open.

How do the settings for an index page differ from a standard page

There is a Collection field with the name of the collection based on which the page was created. This field cannot be edited.

Slug field is synchronized with the slug of the collection in its settings.

The page cannot be duplicated.