# Collection list

![image](https://docs-assets.foxecom.app/pebble-theme/Fox-BG%20Light%20(10)_vrNC2zvx.jpg)

Display multiple collections in a customizable grid or carousel to help customers easily explore your store’s product categories.

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

<Hint type="success">

1. In the theme editor **(Customize)**, click **Add section.**
2. Select **Collection list: Carousel/Collection list: Grid** section.
3. Make necessary changes.
4. **Save.**

</Hint>

## How to customize a Collection list section

<Tabs>
<Tab title="Collection list: Grid">

![image](https://docs-assets.foxecom.app/pebble-theme/Fox-BG%20Light%20(9)_gxmQmIxX.jpg)

</Tab>

<Tab title="Collection list: Carousel">

![image](https://docs-assets.foxecom.app/pebble-theme/Fox-BG%20Light%20(10)_vrNC2zvx.jpg)

</Tab>
</Tabs>

### Section settings

* **Collection:** Selects collections display in this section.
* **Layout:**
  * **Container:** Chooses whether the section spans the full page width or stays within a fixed content width.
  * **Type:** Sets the layout style to either a grid or a carousel.
  * **Columns:** Determines how many products appear per row in grid mode.
  * **Horizontal gap:** Controls the spacing between products from left to right.
  * **Vertical gap:** Controls the spacing between product rows from top to bottom.
* **Control type:** Selects the carousel navigation style, such as default arrows or a floating control **(only available when using the carousel layout)**.

<Tabs>
<Tab title="Default">

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

</Tab>

<Tab title="Float">

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

</Tab>
</Tabs>

* **Mobile layout:**
  * **Enable swipe on mobile:** Allows horizontal swiping to navigate products on mobile.
  * **Mobile columns:** Sets how many products appear per row on mobile devices.
  * **Horizontal gap (mobile):** Controls left-to-right spacing between products on mobile.
  * **Vertical gap (mobile):** Controls top-to-bottom spacing between product rows on mobile.

### Block settings

#### Collection card

* **Aspect ratio:** Sets the shape of the collection image.

<Tabs>
<Tab title="Use global settings">

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

* Go to **Theme settings > Collection cards and set the aspect ratio** there to use it as a global setting.

</Tab>

<Tab title="Auto">

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

* The image ratio adapts to the original size of the uploaded image.

</Tab>

<Tab title="Square (1/1)">

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

</Tab>

<Tab title="Portrait (4/5)">

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

</Tab>

<Tab title="Portrait (3/4)">

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

</Tab>

<Tab title="Landscape (16/9)">

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

</Tab>

<Tab title="Landscape (4/3)">

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

</Tab>
</Tabs>

* **Alignment:** Controls the horizontal alignment of the collection title.

<Tabs>
<Tab title="Left">

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

</Tab>

<Tab title="Center">

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

</Tab>

<Tab title="Right">

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

</Tab>
</Tabs>

* **Show product count:** Toggles whether the number of products in the collection is displayed.

#### Nested dynamic blocks

You can add multiple dynamic blocks within this section. Learn more about each block type here.

<PageLink href="https://docs.foxecom.com/pebble-theme/theme-blocks/overview">Theme blocks</PageLink>