# Featured product

### Section overview

The Featured Products section displays a customizable grid of highlighted products with multiple images from a selected collection.

#### Common use cases

* Showcase bestselling or seasonal products on the homepage
* Feature new arrivals in a visually appealing grid layout
* Highlight products with special promotions or discounts
* Create curated product collections for specific customer segments

#### Usage tips

* Select products with at least 4 high-quality product photos for the best visual presentation
* Customize the grid layout based on your store design (2-4 columns for desktop, 1-2 for mobile)
* Use consistent product photography style for a cohesive look
* Balance the number of featured products with page load times for optimal performance
* Test different color schemes and border styles to match your brand aesthetic
* Ensure product titles and details are clearly visible on mobile devices

### Section settings

| Setting           | Description                                                                            |
| ----------------- | -------------------------------------------------------------------------------------- |
| Collection        | The product collection to display in the grid                                          |
| Total items       | The maximum number of products to display (default: 3)                                 |
| Heading           | The title text for the section                                                         |
| Content           | Descriptive text for the section (supports rich text formatting)                       |
| Button label      | Text to display on the section's call-to-action button                                 |
| Button URL        | The destination URL when the button is clicked                                         |
| Spacing top       | Amount of vertical space above the section (0-300px, default: 100px)                   |
| Spacing bottom    | Amount of vertical space below the section (0-300px, default: 100px)                   |
| Color scheme      | Background and text color combination for the section                                  |
| Border color      | Color of section borders (subtle or strong)                                            |
| Button color      | Color style for the section's button (primary, secondary, tertiary, neutral, or plain) |
| Border position   | Position of section borders (none, top, bottom, or both)                               |
| Desktop columns   | Number of product columns on desktop devices (2-4, default: 3)                         |
| Mobile columns    | Number of product columns on mobile devices (1-2, default: 1)                          |
| Content alignment | Horizontal alignment of section content (left, center, or right)                       |
| Visibility        | Device visibility options (all devices, mobile only, or desktop only)                  |

### Block settings

This section does not contain any customizable blocks.