# Collection list

![image](https://docs-assets.foxecom.app/megamog-theme/image_BQAfAOGn.png)

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

<Hint type="success">

Steps

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

</Hint>

The collection list consists of collections and image card blocks.&#x20;

![image](https://docs-assets.foxecom.app/megamog-theme/image_Sh987Vw3.png)

## Collection list settings

### 1. Section **Header**

Use the provided text fields to add a suitable heading, heading size. Leave it blank if you do not want to display it. Adjust the text alignment as Left/Center&#x20;

![image](https://docs-assets.foxecom.app/megamog-theme/image_3QYVdmEu.png)

### **2. Collection Card settings:**

Modify the card style, text alignment (left/center), and hover effect by selecting options in the dropdown.&#x20;

![image](https://docs-assets.foxecom.app/megamog-theme/image_PBNK3TcV.png)

You can choose your **Layout** for the collection list as:

Card style includes:

* Standard
* Product count inline
* Content inside
* Hozirontal

<Tabs>
<Tab title="Standard">

![image](https://docs-assets.foxecom.app/megamog-theme/image_SoLwZOFt.png)

</Tab>

<Tab title="Product count inline">

![image](https://docs-assets.foxecom.app/megamog-theme/image_jt7FXBO7.png)

</Tab>

<Tab title="Content inside">

![image](https://docs-assets.foxecom.app/megamog-theme/image_L46qqk3R.png)

</Tab>

<Tab title="Hozirontal">

![image](https://docs-assets.foxecom.app/megamog-theme/image_fheE4PPj.png)

</Tab>
</Tabs>

The hover effect includes:

* Scale up
* Scale down
* None

<Tabs>
<Tab title="Scale up">

![image](https://docs-assets.foxecom.app/megamog-theme/ezgif.com-gif-maker_ipJkJQCw.gif)

</Tab>

<Tab title="Scale down">

![image](https://docs-assets.foxecom.app/megamog-theme/ezgif.com-gif-maker%20(1)_HCHRJUAw.gif)

</Tab>

<Tab title="None">

![image](https://docs-assets.foxecom.app/megamog-theme/ezgif.com-gif-maker%20(1)_fASx4wJ2.gif)

</Tab>
</Tabs>

You can enable showing product count and decide whether the numbers are in the same line with the collection titles or in a different line.&#x20;

You can also make the collections' images rounded, images will then be cropped.

![image](https://docs-assets.foxecom.app/megamog-theme/image_A3Ll73dG.png)

#### Grid settings

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

![image](https://docs-assets.foxecom.app/megamog-theme/image_bjYQFqRz.png)

### **3. Slider settings**

Select **Enable slider** options to run the list automatically.

You can also use pagination or navigation for your collection list.

![image](https://docs-assets.foxecom.app/megamog-theme/image_YgPQnsvr.png)

### Collection/banner block settings

Each collection/banner block has its own settings such as title, image, and collection link to choose from.

![image](https://docs-assets.foxecom.app/megamog-theme/image_sQRjBDpq.png)