# Collection list section

{% hint style="success" %}
**Take the following steps:**

* Go to the **Customizer**
* Go to **Collections List**
* Follow the given **screenshots -**
  {% endhint %}

<figure><img src="https://content.gitbook.com/content/bMGVnCsdnFPDX2dCTNWk/blobs/jbocoaY9rQlAHNbSJTBA/collection-list.png" alt=""><figcaption></figcaption></figure>

## Section settings

<figure><img src="https://content.gitbook.com/content/bMGVnCsdnFPDX2dCTNWk/blobs/aKGNm4LeYCH7an9WIFLJ/collection-lits-page.png" alt=""><figcaption></figcaption></figure>

| Settings                                        | Description                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| ----------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Page width**                                  | <ul><li><strong>Boxed</strong>: With boxed width, page content can be displayed within the maximum width. <strong>The page width can be changed in Theme Settings > Layout.</strong></li></ul><ul><li><strong>Full width:</strong> With the "Full width" option, page content can be displayed in its entirety full-width. <strong>When you show content at full width, you can add padding to the left and right sides.</strong></li></ul> |
| <p></p><p><strong>Show collections</strong></p> | <ol><li><strong>All:</strong> If you select all, all collections that you created for your store will be displayed.</li><li><strong>Selected:</strong> If you select it, you can display a specific collection by adding a block.</li></ol><p><img src="https://content.gitbook.com/content/bMGVnCsdnFPDX2dCTNWk/blobs/wmqnOellyTKlvUbFCbIS/custom_collection.png" alt="" data-size="original"><br></p><p></p>                              |
| **Layout**                                      | <ol><li><strong>Grid:</strong> You can display the collection columns in a row of the same size.</li><li><strong>Collage:</strong> You can display the collection columns in a different size.</li></ol>                                                                                                                                                                                                                                    |
| **Number of columns on desktop**                | <p>You can change the number of columns on the desktop.<br><br><strong>Works on the grid layout</strong></p>                                                                                                                                                                                                                                                                                                                                |
| **Show product count**                          | You can display product count number.                                                                                                                                                                                                                                                                                                                                                                                                       |
| **Image ratio**                                 | <ul><li><strong>Adapt to image:</strong> Uses the aspect ratio of the collection images is cropped.</li><li><strong>Portrait</strong>: uses a 2:3 cropping ratio to the images.</li><li><strong>Square:</strong> uses a 1:1 cropping ratio to the images.</li></ul>                                                                                                                                                                         |
| **Color scheme**                                | You can change the background color of the collection title.                                                                                                                                                                                                                                                                                                                                                                                |
|                                                 |                                                                                                                                                                                                                                                                                                                                                                                                                                             |

## Show all collections

<figure><img src="https://content.gitbook.com/content/bMGVnCsdnFPDX2dCTNWk/blobs/SLezRrDdP6VJBRnOg6ei/collection_list_sort.png" alt=""><figcaption></figcaption></figure>

## Page header settings

<figure><img src="https://content.gitbook.com/content/bMGVnCsdnFPDX2dCTNWk/blobs/PCIXbpKBfKTvTVxcV8D5/collecion-page-header.png" alt=""><figcaption></figcaption></figure>

\
SECTION PADDING

| Settings                    | Description                                                                                                                          |
| --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
| **Desktop**: Padding top    | The section’s top inner space height is determined. From 0 to 150 px, will be incremented by 5px. **It will affect the desktop.**    |
| **Desktop**: Padding bottom | The section’s bottom inner space height is determined. From 0 to 150 px, will be incremented by 5px. **It will affect the desktop.** |
| **Mobile**: Padding top     | The section’s top inner space height is determined. From 0 to 150 px, will be incremented by 5px. **It will affect the mobile.**     |
| **Mobile**: Padding bottom  | The section’s top inner space height is determined. From 0 to 150 px, will be incremented by 5px. **It will affect the mobile.**     |

\\
