> For the complete documentation index, see [llms.txt](https://webvista-studio.gitbook.io/krank/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://webvista-studio.gitbook.io/krank/sections/product-and-collection/featured-product-grid.md).

# Featured Product Grid

The **Featured Product Grid** is ideal for displaying multiple selected products in a clean, card-based layout — perfect for new arrivals, bestsellers, or themed product collections.

<figure><img src="https://3867724846-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5cjsG9gBFSIZ5CisPtcx%2Fuploads%2FeUlW9mj4iyi8N7Yjmd4u%2F7fff1814e4ac4935077ed8d4bc656438.png?alt=media&amp;token=4840cb98-a330-4d82-979b-b1c9a58de578" alt=""><figcaption></figcaption></figure>

### 🎨 Color Scheme

* **Choose or edit a color scheme** to define background, text, and button colors.
* **Tip**: Match your brand colors for a consistent look.

***

### 🧱 Block Components

* **Content Blocks**: Badge group, button, button group, countdown timer, description, discount code, follow us, heading, key stats, icon, icon with text, keywords, link group, social media list, subheading, video button, spacer.
* **Product Grid**:
  * Select a collection.
  * Limit product quantity (5–20; 6 recommended for best visual balance).

***

### 🗂 Card Settings

* **Card Size**: Small / Medium / Large (affects the number of columns per row).
* **Image Ratio**: 1:1, 4:5, or 8:5.
* **Alignment**: Left, Center, Right.
* **Card Container**: Apply a color scheme for styling.

***

### 📱 Mobile

* Enable slider mode for horizontal swiping on mobile devices.

***

### ✅ Best Practices

1. Combine the **Product Grid** with a **Countdown Timer** for urgency.
2. Use **1:1** or **4:5** image ratios if product images vary in size.
3. Enable the mobile slider to reduce scrolling length.
4. Keep the number of products between 6–8 for optimal user browsing.