# Inline card carousel

The **Inline card carousel** section presents a layout with a featured product on the left and a horizontally scrollable carousel of product cards on the right. It’s ideal for visually linking a highlighted product with complementary or related products in a compact and engaging layout.

This is a **preset section** — it can be added, removed, and reordered.

<figure><img src="https://content.gitbook.com/content/9icwdCUv3B94Yb9tmqHW/blobs/3HEfWH2o7GbMChwhUUmH/image.png" alt=""><figcaption></figcaption></figure>

***

#### How to Configure the Inline Card Carousel

1. In Shopify admin, go to **Online Store → Themes**.
2. Click **Customize** next to the **Elemento** theme.
3. In the theme editor, navigate to the desired page template (e.g., Home page) using the top preview dropdown.
4. In the left sidebar, click **Add section**, then select **Inline Card Carousel**, or locate it if it’s already added.
5. You can **drag and drop** this section to reorder it on the page.
6. Click **Save**.

#### Section Settings

| **Setting**      | **Type**       | **Description**                                                                |
| ---------------- | -------------- | ------------------------------------------------------------------------------ |
| Heading          | Text           | Main heading displayed above the section.                                      |
| Product          | Product picker | The featured product shown on the left side.                                   |
| **Product card** |                | Group of settings related to carousel item display.                            |
| Image ratio      | Select         | Aspect ratio for product images: **Adapt to image**, **Square**, **Portrait**. |
| Color scheme     | Color scheme   | Sets the color styling for this section.                                       |

**Section Padding**

| Device      | Setting        | Type  | Description                              |
| ----------- | -------------- | ----- | ---------------------------------------- |
| **Desktop** | Top padding    | Range | Space above the section on desktop view. |
| **Desktop** | Bottom padding | Range | Space below the section on desktop view. |
| **Mobile**  | Top padding    | Range | Space above the section on mobile view.  |
| **Mobile**  | Bottom padding | Range | Space below the section on mobile view.  |

***

#### Blocks

**Block: Card**

Used to add individual products to the right-hand carousel. Multiple cards can be added and reordered.

| **Setting** | **Type**       | **Description**                         |
| ----------- | -------------- | --------------------------------------- |
| Product     | Product picker | The product to display in the carousel. |
