# Collection list

<Embed url="https://youtu.be/N_w3GTiPXE0" />

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

![](https://docs-assets.foxecom.app/minimog-theme/Screen%20Shot%202021-10-13%20at%2014.00.59_b52VMCPi.png)

## How to add a Collection list section to your Shopify page

<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 banner blocks. The banner block shows only text.

![](https://docs-assets.foxecom.app/minimog-theme/1_-MlSrIJk.JPG)

## How to edit the Collection list section

### **Section header** **and** **General:**

#### Section header

Use the provided text fields to add a suitable **Heading**/**Subheading**/**Description**. Leave any of the fields blank if you do not want to display them.&#x20;

You can also change the **Heading size** to Medium/Large and adjust the **Text alignment** (Left/Center).

<div>![image](https://docs-assets.foxecom.app/minimog-theme/image_9NnkxnwD.png) ![image](https://docs-assets.foxecom.app/minimog-theme/Screenshot_35_P5xyPwWu.png)</div>

You can also display a call-to-action button to redirect customers to your desired pages on the Section header.

Add a **Label** and **Link** for one or both, then choose a **Button style** (Primary button/ Secondary button/ Underline button)**.**

#### General

You can choose your **Container type** for the collection list as:

* Default;
* Full width;
* Use container box.

Select the **Color scheme** and suitable **Layout** (Standard/Heading left side) for the section.

Moreover, you can expand the Collection list slider by enabling the **Expanded** toggle. This option works if **Enable slider** option is checked.

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

### **Card and Grid settings:**

#### Card settings

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

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

Card style includes:

* Standard
* Boxed&#x20;
* Content inside

<Tabs>
<Tab title="Standard">

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

</Tab>

<Tab title="Boxed">

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

</Tab>

<Tab title="Content inside">

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

</Tab>
</Tabs>

The hover effect includes:

* Scale up
* Scale down
* None

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

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

</Tab>

<Tab title="Scale down">

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

</Tab>

<Tab title="None">

![image](https://docs-assets.foxecom.app/minimog-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/minimog-theme/image_7dmuqrEW.png)

#### Grid settings

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

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

### **Slider settings**

Select **Enable slider** and **Auto slide** options to run the list automatically. The duration time to change slides is between 2-10 seconds.

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

![image](https://docs-assets.foxecom.app/minimog-theme/image_y3AW6UHL.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/minimog-theme/image_hqOH3B1e.png)