# Personalized Sections With Reordering

> Source: https://docs.recombee.com/recipes/news/homepage/personalized-sections-with-reordering

> For the complete documentation index, see [llms.txt](/llms.txt).

**Table of contents**

* [Introduction](#introduction)
* [Composite Recommendations Overview](#composite-recommendations-overview)
* [Segmentation Setup](#segmentation-setup)
* [Scenario Setup](#scenario-setup)
* [Filters](#filters)
* [Requesting Recommendations](#requesting-recommendations)

# Personalized Sections With Reordering

![](/img/recipes/news/personalized-sections-with-reordering.png) 

## Introduction

Modern news homepages often display multiple topical sections (e.g., _World_, _Politics_, _Technology_, _Sports_). You can make these sections fully personalized by determining:

1. The **order of sections** (so categories appear in the order each reader is most interested in), and
2. The **articles inside each section** (so that within each category, the user sees the most relevant content).

With [Composite Recommendations](/scenarios#composite-recommendations), both of these steps can be done in one setup — producing a homepage that’s unique for every reader.

---

## Composite Recommendations Overview

**Composite Recommendations** return both a _source entity_ (for example, a [category Segment](/segmentations)) and a list of _results_ (articles from that Segment) in a single response.

They are requested via the [**Composite Recommendation API endpoint**](/api#composite-recommendation).

In our case:

* **Source:** ID of the homepage section, e.g., the _category_ (Item Segment)
* **Result:** Articles from that category

[![Composite Recommendations - News Example](/img/gui/composite_items_from_category.png)](/img/gui/composite_items_from_category.png)

Because the source is personalized (which categories the reader cares about) and the results are personalized (which articles within those categories they like), you get dynamic section ordering and personalized content within each section — all in one request.

## Segmentation Setup

Start by creating a **Segmentation** based on the item property that represents article categories (e.g., `category` or `categories`).

In the Recombee Admin UI, navigate to **[Segmentations](/segmentations)** → **Create**.

1. Choose **Segmentation Type** – _Property-based_.
2. Select the **property** that holds the article’s category information.

![Admin UI - Segmentation Setup](/img/recipes/news/categories-segmentation.png)

After picking the property, a preview opens up and you can see what categories exist in your catalog and the number of items per category.

If your sections are defined more dynamically (for example, using multiple properties), you can use [Advanced Segmentation options](/segmentations#advanced-creating-segmentations).

## Scenario Setup

Go to **Scenarios** → **Create Scenario**.

1. Choose a **Scenario ID**, e.g. `homepage-sections-and-articles`.
2. Set the **Recommendation Type** to **Composite** (see [Composite Recommendations](/scenarios#composite-recommendations)).
3. Then pick one of the **Templates**:  
   * [news:articles-from-top-category-for-you](/recommendation_logics#news-articles-from-top-category-for-you)  
   * [news:articles-from-top-segment-for-you](/recommendation_logics#news-articles-from-top-segment-for-you)  
depending on how your homepage sections are defined, and create the Scenario.

![Admin UI - Scenario Setup](/img/recipes/news/composite-homepage-sections-articles.png)

## Filters

You may want to apply additional filters to ensure only relevant or recent content appears in each section.

Tip: Recent Articles Only

To ensure relevance, filter for articles published in the last few days:

1. Navigate to the **[Filters](/scenarios#filters)** tab and **Add first filter** into the **Result** section.
2. Choose _Recent items_ and click **+**.
3. Specify the **property** that represents the publish date.
4. Define the maximum article age (e.g., 3 days).

![Admin UI - Filter - Recent Articles](/img/recipes/news/recent-items-filter-composite.png)

## Requesting Recommendations

There are two ways to show multiple personalized sections in your application:

1. **Using the API Client**

Using an [API Client of your choice](/api_clients), send multiple **[Composite Recommendation requests](/api#composite-recommendation)** within a single **[Batch request](/api#batch)**, with the [distinctRecomms](/api#batch-param-distinctRecomms) parameter set to `true` to deduplicate content across sections.

Tip

Composite Recommendations automatically ensure distinct _source entities_ (categories), while the `distinctRecomms` flag removes duplicate articles between sections.

See [this example](/api#composite-recommendation-example-category-sections-with-reordering) for guidance on how to implement this approach in your programming language.

Once you receive the response, render each _source_ (category) as a section title and populate it with the corresponding _results_ (articles) to create a fully personalized news homepage layout.

1. **Using the Widget SDK**

For web applications built with HTML, CSS and JavaScript, the [Widget SDKs](/widget-sdks) support Composite Recommendations out of the box.

Place one widget per section on your page, each sending its own **[Composite Recommendation request](/api#composite-recommendation)**. Design the section title with the `SourceItemComponent` parameter and the articles inside it with `ItemComponent`.

Multiple widgets on one page are deduplicated automatically, for articles as well as for _source entities_ (categories).

For full code examples and in-depth guidance, see the relevant SDK documentation on Composite Recommendations:

* [Carousel Widget (JS)](/widget-sdks/carousel-widget-js#composite-recommendations)
* [Carousel Widget (React)](/widget-sdks/carousel-widget-react#composite-recommendations)
* [Grid Widget (JS)](/widget-sdks/grid-widget-js#composite-recommendations)
* [Grid Widget (React)](/widget-sdks/grid-widget-react#composite-recommendations)
* [Feed Widget (JS)](/widget-sdks/feed-widget-js#composite-recommendations)
* [Feed Widget (React)](/widget-sdks/feed-widget-react#composite-recommendations)