> 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

A guide to set up a 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.

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

<figure><img src="https://content.gitbook.com/content/5WlAIkq5Keo641r70Byr/blobs/7rYGjyjgKRJbzzSzGy17/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/5WlAIkq5Keo641r70Byr/blobs/NZHgVPXYORAKCIbzBzQM/image.png" alt=""><figcaption></figcaption></figure>

### 2. Collection settings

<figure><img src="https://content.gitbook.com/content/5WlAIkq5Keo641r70Byr/blobs/LRIj8BoJwvS1eGBnvRnC/collection-setting.jpg" alt=""><figcaption></figcaption></figure>

**Collection type:** Grid, Carousel

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

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

**Design:**

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

<figure><img src="https://content.gitbook.com/content/5WlAIkq5Keo641r70Byr/blobs/VmqtbpIOGQw5BbEurM47/Collection-layout1.jpg" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Design 2" %}

<figure><img src="https://content.gitbook.com/content/5WlAIkq5Keo641r70Byr/blobs/UAlWu6ckqZGoVObwriYv/Collection-layout2.jpg" 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="https://content.gitbook.com/content/5WlAIkq5Keo641r70Byr/blobs/nYTXw3kcu60fs1xWZoJO/image.png" 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="https://content.gitbook.com/content/5WlAIkq5Keo641r70Byr/blobs/Ky8lzEzPGgM6ccIs6Ba0/image.png" 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="https://content.gitbook.com/content/5WlAIkq5Keo641r70Byr/blobs/sRIyBu4cIj6HAaYaB7lY/image.png" alt=""><figcaption></figcaption></figure>