# Collection list menus

**Collection list menus** is a concise and organized way to showcase various product collections. It appears as a menu option, presenting a list of categories that customers can navigate.

<figure><img src="https://content.gitbook.com/content/z14kVz432NnMEq8AbqBr/blobs/WBjSmecd6VI7qhmM4iMJ/image.png" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
Steps

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

## Section settings <a href="#collection-list-menu-settings" id="collection-list-menu-settings"></a>

### Header and General <a href="#id-1.-header" id="id-1.-header"></a>

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.

You have the option to adjust the **Text alignment** to either left or center, allowing you to tailor the appearance of text to match your design preferences.

<figure><img src="https://content.gitbook.com/content/z14kVz432NnMEq8AbqBr/blobs/q751ZiJsFq1egf084LGx/image.png" alt=""><figcaption></figcaption></figure>

**Layout:** You can choose among Container, Wrapped container, Full width for the banner layout.

**Color schema:** Set text color and background color with preset scheme

<figure><img src="https://content.gitbook.com/content/z14kVz432NnMEq8AbqBr/blobs/SPhFp8igaQKF3B5kqMzA/image.png" alt=""><figcaption></figcaption></figure>

### Collection settings <a href="#id-2.-collection-settings" id="id-2.-collection-settings"></a>

You can decide whether **Collection list menu** displays as grid or carousel.

<figure><img src="https://content.gitbook.com/content/z14kVz432NnMEq8AbqBr/blobs/ORzpAQDXAkcNtCdW6erR/image.png" alt=""><figcaption></figcaption></figure>

When carousel layout is enabled, there will be some additional settings:

* **Autoplay:** Run the carousel automatically.
* **Infinity:** Extend the carousel period indefinitely.
* **Show arrows**: enable buttons to swipe across the carousel.
* **Dot:** enable or disable buttons that navigate you to one specific slide directly.

<figure><img src="https://content.gitbook.com/content/z14kVz432NnMEq8AbqBr/blobs/lwYiZNntjLfjjBhlJfUz/image.png" alt=""><figcaption></figcaption></figure>

### Section padding

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

<figure><img src="https://content.gitbook.com/content/z14kVz432NnMEq8AbqBr/blobs/S0euMN72ZuJ6duhvcifD/image.png" alt=""><figcaption></figcaption></figure>
