# Personalized Re-ordering of Sections

> Source: https://docs.recombee.com/recipes/e-commerce/fully-personalized-homepage/personalized-re-ordering-of-sections-advanced

> 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 Re-ordering of Sections

![](/img/recipes/e-commerce/personalized-re-ordering-of-sections-advanced.png) 

## Introduction

Create a truly personalized homepage by selecting the top categories for each user and displaying a dedicated section for each — featuring the most appealing products from those categories, tailored to their preferences.

With [Composite Recommendations](/scenarios#composite-recommendations), you can easily personalize both:

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

## Composite Recommendations Overview

**Composite Recommendations** return both a _source entity_ (for example, a [category Segment](/segmentations)) and a list of _results_ (items 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 section, e.g., the _category_ (Item Segment)
* **Result:** Items (products) for that section

[![Category Sections Setup](/img/gui/composite_items_from_category.png)](/img/gui/composite_items_from_category.png)

Because the source is personalized (which categories the user likes) and the results are personalized (which products within those categories they like), you get dynamic section ordering and item ordering in one request.

## Segmentation Setup

Start by creating a **Segmentation** of your products based on their category.

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

1. Choose **Segmentation Type** – _Property-based_.
2. Select the item property (e.g., `category`) that defines the product category.

![Admin UI - Segmentation Setup](/img/recipes/e-commerce/personalized-re-ordering-of-sections-advanced-segmentation-setup.png)

Once the property is selected, a preview opens where you can see which categories exist in your catalog and how many products belong to each.

![Admin UI - Segmentation Setup - Preview](/img/recipes/e-commerce/personalized-re-ordering-of-sections-advanced-segmentation-setup-preview.png)

## Scenario Setup

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

1. Choose a **Scenario ID**, e.g. `homepage-sections-and-products`.
2. Set the **Recommendation Type** to **Composite** (see [Composite Recommendations](/scenarios#composite-recommendations)).
3. Then pick one of the [ecommerce:products-from-top-category-for-you](/recommendation_logics#ecommerce-products-from-top-category-for-you) **Template**.

![Admin UI - Scenario Setup](/img/recipes/e-commerce/personalized-reordering-of-sections-create-scenario.png)

## Filters

You may want to apply additional filters to ensure only available or visible products are recommended.

Available Products (Global Settings)

You always want to recommend only the products that are in stock. Therefore you need to apply a [**Filter**](/scenarios#filters) rule to allow only such products.

As it would be tedious and prone to error to add this rule to all the Scenarios, this rule shall be added to the [**Global Settings**](/scenarios#scenarios-in-admin-ui-global-settings), so it is always applied everywhere.

You can select a **predefined rule from the Recombee Library** to allow only the available products.

Depending on how you represent availability in the catalog, it can be **one of the following rules:**

* **Not deleted items** \- when you have a _deleted_ property (true/false)
* **Available items** \- when you have an _available_ property (true/false)
* **Items in stock \[Google Merchant\]** \- when you have a string _available_ property with _"in stock"_ as its value

![Admin UI - Global Settings - Filter](/img/recipes/e-commerce/filter.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 products 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_ (products) to create a fully personalized 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 products inside it with `ItemComponent`.

Multiple widgets on one page are deduplicated automatically, for products 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)