Displaying collections on a site
A collection that you create in the Constructor dashboard does not create a page on your site. Constructor stores the collection, and it selects and ranks its products. Your site requests these results and shows them. This guide explains the requests, the data that they return, and the tracking that a collection page needs.
For an introduction to collections, see Learn about Collections.
Before you start
You need these items:
- The collection ID. The dashboard shows it under the collection name in the Collections workspace.
- A site that already requests browse results from Constructor. A collection page is a browse page, so it uses the same integration.
- The beacon on your site. Loading the beacon explains how to load it.
Request the products in a collection
To get the ranked products in a collection, send a request to the Retrieve by collection ID endpoint:
curl 'https://ac.cnstrc.com/browse/collection_id/summer-wedding?key=YOUR_API_KEY&i=CLIENT_ID&s=SESSION_ID&c=cio-fe-web-YOUR_COMPANY'Replace summer-wedding with your collection ID, and YOUR_COMPANY with your company name in lowercase. The request takes the same parameters as other browse requests, for example page, num_results_per_page, filters, and sort_by. Required parameters lists the values that each request must send.
If you use a client library, call its browse method. Use collection_id as the filter name and the collection ID as the filter value. Client libraries / SDKs links to the documentation for each library.
Constructor ranks the products for each user. Two users can see the same collection in a different order.
Use the collection data on the page
The response has the products in response.results, and the facets and sort options for the page. It also has a response.collection object with these fields:
idis the collection ID.display_nameis the name to show to users, for example as the page heading.datahas the metadata that your team added to the collection, for example a description, a banner image, or SEO text.start_timeandend_timeare the schedule of the collection, as ISO 8601 strings, for example2026-10-30T21:59:00+00:00. A collection without a start time or an end time hasnullfor that value.
Use these fields to build the page. You do not need to store the collection name or metadata on your own servers. When a merchandiser changes them in the dashboard, the next response has the new values.
List the collections
To show a list of collections, for example in a navigation menu, send a request to the Retrieve collections endpoint:
curl 'https://ac.cnstrc.com/browse/collections?key=YOUR_API_KEY&i=CLIENT_ID&s=SESSION_ID&c=cio-fe-web-YOUR_COMPANY'Each item in response.collections has the same id, display_name, and data fields. Use id to build the link to each collection page.
Track the collection page
A collection page sends the same events as a browse page. The difference is the filter name and the filter value:
- The filter name is
collection_id. - The filter value is the collection ID.
If you use the beacon, set these attributes on the results container:
<div
data-cnstrc-browse
data-cnstrc-num-results="TOTAL_NUM_RESULTS_FROM_THE_RESPONSE"
data-cnstrc-result-page="CURRENT_PAGE_FROM_THE_REQUEST"
data-cnstrc-result-id="RESULT_ID_FROM_THE_RESPONSE"
data-cnstrc-filter-name="collection_id"
data-cnstrc-filter-value="summer-wedding">
...
</div>Data-driven event tracking lists all the attributes for a browse page, including the attributes for each product tile.
For events from a client library or the API, send collection_id as the filter name in each browse event.
Do not track a collection page as a generic results page. Generic results events are for pages that Constructor does not power. Constructor powers a collection page through the browse API, so the page sends browse events.
Scheduled collections
A merchandiser can schedule a collection with a start time, an end time, or both. Outside that time window, Constructor operates as if the collection does not exist.
Outside the time window, /browse/collection_id/ returns a 404 with the message collection with ID <id> not found. This is the same response as for a collection that does not exist. /browse/collections does not list the collection.
Your page must handle this case. A link to the collection can stay on your site after the end time, for example in an email or a saved bookmark. If the request returns a 404, show a message or send the user to a related page. Do not show an empty page.
Make sure that the page works
- Open the collection page on your site.
- In the network tab of the browser developer tools, find the request to
/browse/collection_id/. Make sure that the collection ID in the URL is correct. - Make sure that the products on the page are the products in the response, in the same order.
- Make sure that the browse events send
collection_idas the filter name and the top-levelresult_idvalue from the browse response. - In the dashboard, open the collection in Interact. Compare its results with your page.
Updated about 1 hour ago