---
description: >-
  The "Collections list" section can be operated to display numerous collections
  with links to Collection pages for each.
---

# Collection list

## Collection list

{% hint style="success" %}
**Tip:** To hide the title, description, or button, leave the corresponding fields blank.
{% endhint %}

Paste the section's title to the **"Heading"** field. The **"Heading font size"** can be changed to "Small", "Medium" or "Large" sizes. If you need to colorize the title, use the **"Heading color"** picker.

To represent the section, insert any text lines to the **"Description"** placeholder. If you need to change a paragraph color, use the **"Description color"** picker.

### Layout

The layout settings change the look and feel of the section.

Choose one of the options "In-grid heading", "Heading on top", or "Heading top center" in the **"Layout"** drop-down.

Use the **"Mobile align"** settings to change the alignment of the heading and description to the "Left" or "Center". Leave the "Auto" option to use the pre-designed theme settings.

To add a divider between sections, use the **"Dividing line"** to set the position: "Top", "Bottom", or "Both". The dividing line will be hidden once you use the option "None".

On the **"Top spacing"** and **"Bottom spacing"** scales, decide whether to add spaces at the top and bottom of the section. Control spacing settings from 0 to 100 pixels on each scale.

### Content

The number of collections per row can be set in the **"Collections in row"** drop-down. Decide if to display 2, 4, or 6 items in each row.

Choose the appropriate aspect ratio of the collection images in the **"Image ratio"**. You can use one of the options that display well on both desktop and mobile views: "Adapt to image", "Portrait", "Square", "Landscape", or "Circle". Each image ratio, you can check [<mark style="color:blue;">here</mark>](https://mpithemes.gitbook.io/unicorn-shopify-theme/dynamic-theme-sections#content).

The text alignment on all screen sizes can be defined in the **"Alignment"** picker. Display the title and description either on the "Left" or "Center".

The **"Show product count"** option helps to show or hide the number of products available in each collection. Deactivate the option to hide the number.

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2F4D0Q8P5WiKHXyQOpLwPv%2Fcollection%20list_count.png?alt=media&#x26;token=5aa438f3-522d-4c62-863b-654d93f4eb1c" alt=""><figcaption></figcaption></figure>

**Enable swipe on mobile**

Check the box to add scrollbars instead of displaying the list of collections on mobile view.

### **Button "View All"**

Activate the **"Enable "View all"** checkbox to show the "View All" button on desktop and mobile if the blog contains more articles than is displayed in the section.

Use the **"Style"** drop-down to change the button's appearance in the sections. The theme includes three styles that can work out in your store: "Primary", "Secondary", or "Link style". Each button style can be viewed on the following [<mark style="color:blue;">help page</mark>](https://mpithemes.gitbook.io/unicorn-shopify-theme/dynamic-theme-sections#buttons).

Use the **"Color"** picker to change the button background color for the "Primary" style. For the "Secondary" style the colorized text and border inside the button will be added. If you used the "Link style", the color will be applied to the text link.



Check the following examples of how the section might be displayed on desktop and mobile:

{% tabs %}
{% tab title="Desktop" %}
<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FLILc3LrGJ6zfCdcurvyF%2Fcollection%20list_desktop.png?alt=media&#x26;token=f07fb0fc-f7da-43d1-969c-1bb09f6a924e" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Mobile" %}
<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2F8Tca3zWn4pZZIl6sgnSw%2Fcollection%20list_mobile.png?alt=media&#x26;token=c25fe45e-6fbc-4c59-a486-1f99f7c48c60" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

***

## Collection

{% hint style="success" %}
**Tip:** This block can be used several times to configure each collection individually.
{% endhint %}

Choose the required collection by pressing the **"Select"** button.

Edit the **"Description"** field to introduce a collection. Leave the field empty to deactivate the description.

**Image**

If you need to add or change the collection's image, use the image library or upload media from your device.



Here is how the block might be displayed in the section:

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2F7fBjgS5YMKeY7PwKqngb%2Fcollection%20list_collection.png?alt=media&#x26;token=5a049bfa-886c-4353-838e-172f8ac9df43" alt=""><figcaption></figcaption></figure>
