> For the complete documentation index, see [llms.txt](https://mpithemes.gitbook.io/triumph/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mpithemes.gitbook.io/triumph/template/sections/collection-list.md).

# Collection list

Display a selection of your store’s collections in a structured layout. Use this section to help customers quickly browse product categories and navigate to different parts of your store.

*Shared Settings*:

* [<mark style="color:$primary;">'View All' button</mark>](/triumph/template/shared-settings/view-all-button.md)
* [<mark style="color:$primary;">Card text</mark>](#card-text)
* [<mark style="color:$primary;">Card image</mark>](#card-image)
* [<mark style="color:$primary;">Card attributes</mark>](#card-attributes)
* [<mark style="color:$primary;">Section layout</mark>](/triumph/template/shared-settings/section-layout.md)
* [<mark style="color:$primary;">Section mobile layout</mark>](/triumph/template/shared-settings/section-mobile-layout.md)
* [<mark style="color:$primary;">Divider line</mark>](/triumph/template/shared-settings/divider-line.md)
* [<mark style="color:$primary;">Section background</mark>](/triumph/template/shared-settings/section-background.md)
* [<mark style="color:$primary;">Colors</mark>](/triumph/template/shared-settings/colors.md)
* [<mark style="color:$primary;">Card colors</mark>](#card-colors)
* [<mark style="color:$primary;">Hover card colors</mark>](#hover-card-colors)
* [<mark style="color:$primary;">Carousel buttons colors</mark>](/triumph/template/shared-settings/carousel-buttons-colors.md)
* [<mark style="color:$primary;">'View All' button colors</mark>](/triumph/template/shared-settings/view-all-button-colors.md)

*Shared Blocks:*

* [<mark style="color:$primary;">Heading</mark>](/triumph/template/shared-blocks/heading.md)
* [<mark style="color:$primary;">Collection</mark>](/triumph/template/shared-blocks/collection.md)

***

**Collection**\
Select a collection or several collections to display.

* This option replaces collections used in the [<mark style="color:$primary;">Collection</mark>](/triumph/template/shared-blocks/collection.md) blocks.
* By default, the section shows a collection image linked in the *Shopify admin -> Products -> Collections* or an image of the first product in the collection.

***

#### Card text

**Placement**\
Controls where text appears on collection cards.

* **Below image** - Displays text under the image.
* **On image** - Places text directly over the image.

**Alignment**\
Choose how titles are aligned: Left or Center.

**Heading size**\
Set the size of collection titles (15–20 px).

***

#### Card image

Use the '**Aspect ratio**' drop-down to choose the shape of collection cards:

* **Adapt to image** – Keeps each image’s original proportions
* **Squared** – Displays images in a 1:1 ratio.
* **Portrait** – Taller images (3:4 ratio).
* **Landscape** – Wider images (4:3 ratio).

***

#### Card attributes

**Show product quantity**\
Displays the number of products in each collection.

**Show 'View all' button**\
Adds a call-to-action button that links to the *Collection list page*.

***

#### Card colors

Controls the appearance of colors on collection cards:

**Text background**\
Sets the background color behind the text.

**Text**\
Sets the text color.

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FV9rFyjoQqm3UJPBAYfcK%2Fcollection%20list_card%20colors.png?alt=media&amp;token=2fbafe78-ce88-47ec-a6cd-006397864556" alt=""><figcaption></figcaption></figure>

***

#### Hover card colors

Controls how cards look when hovered.

**Change colors on hover**\
Enables custom hover styles.

**Hover background**\
Sets the background color on hover.

**Text**\
Adjusts the text color on hover.

**Button**\
Changes the button style and color on hover.

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FG8ayrDxnKbiRjoEuHz7G%2Fcollection%20list_hover%20card%20colors.png?alt=media&amp;token=10f063d1-f093-4274-a52b-e4b1f320a8d0" alt=""><figcaption></figcaption></figure>

***

{% tabs %}
{% tab title="Desktop" %}

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FgJ7HpFvhOgU8LOA1iiS9%2Fcollection%20list_desktop.png?alt=media&amp;token=642f2ffa-2605-4efb-9502-e5c7ae50ec58" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Mobile" %}

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FrMtsN9JeuyqPtgxx4SFM%2Fcollection%20list_mobile.png?alt=media&amp;token=4589adf0-d3df-42f5-9c5d-59075b5229d7" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}