# Collection list page

<figure><img src="https://1556176885-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPgk3wauuyAKlfkLLpBvA%2Fuploads%2F6i2NKGuJ7MUGksVs1aol%2Flist.jpg?alt=media&#x26;token=bf4ea854-f0e1-47d4-a93e-420c2712bd93" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
**Steps:**

1. In the theme editor (**Customize**), open the template selector.
2. Select **Collection list.**
3. On the left-sidebar, add **Collection list page.**
4. Make necessary changes > **Save.**
   {% endhint %}

## General settings

<figure><img src="https://1556176885-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPgk3wauuyAKlfkLLpBvA%2Fuploads%2FKBtY7VhRHieNGy9JvF0t%2Flist-1.jpg?alt=media&#x26;token=683a5737-8d63-4442-b6df-06d26205b949" alt=""><figcaption></figcaption></figure>

* **Width** - With of this section 3 options : Container / Stretched / Full width
* **Subheading**&#x20;
* **Heading** - Heading of this section
* **Heading size** - From h1 to h6
* **Description** - Description of this section
* **Layout** - *Horizontal / Vertical*

### Grid settings

<figure><img src="https://1556176885-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPgk3wauuyAKlfkLLpBvA%2Fuploads%2Fssq6SXQY3kFB8kGSVFem%2Flist-3.jpg?alt=media&#x26;token=ffb69afd-09fe-4807-a5ac-d5b8b3ec9106" alt=""><figcaption></figcaption></figure>

* **Show collection** - All / Selected. *All of your collections are listed by default. To customize your list, choose 'Manual' and add collections.*
* **Sort collections by** - Apply to Collection to show is 'All'
* **Collections per page**
* **Collection per row (desktop)**
* **Collection per row (mobile)**

### Collection card

<figure><img src="https://1556176885-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPgk3wauuyAKlfkLLpBvA%2Fuploads%2F1vgKJodJK0W3dtmILKBB%2Flist-4.jpg?alt=media&#x26;token=93f505b8-655e-4c1c-b539-5ff694c54f40" alt=""><figcaption></figcaption></figure>

* **Card style - Standard** / Content inside with overlay /  Content inside with button
* **Image ratio -** Adapt to image / Square (1:1) / Portrait (3:4) / Landscape (4:3) / Landscape (5:3.5) / Wide (16:9)
* **Show product count**
* **Content alignment -** Left / Center / Right
* **Title color**
* **Overlay color**
* **Enable gradient overlay**
* **Overlay opacity**

### **Colors**

* Background&#x20;
* Text color

### Section padding

* **Top padding**
* **Bottom padding**

## **Block Settings**

{% hint style="success" %}
To customize your list, choose **Selected** and add a collection bloc&#x6B;**.**
{% endhint %}

<figure><img src="https://1556176885-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPgk3wauuyAKlfkLLpBvA%2Fuploads%2FDk6r6MeR6Z0xxAUPTG9S%2Flist-5.jpg?alt=media&#x26;token=a99f59c3-1e31-43b2-a50b-0ec6a8a3a6e1" alt=""><figcaption></figcaption></figure>

Each Collection Block has its own settings such as Heading, image, and collection link to choose from.

<figure><img src="https://1556176885-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPgk3wauuyAKlfkLLpBvA%2Fuploads%2FrtYAnHp69HcrkJrjgt2U%2Flist-block.jpg?alt=media&#x26;token=6ee8d6f1-6db4-412b-8a7d-c4f4ae781e4e" alt=""><figcaption></figcaption></figure>
