> For the complete documentation index, see [llms.txt](https://ursus-ecom.gitbook.io/arctos-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ursus-ecom.gitbook.io/arctos-theme/blocks/collections-and-products/collection-list.md).

# Collection list

Display selected collections as responsive cards in a grid or carousel with collection image, title, description, and product count controls.

The **Collection list** block displays selected collections as a responsive grid or carousel. Use it to feature departments, seasonal edits, gift guides, curated categories, or any collection group that helps customers choose where to shop next.

Each Collection item links to one collection. The parent Collection list controls the shared layout, card style, image crop, text display, carousel controls, color scheme, and spacing.

<figure><img src="https://1411897219-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FP6Y96SO1y456EU9GTaCh%2Fuploads%2Fgit-blob-5314fe0ba5de5b5ab400c46db6c8369aad15916e%2Fcollection-list-demo.webp?alt=media" alt=""><figcaption></figcaption></figure>

### 1. What you can do

* Select collections from a **Collection list** picker or add one **Collection** item for each collection you want to feature
* Display collections in a grid or carousel
* Set desktop and mobile rows, collections per row, horizontal and vertical gaps, controls, and pagination
* Turn a desktop grid into a carousel on mobile
* Position collection information **Inside** or **Outside** the collection card, with **Vertical** or **Horizontal** card direction and **Classic** or **Boxed** card styles when placed outside
* Control collection card orientation, aspect ratio (including 9:16, 4:5, 3:4, and 5:7 portrait ratios), image hover effect, overlay, corner radius, and padding
* Show or hide each collection's description and product count
* Override the collection image, title, or description for this block only

### 2. Understanding the Collection list structure

Collection list can pull collections from its parent **Collection list** setting or from **Collection** child blocks. If you select collections in the parent **Collection list** picker, the child Collection blocks are ignored; if you select none, the list uses the Collection child blocks. On a collection page, the current collection is excluded automatically (except on the All products page).

```
Collection list
`-- Collection
```

The parent Collection list controls how all cards display. Each Collection item controls the collection source and optional content overrides for that one card.

### 3. How to add a Collection list

{% stepper %}
{% step %}
**Open a compatible section**

In the Theme Editor (Customize), open a compatible section or container.
{% endstep %}

{% step %}
**Add a collection list block**

Click **Add block**, then select **Collection list**.
{% endstep %}

{% step %}
**Add a collection item**

Click **Add block** inside the Collection list, then add a **Collection item**.
{% endstep %}

{% step %}
**Select the collection**

Select the collection for that item.
{% endstep %}

{% step %}
**Add more collections**

Repeat for each collection you want to feature.
{% endstep %}

{% step %}
**Choose your display format**

Select whether the list displays as a **Grid** or **Carousel**.
{% endstep %}

{% step %}
**Adjust the settings**

Control card style, collection information, desktop layout, and mobile layout.
{% endstep %}

{% step %}
**Preview the result**

Check how it looks on desktop and mobile.
{% endstep %}

{% step %}
**Save your changes**

Click **Save**.
{% endstep %}
{% endstepper %}

### 4. Collection list settings

<details>

<summary>General and Layout</summary>

Choose which collections appear and whether customers see a static grid or a browsable carousel.

* **Collection list:** Select collections directly in the parent block. If you select any collections here, the child **Collection** blocks are ignored; if left empty, the list uses the child **Collection** blocks.
* **Grid or Carousel:** Collection list uses the same grid and carousel pattern as Custom list. Use these controls to choose **Grid** or **Carousel**, then configure autoplay, slide timing, infinite loop, and hint previews.

Collection list uses a simpler autoplay toggle than Custom list. For the detailed behavior of grid, carousel, autoplay, loop, and hint controls, see [Custom list](/arctos-theme/blocks/layout/custom-list.md).

</details>

<details>

<summary>Desktop</summary>

Control how the Collection list appears on larger screens.

These controls follow the same desktop list layout pattern as Custom list. Use them to set rows, collections per row, **Horizontal gap**, **Vertical gap**, carousel buttons, button position, pagination, and pagination background.

Collection list supports up to **2** desktop carousel rows and **1-6** collections per row. For the detailed behavior of desktop rows, item count, gaps, control buttons, and pagination, see [Custom list](/arctos-theme/blocks/layout/custom-list.md).

</details>

<details>

<summary>Mobile</summary>

Set a separate mobile arrangement for smaller screens.

These controls follow the same mobile list layout pattern as Custom list. Use them to convert a desktop grid into a mobile carousel, then set mobile autoplay, slide timing, loop, hint, rows, collections per row, **Horizontal gap**, **Vertical gap**, controls, and pagination.

Collection list supports **1** or **2** collections per row on mobile. Mobile control buttons can appear **Inside** or at the **Bottom**. For detailed mobile carousel behavior, see [Custom list](/arctos-theme/blocks/layout/custom-list.md).

</details>

<details>

<summary>Collection card and Collection image</summary>

Control the shared card layout, image frame, and visual treatment for every collection card.

<table data-search="false"><thead><tr><th width="115.19921875">Setting</th><th width="140.0703125">Options</th><th width="408.94921875">What it does</th></tr></thead><tbody><tr><td><strong>Information position</strong></td><td><ul><li>Outside</li><li>Inside</li></ul></td><td>Places collection titles, descriptions, and counts either overlaid <strong>Inside</strong> the image or <strong>Outside</strong> the image.</td></tr><tr><td><strong>Direction</strong></td><td><ul><li>Vertical</li><li>Horizontal</li></ul></td><td>Stacks the image and text vertically or places them side by side. <em>Available when <strong>Information position</strong> is <strong>Outside</strong>.</em></td></tr><tr><td><strong>Gap</strong> / <strong>Custom gap</strong></td><td><ul><li>Default</li><li>0–32px</li><li>Custom (0–100px)</li></ul></td><td>Sets the spacing between the image and text when <strong>Information position</strong> is <strong>Outside</strong>, with optional mobile overrides when <strong>Custom on mobile</strong> is on.</td></tr><tr><td><strong>Style</strong></td><td><ul><li>Classic</li><li>Boxed</li></ul></td><td>Chooses an unframed <strong>Classic</strong> card or a framed <strong>Boxed</strong> card. <em>Available when <strong>Information position</strong> is <strong>Outside</strong>.</em></td></tr><tr><td><strong>Box style</strong> / <strong>Use alternate background color</strong></td><td><ul><li>Fill, Outline</li><li>On / Off</li></ul></td><td>Styles the boxed card container as a solid fill (default: <strong>Fill</strong>; reveals <strong>Use alternate background color</strong>, default: <strong>Off</strong>, when <strong>Box style</strong> is <strong>Fill</strong>) or outline border. <em>Available when <strong>Information position</strong> is <strong>Outside</strong> and <strong>Style</strong> is <strong>Boxed</strong>.</em></td></tr><tr><td><strong>Padding</strong></td><td>0-100px (0-50px on mobile)</td><td>Adds space inside the collection card (default: <code>32px</code> on desktop, <code>16px</code> on mobile). <em>Available when <strong>Information position</strong> is <strong>Inside</strong>, or when <strong>Information position</strong> is <strong>Outside</strong> and <strong>Style</strong> is <strong>Boxed</strong>.</em></td></tr><tr><td><strong>Orientation</strong></td><td><ul><li>Portrait</li><li>Landscape</li><li>Square</li></ul></td><td><ul><li><strong>Square</strong> crops to 1:1.</li></ul><p>Choosing <strong>Portrait</strong> or <strong>Landscape</strong> unlocks a secondary <strong>Ratio</strong> setting with specific options for that format:</p><ul><li><strong>Portrait</strong> crops to a vertical format: 9:16, 4:5, 3:4, or 5:7.</li><li><strong>Landscape</strong> crops to a horizontal format: 16:9, 4:3, 3:2, or 21:9.</li></ul></td></tr><tr><td><strong>Width</strong></td><td>40-400px</td><td>Sets the image width on desktop (default 120px) and mobile (default 60px) when <strong>Information position</strong> is <strong>Outside</strong> and <strong>Direction</strong> is <strong>Horizontal</strong>.</td></tr><tr><td><strong>Hover interaction</strong></td><td><ul><li>None</li><li>Zoom in</li><li>Grayscale</li></ul></td><td>Adds an optional desktop hover treatment to collection card images.</td></tr><tr><td><strong>Corner radius</strong></td><td><ul><li>Main corner</li><li>Small</li><li>Extra small</li><li>Pill (when Outside and not Boxed)</li><li>None</li><li>Custom (0-100px)</li></ul></td><td><p>Rounds the outer card corners (when <strong>Information position</strong> is <strong>Outside</strong> and <strong>Style</strong> is <strong>Boxed</strong>) or the collection image corners (when <strong>Information position</strong> is <strong>Inside</strong>, or when <strong>Information position</strong> is <strong>Outside</strong> and <strong>Style</strong> is not <strong>Boxed</strong>; default: <strong>Small</strong>).</p><ul><li><strong>Main corner</strong> matches the global corner radius set in the theme.</li><li><strong>Small</strong> and <strong>Extra small</strong> use a subtler reduced version of the <a href="/pages/MtcWsJuspkVnqjnkw5Ur#id-1.-global-style-main-corner">main corner</a>.</li><li><strong>Pill</strong> creates fully rounded capsule or circular edges on standalone outside images (available when <strong>Information position</strong> is <strong>Outside</strong> and <strong>Style</strong> is not <strong>Boxed</strong>).</li><li><strong>None</strong> removes rounding for sharp corners.</li><li><strong>Custom</strong> lets you set a precise corner radius from 0-100px (default: <code>30px</code>).</li></ul></td></tr><tr><td><strong>Overlay</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Adds a transparent color or gradient over card images to improve contrast and text readability. <em>Available when <strong>Information position</strong> is <strong>Inside</strong>.</em></td></tr><tr><td><strong>Color style</strong></td><td><ul><li>Solid</li><li>Gradient</li></ul></td><td>Chooses between a solid color overlay or a gradient overlay. <em>Available when <strong>Information position</strong> is <strong>Inside</strong> and <strong>Overlay</strong> is on.</em></td></tr><tr><td><strong>Color code</strong></td><td>Color picker or gradient picker</td><td>Sets the overlay color and opacity or gradient. <em>Available when <strong>Information position</strong> is <strong>Inside</strong> and <strong>Overlay</strong> is on.</em></td></tr><tr><td><strong>Custom on mobile</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Turn on to set separate mobile card gap, card padding, image orientation, ratio, and horizontal image width.</td></tr></tbody></table>

</details>

<details>

<summary>Collection information</summary>

Control the text shown on each collection card.

<table><thead><tr><th width="113.92578125">Setting</th><th width="147.80078125">Options</th><th width="402.125">What it does</th></tr></thead><tbody><tr><td><strong>Alignment</strong></td><td><ul><li>Left</li><li>Center</li><li>Right</li></ul></td><td>Aligns the collection information when <strong>Information position</strong> is <strong>Outside</strong>.</td></tr><tr><td><strong>Title text style</strong></td><td><ul><li>Display</li><li>Heading 1-6</li><li>Paragraph</li><li>Eyebrow text</li><li>Description</li><li>Custom</li></ul></td><td>Sets the typography style for collection titles on desktop. Choose <strong>Custom</strong> to configure font family, font size (10-200px), line height, letter spacing, font weight, and case. For deeper typography guidance, see <a href="/arctos-theme/theme-settings/typography.md">Typography</a>.</td></tr><tr><td><strong>Show description</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Shows each collection description, or the Collection item's custom description when one is entered.</td></tr><tr><td><strong>Show product count</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Shows the number of products in each collection.</td></tr><tr><td><strong>Padding</strong></td><td>0-100px (0-50px on mobile)</td><td>Adds inner padding around the text area when <strong>Information position</strong> is <strong>Outside</strong> and <strong>Style</strong> is <strong>Boxed</strong>.</td></tr><tr><td><strong>Custom on mobile</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Turn on to set separate mobile title typography, description visibility, and information padding.</td></tr></tbody></table>

</details>

<details>

<summary>Style</summary>

Set the color context for the complete Collection list.

Collection list color controls follow the same pattern as Custom list. Use **Inherit color scheme** to match the surrounding section or turn it off to choose a specific **Color scheme** from [Theme settings > Colors](/arctos-theme/theme-settings/colors.md).

</details>

<details>

<summary>Spacing</summary>

Use padding to add space inside the complete Collection list.

Collection list spacing follows the same padding pattern as Custom list. Turn on **Padding** to set top, bottom, left, and right values from 0-200px, then use **Custom on mobile** for separate mobile values from 0-100px.

</details>

### 5. Collection item settings

Each **Collection** item controls one card in the list.

<table><thead><tr><th width="117.99609375">Setting</th><th width="159.6484375">Options</th><th width="448.48828125">What it does</th></tr></thead><tbody><tr><td><strong>Collection</strong></td><td>Collection picker</td><td>Selects the collection this card links to.</td></tr><tr><td><strong>Image</strong></td><td>Image picker</td><td>Replaces the collection image for this card only. Leave blank to use the selected collection's image.</td></tr><tr><td><strong>Title</strong></td><td>Text field</td><td>Replaces the collection title for this card only. Leave blank to use the selected collection's title.</td></tr><tr><td><strong>Description</strong></td><td>Text area</td><td>Replaces the collection description for this card only. Leave blank to use the selected collection's description.</td></tr></tbody></table>