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

# Collection list

The collection list displays a quick list of desired collections to catch visitors' attention.

<figure><img src="https://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2F9wqrhxYPOvbsBcfjhfkv%2Fimage.png?alt=media&amp;token=f43d01d3-7ae6-4b38-a5fb-4802eee028ad" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
Steps

1. In the theme editor (**Customize**), click **Add section**
2. Locate **Collection list**
3. **Save**
   {% endhint %}

## General settings

| Setting                | Description                                                                                                                                |
| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
| Section width          | You can choose among Container, Wrapped container, Full width for the banner layout.                                                       |
| Color scheme           | Set text color and background color with preset scheme                                                                                     |
| Heading, Description   | Use the provided text fields to add a suitable heading/subheading/description. Leave any of them blank if you do not want to display them. |
| Header size, Alignment | Adjust the text alignment (left/center/right) along with the font size.                                                                    |

## **Collection settings**

<figure><img src="https://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2FtDHy1IzWIhErLPS44sJv%2Fimage.png?alt=media&amp;token=c1c631e5-c006-4a8d-b28c-b7bac1072c99" alt=""><figcaption></figcaption></figure>

| Setting       | Description                                                                                                                                                         |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Display mode  | Choose between grid or carousel layout options.                                                                                                                     |
| Image ratio   | In addition to adjusting the width, the image ratio can be fine-tuned using default values or a custom value to achieve the perfect visual balance for your images. |
| Custom ratio  | Define a custom ratio for the logo.                                                                                                                                 |
| Items per row | The number of items displayed on each row in the grid layout can be customized to suit your preferences and the overall design of your site.                        |
| Column gap    | The spacing between each column pair.                                                                                                                               |

## **Collection information**

<figure><img src="https://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2Fx93yrHK0LMxkhDcB0Mzs%2Fimage.png?alt=media&amp;token=9a85c67f-e66b-4139-a288-d27a1e79a652" alt=""><figcaption></figcaption></figure>

| Setting                    | Description                                                           |
| -------------------------- | --------------------------------------------------------------------- |
| Position                   | Choose the location where the content will be placed.                 |
| Design                     | Select from two available collection card designs.                    |
| Content alignment          | Adjust the alignment of the content within the collection card.       |
| Show product count         | Enable to display the number of items in each collection.             |
| Show description           | Enable this option to display the collection description on the page. |
| Font size and Font weight: | Customize the font size and weight for the content heading text.      |

## Collection information below image settings

<figure><img src="https://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2FaaoL4IR7gzXq3W3QiQZh%2Fimage.png?alt=media&amp;token=7498efa3-e2d4-4b75-9a8c-2f2d6979182e" alt=""><figcaption></figcaption></figure>

| Setting            | Description                                                                           |
| ------------------ | ------------------------------------------------------------------------------------- |
| Spacing top        | Adjust the space between the content and the image.                                   |
| Rounded image      | Enable to make the image corners rounded.                                             |
| Image custom width | Enable this option to customize the width of the image according to your preferences. |
| Image width        | Set a custom width for the image here.                                                |

## **Carousel settings**

<figure><img src="https://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2FQMwhJEddHb6cuJ98ErXB%2Fimage.png?alt=media&amp;token=2c1798f2-6b52-4455-97da-0d140e5ce4b5" alt=""><figcaption></figcaption></figure>

| Setting                       | Description                                                                                               |
| ----------------------------- | --------------------------------------------------------------------------------------------------------- |
| Show Next/Back                | Display arrows to navigate to the next or previous item.                                                  |
| Column gap                    | Adjust the spacing between items in the carousel for a balanced layout.                                   |
| Show next back                | Enable this option to display navigation arrows for moving to the next or previous slide in the carousel. |
| Dot                           | Choose from different types of pagination options.                                                        |
| Infinite slide                | Enable this option to allow the slides to loop continuously without stopping at the last item.            |
| Auto change slides            | Enable this option to automatically transition between slides after a specified time interval.            |
| Change slides every           | Set the time interval (in seconds) for automatically transitioning between slides in the carousel.        |
| Reveal next slide             | Allow a part of the next slide to be visible while the previous one is still displayed.                   |
| Mobile options: Items per row | Set the number of items displayed per row on mobile devices for optimal layout and usability.             |

## **Section padding**

<figure><img src="https://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2FgPpXawdm7rjzA2a9Bdct%2Fimage.png?alt=media&amp;token=d8e49f8e-e01c-4cb1-9314-60216f826d95" alt=""><figcaption></figcaption></figure>

Section padding allows you to specify the space between this section and the preceding or following sections, or both.

## Block settings

For collection items, you have the capability to configure the following elements:

* **Collection:** Select which collection to display.
* **Image:** Choose or upload an image associated with the collection.
* **Collection title:** Define the title or heading of your collection.

<figure><img src="https://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2F0Kg59yKL8rhgVJ2d3ObB%2Fimage.png?alt=media&amp;token=170be73f-4f7e-4f55-b3b3-777f1027f74d" alt=""><figcaption></figcaption></figure>