# Featured collection
The **Featured collection** block displays products from a selected collection as either a swipeable carousel or a fixed grid. Use it to showcase **best sellers, new arrivals, seasonal products, featured categories, or other curated product groups** directly within a section.
Choose a collection, control how many products are displayed, and customize the layout, spacing, carousel behavior, mobile presentation, size, and appearance.
## Settings
### General
| Setting | Description | Options |
| ----------------- | ---------------------------------------------------------------------- | ---------------------------------------------------------------------- |
| **Collection** | Selects the collection whose products are displayed. | Select a collection. Leave blank to display placeholder product cards. |
| **Product count** | Controls how many products from the selected collection are displayed. | **1–12 products** |
### Layout
Controls how products are arranged on desktop.
| Setting | Description | Options |
| ------------------ | ------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------- |
| **Type** | Controls how the products are displayed. | **Carousel:** Displays products in a horizontal carousel.
**Grid:** Displays products in fixed rows. |
| **Columns** | Controls the number of product cards displayed per row on desktop. | **2–4 columns** |
| **Horizontal gap** | Controls the horizontal space between product cards. | **0–100px** |
| **Vertical gap** | Controls the vertical space between product rows. | **0–100px**
*Available when* ***Type*** *is set to* ***Grid***. |
### Carousel settings
Controls the navigation and edge behavior of the carousel.
*Available when **Type** is set to **Carousel**.*
| Setting | Description | Options |
| --------------------- | ---------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Controls position** | Controls where the carousel navigation is displayed. | **In header:** Displays arrows and the slide counter beside the block heading.
**Below carousel:** Displays the navigation below the product carousel. |
| **Control type** | Controls which navigation controls are displayed below the carousel. | **None, Dots, Arrows + dots, Floating arrows, or Floating arrows + dots**.
*Available when* ***Controls position*** *is set to* ***Below carousel***. |
| **Control alignment** | Controls the horizontal alignment of the navigation below the carousel. | **Left, Center, or Right**.
*Available when* ***Controls position*** *is set to* ***Below carousel*** *and a control type is selected.* |
| **Overflow content** | Controls whether product cards extending beyond the carousel area remain visible. | **Hidden:** Clips content at the block edges.
**Visible:** Allows upcoming cards to remain visible beyond the block edges. |
| **Show edge fade** | Adds a soft fade at the side edges of the carousel to indicate additional content. | **On** or **Off**. |
### Mobile layout
Controls how products are arranged on mobile devices.
| Setting | Description | Options |
| ---------------------------- | ----------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
| **Enable swipe on mobile** | Allows shoppers to swipe horizontally through product cards on mobile. | **On** or **Off.** |
| **Show edge fade on mobile** | Adds a soft fade at the row edges to indicate that more products can be swiped into view. | **On** or **Off**.
*Available when* ***Type*** *is set to* ***Carousel*** *and* ***Enable swipe on mobile*** *is turned on.* |
| **Custom column width** | Allows you to set a custom width for each product card on mobile. | **On** or **Off**.
*Available when* ***Enable swipe on mobile*** *is turned on.* |
| **Custom width** | Controls each product card's width as a percentage of the screen. | **20–90%**.
*Available when* ***Custom column width*** *is turned on.* |
| **Mobile columns** | Controls the number of product cards shown per row on mobile. | **1 column** or **2 columns**.
*Available when **Custom column width** is off or **Enable swipe on mobile** is disabled.* |
| **Horizontal gap** | Controls the horizontal space between product cards on mobile. | **0–100px**. |
| **Vertical gap** | Controls the vertical space between product rows on mobile. | **0–100px**.
*Available when* ***Enable swipe on mobile*** *is turned off.* |
### Size
Controls the width of the **Featured collection** separately for desktop and mobile.
| Setting | Description | Options |
| ----------------------- | ---------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- |
| **Width** | Controls the width of the Featured collection on desktop. | **Fill:** Fills the available width.
**Custom:** Lets you set a custom width.
|
| **Custom width** | Sets the block width on desktop as a percentage. | **0–100%**.
*Available when **Width** is set to **Custom**.* |
| **Width mobile** | Controls the width of the Featured collection on mobile devices. | **Fill** or **Custom.** |
| **Custom width mobile** | Sets the block width on mobile as a percentage. | **0–100%**.
*Available when **Width** is set to **Custom**.* |
### Appearance
Controls the color scheme, border, and corner shape of the Featured collection.
| Setting | Description | Options |
| ------------------------ | ---------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- |
| **Inherit color scheme** | Controls whether the block uses the color scheme of the surrounding section. | **On** or **Off**. |
| **Color scheme** | Sets a separate color scheme for the block. | Select an available color scheme.
*Available when* ***Inherit color scheme*** *is turned off.* |
| **Border** | Controls whether the block has an outline. | **None** or **Solid** |
| **Border width** | Controls the thickness of the block border. | **0–3px**.
*Available when **Border** is set to **Solid**.* |
| **Border opacity** | Controls how solid or transparent the block border appears. | **0–100%**.
*Available when **Border** is set to **Solid**.* |
| **Corner radius** | Controls how rounded the block corners are. | **0–20px**. |
### Padding
Controls the space between the edges of the **Featured collection** and its content. Set padding separately for desktop and mobile.
| Setting | Description | Options |
| ----------- | ------------------------------------------------------------- | ------------------------- |
| **Devices** | Selects which device-specific padding values you are editing. | **Desktop** or **Mobile** |
| **Top** | Controls the space above the block content. | **0–100px** |
| **Bottom** | Controls the space below the block content. | **0–100px** |
| **Left** | Controls the space to the left of the block content. | **0–100px** |
| **Right** | Controls the space to the right of the block content. | **0–100px** |
## Featured collection — items
The **Featured collection** automatically includes one built-in static **Product card** block. It is used automatically for every product displayed from the selected collection, so you don’t need to add, remove, or reorder Product card blocks manually.
### Product card
The **Product card** represents each product displayed in the Featured collection.
This built-in static block does not have settings inside the Featured collection. Its layout, content, and appearance are configured globally in **Theme settings >** [Product cards](https://docs.foxecom.com/motrix-theme/theme-settings/product-cards).
## Tips and best practices
* Choose **Carousel** to display more products in a compact, swipeable row. Use **Grid** when you want products shown in fixed rows and visible at once.
* On mobile, turn on **Custom column width** and use a narrower card width to let the next card peek into view. You can also enable **Show edge fade** to reinforce that more products are available off-screen.
* Leave **Collection** blank while setting up the page to display placeholder product cards and preview the layout.