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

# Collection list

{% embed url="<https://youtu.be/_mHnF9RYKSQ>" %}

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

{% hint style="success" %}
Steps

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

## Collection list settings

### **1. Section header** and **general:**

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.&#x20;

Adjust the text alignment (left/center/right) along with the background color and container type.

<figure><img src="/files/AbbJZKfKYHf6dVsNCdTH" 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="/files/VqnW7JBcG81Ul24OsYFN" alt=""><figcaption></figcaption></figure>

### 2. Collection settings

<figure><img src="/files/FCnB5UyGiLG7lFM8p8h3" alt=""><figcaption></figcaption></figure>

**Collection type:** Grid, Carousel

**Items per row:** Determine the number of collections shown per row and the gap between columns.&#x20;

**Column gap:** Determine the space between 2 items

**Design:**

{% tabs %}
{% tab title="Design 1" %}

<figure><img src="/files/MD9apSlvsVH3znfUXbpD" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Design 2" %}

<figure><img src="/files/dTEpeQzys4ph4xdzoXIh" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### 3. Typography

Collection names and product counts' fonts can be separately set up to match the look of your website.

<figure><img src="/files/eXuAw1H35VAWHj66ANUP" alt=""><figcaption></figcaption></figure>

### 4. Settings for carousel

* **Autoplay:** run the carousel automatically
* **Infinity:** Extend the carousel period indefinitely.
* **Show arrows**: enable "To left - To right" buttons
* **Dot:** enable or disable buttons that navigate you to one specific slide directly

<figure><img src="/files/KnI9gOP00VRDd4Scn0f2" alt=""><figcaption></figcaption></figure>

### 5. Section padding

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

<figure><img src="/files/UQxHy0v8pqnxAb46cjW7" alt=""><figcaption></figcaption></figure>