# Collections list

{% hint style="info" %}
**Collections list -> List collections**
{% endhint %}

{% hint style="warning" %}
**IMPORTANT!** In order to make your Product page more attractive to buyers, add various sections by pressing **“Add section”**. The theme includes different content sections for a Product page, such as [<mark style="color:blue;">**Builder**</mark>](https://mpithemes.gitbook.io/shella-shopify-theme/home-page-sections/builder), [<mark style="color:blue;">**Article carousel**</mark>](https://mpithemes.gitbook.io/shella-shopify-theme/home-page-sections/article-carousel), [<mark style="color:blue;">**Brand Carousel**</mark>](https://mpithemes.gitbook.io/shella-shopify-theme/home-page-sections/brand-carousel),[ <mark style="color:blue;">**Product Carousel**</mark>](https://mpithemes.gitbook.io/shella-shopify-theme/home-page-sections/product-carousel), [<mark style="color:blue;">**Review Carousel**</mark>](https://mpithemes.gitbook.io/shella-shopify-theme/home-page-sections/review-carousel), [<mark style="color:blue;">**Contact Form**</mark>](https://mpithemes.gitbook.io/shella-shopify-theme/home-page-sections/contact-form), [<mark style="color:blue;">**FAQs**</mark>](https://mpithemes.gitbook.io/shella-shopify-theme/home-page-sections/faqs), [<mark style="color:blue;">**Gallery**</mark>](https://mpithemes.gitbook.io/shella-shopify-theme/home-page-sections/gallery), [<mark style="color:blue;">**Information line**</mark>](https://mpithemes.gitbook.io/shella-shopify-theme/home-page-sections/information-line), [<mark style="color:blue;">**Search Form**</mark>](https://mpithemes.gitbook.io/shella-shopify-theme/home-page-sections/search-form), [<mark style="color:blue;">**Subscription form**</mark>](https://mpithemes.gitbook.io/shella-shopify-theme/home-page-sections/subscription-form), [<mark style="color:blue;">**Collections**</mark>](https://mpithemes.gitbook.io/shella-shopify-theme/home-page-sections/collections), [<mark style="color:blue;">**Lookbook**</mark>](https://mpithemes.gitbook.io/shella-shopify-theme/lookbook), [<mark style="color:blue;">**One product**</mark>](https://mpithemes.gitbook.io/shella-shopify-theme/home-page-sections/one-product), [<mark style="color:blue;">**Slider Revolution**</mark>](https://www.themepunch.com/revsliderjquery-doc/slider-revolution-jquery-5-x-documentation/), [<mark style="color:blue;">**Spacer**</mark>](https://mpithemes.gitbook.io/shella-shopify-theme/home-page-sections/spacer). How to configure each of them you can read [<mark style="color:blue;">**here**</mark>](https://mpithemes.gitbook.io/shella-shopify-theme/home-page-sections).
{% endhint %}

{% embed url="<https://www.youtube.com/watch?v=tBJqygtb4KI&list=PLj-506KaR_vcQjwcpC6yII-1JY0bSj7df&index=26>" %}

## List collections

#### **Select collections to show**

**All** – show all collections

**Selected** – once you enable this option, you can decide which collections should be displayed on your collections list page by pressing “Add Collection”.

**Sort collections by**

&#x20;Here you can choose the sorting order of Collections by Date, Product count, Alphabetically or Manually.

&#x20;Manually (By the order of the selected blocks) – choose this option, if you want to change the order of the collections. Works only for the option **“Selected”** in the “Select collections to show”.

**Show products count**

![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-McsaSlZSE2uMqzAxy2S%2F-Mey1Hp05kLeF2aBMn6g%2F-Mey2PwJiP-m31tC5tTN%2FScreenshot_42.png?alt=media\&token=39922a28-e73f-4b1b-a6bc-326c28e16522)

&#x20;In this section, you can choose how many items should be shown in the row by selecting the proper option from the dropdown list in the **“Size of the columns”**.The option **“Size of the columns on mobile”** allows you to set the number of items in the row on mobile: “1 item in the row” or “2 items in the row”. In the **“Type”**, you can choose whether any text should be displayed together with the images. The position of the text can also be chosen in the **“Type”** from the dropdown list. The style of the text content can be changed in **“Colorize style”**, where you can choose one of eight possible styles for this purpose. If you enable the option **“Enable masonry”** the collection list will not have fixed height rows:

![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-McsaSlZSE2uMqzAxy2S%2F-Mey1Hp05kLeF2aBMn6g%2F-Mey3wT1C5DlwXzexT_A%2FScreenshot_43.png?alt=media\&token=1f3df710-90ab-4435-9b12-44c3b5a16518)

&#x20;In the dropdown list of the **“ Image height”**, you can choose the width of the image. On the **“Image size”** scale from 200 to 2000px you can choose the size of the image. If you work only with the PJPG image format and the transparent images with the formats GIF or PNG shouldn’t be allowed in your store, enable the option **“Enable format “PJPG”**.

{% hint style="success" %}
**VIEW DEMO**

#### [<mark style="color:blue;">List Collections V1</mark>](https://shella-demo.myshopify.com/collections)

#### [<mark style="color:blue;">List Collections V2</mark>](https://shella-demo2.myshopify.com/collections)

{% endhint %}

### Animation

&#x20;You can decide whether the image should have an animation when being hovered over with the mouse cursor by choosing the proper option from **“Move image on hover to”**. The positioning of the image can also be set in the **“Static image position”**. Just choose one of the available options from the dropdown list. In the same way, you can decide whether or when the image in the collection list should have an opacity. In the dropdown list **“Image opacity”** the options static, hover, static, and hover or none can be chosen for this purpose.

## Collection

&#x20;This section allows you to change the content of the collection on the collection list page. Once you press **“Add Collection”,** a new block will be added. In the **“For collection”** you need to select the proper collection. In the **”Image”**, you can add a unique image for a particular collection in the collection list. There are also two **“Text lines”** which can be filled in with the content you need. If you want to have a button just write a text in the **“Button text”**.

&#x20;This is how the unique content of the collection may look on the collections list page:

![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-McsaSlZSE2uMqzAxy2S%2F-Mexz5wLdNq4Rrl6wkLE%2F-Mey-5wGgtsv5mYIH5ae%2FScreenshot_41.png?alt=media\&token=dbb4b07e-7900-46f4-b5bd-1f20e7ca9c9a)
