> 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/collection-list.md).

# Collection List

The **Collection List** section displays multiple product collections in card format. It’s ideal for homepage category navigation, promotional campaigns, or brand series highlights.

<figure><img src="https://3867724846-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5cjsG9gBFSIZ5CisPtcx%2Fuploads%2FAlNtHSo3oURcqV7M5Y2n%2F1754555802320.jpg?alt=media&amp;token=95b0c4fe-23dc-4337-8e97-62524c63daf1" alt=""><figcaption></figcaption></figure>

### 🎨 Color Scheme

* **Color Scheme**: Choose or edit a theme to define background, text, and button colors. Recommended to align with your brand identity.

***

### 🧱 Card Settings

* **Card Size**: Select *Small*, *Medium*, or *Large* to control the number of collections displayed per row responsively.
  * Small: Best for displaying many collections
  * Large: Emphasizes individual collections visually
* **Image Ratio**: Choose between 1:1, 4:5, and 8:5 to maintain layout consistency
* **Alignment**: Set text alignment within the card (Left, Center, Right)
* **Display Product Count**: Show the number of products within each collection to help set user expectations

***

### 🧱 Block Configuration

* **Block Title**: Add a main title and subtitle to introduce the section
* **Supported Content Blocks**:
  * Badge Group, Buttons, Button Group, Countdown, Description, Discount Code, Follow Us
  * Title, Subtitle, Featured Stats, Icons, Icon with Text, Keywords
  * Link Group, Social Media List, Video Button, Spacers, etc.

***

### 🗂️ Collection List Configuration

* **Slider Options**:
  * Enable slider mode separately for desktop and mobile
  * Support for **navigation buttons** and **progress bar** to enhance UX

***

### 🧷 Individual Collection Block

Each collection item allows the following:

* **Select Collection**: Bind to a specific Shopify collection
* **Upload Image**: Represents the collection visually
* **Collection Title**: Custom label for the displayed collection

***

### ✅ Tips for Effective Use

* Use **Small** cards for dense layouts and **Large** cards for bold, spacious designs
* Keep image aspect ratios consistent across all cards
* Avoid long titles to maintain clean mobile presentation
* For sliders, enable navigation buttons to ensure user-friendly browsing
* Pair background image and opacity with color scheme for dynamic visual appeal