# Collection list

Use the **Collection list** section to display selected collections as either a grid or as a single-row slider that visitors can click or swipe through.

{% hint style="info" %}
Check out the [Collection list buttons](https://help.fluorescent.co/cornerstone/pages/theme-sections/collection-list-buttons) section for an alternate style to feature your collections.
{% endhint %}

<figure><img src="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2FGzsvgFrcGNAFrQSpNOg3%2Fcollection-list-glow.jpg?alt=media&#x26;token=56a9b63e-94fd-4bf8-a901-e2cfbc3128e1" alt=""><figcaption></figcaption></figure>

<figure><img src="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2FZRIj8HGmfhLRRuaQ3ItH%2Fcollection-list-artisan.jpg?alt=media&#x26;token=67364fbb-3131-49d6-b7b1-4561a40e4c10" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
**Editing templates will change all pages that use the same template**. [Create new templates](https://help.fluorescent.co/cornerstone/general/editing-themes/using-templates#create-and-assign-multiple-templates) for different page layouts, or [show dynamic page content](https://help.fluorescent.co/cornerstone/general/adapting-your-theme/dynamic-content-with-metafields) in the same template.
{% endhint %}

## Set up section

***

In the editor side panel, click **(+) Add section** and select **Collection list**. Click and hold the drag handles **`⋮⋮`** to re-order sections.

### Section styles

Sections include general styles. Click the section to find options for **spacing**, and **animations**.

<table data-view="cards"><thead><tr><th align="center"></th><th data-hidden data-type="content-ref"></th></tr></thead><tbody><tr><td align="center"><mark style="color:blue;"><strong>Section spacing</strong></mark></td><td><a href="../section-styles#section-padding">#section-padding</a></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Section animations</strong></mark></td><td><a href="../section-styles#section-animations">#section-animations</a></td></tr></tbody></table>

### Select feature collections

***

Select multiple **Collections** to display with featured collection images that link to those collections.

{% hint style="info" %}
We recommend adding a **Collection image** in your Shopify Admin. If no image is set, Cornerstone will use a product image from that collection by default.
{% endhint %}

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your theme editor (**Customize**):

1. Click on **Collection list** to open the section settings.
2. Under the **Collection listing**, use the **Select collections** button to check off all the collections you want to feature.
3. Select the **Number of columns** for both *desktop* and *mobile*

   > The size of the collection images will change according to the number of columns.
4. In the **Collection list**, click and hold the drag-and-drop handles **`⋮⋮`** to reorder your collections.
5. Click **Save**.

</details>

## Collection items style

***

Customize the appearance of collection items, titles, and images.

* Show collection items with an **outline**, **color background**, or **plain**.
* Choose which **images** to use and change their shape
* Show the **number of products** in each collection
* Adjust the **title font** and **alignment**

`Click section to find settings`

<table><thead><tr><th width="188">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Show product counts</mark></td><td>Choose to display the number of products in each collection.</td></tr><tr><td><mark style="color:blue;">Style</mark></td><td>Choose to display collection items with a simple border (<strong>Outlined</strong>), a solid color background (<strong>Filled</strong>), or without a border or background (<strong>Plain</strong>).</td></tr><tr><td><mark style="color:blue;">Image source</mark></td><td>Choose to display the Collection image or First product image for the collection items.</td></tr><tr><td><mark style="color:blue;">Image aspect ratio</mark></td><td>Choose to crop all images to be a single uniform shape. Select Portrait (2:3), Portrait (4:5), Square (1:1), Landscape (5:4), or Landscape (3:2). Select Natural to display images in their original shape (without cropping).<br><br>Learn more about aspect ratios in our <a href="../../../general/image-guide/theme-image-settings#image-aspect-ratio">Image settings guide</a>.</td></tr><tr><td><mark style="color:blue;">Apply circle crop to images</mark></td><td>Choose to crop all images to appear as circles. This setting applies only when the Image aspect ratio is set to Square.</td></tr><tr><td><mark style="color:blue;">Image spacing</mark></td><td>Change the spacing around the images. Select Comfortable for more spacing or Compact for less.</td></tr><tr><td><mark style="color:blue;">Title font</mark></td><td>Set the collection title font to the Body or Heading font selected in your theme settings.</td></tr><tr><td><mark style="color:blue;">Title alignment</mark></td><td>Display headings either to the Left, Center, or Right, underneath the collection item image.</td></tr></tbody></table>

## Section layout

***

Change the layout of collection lists items to fit how many collections you have and the style you want.

* Display collection items as a **Grid** or single-row **Slider**
* Choose the **Number of columns and rows** for mobile and desktop

<div><figure><img src="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2FkZJLuWVwOIuxjSLFWK7l%2Fcollection-list-mobile.png?alt=media&#x26;token=b2c7946f-07c0-4d32-84d5-266d14971abe" alt="" width="186"><figcaption><p>Mobile 4 column layout</p></figcaption></figure> <figure><img src="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2FrWqottBvoaF8u1ORYuu2%2Fcollection-list-slider.png?alt=media&#x26;token=5e8ad5be-7224-472b-b5d5-d089d2c70e86" alt="" width="187"><figcaption><p>Mobile slider enabled</p></figcaption></figure></div>

`Click section to find settings`

<table><thead><tr><th width="244">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Number of columns on desktop</mark></td><td>Choose how many collections to show per row on desktop screens: either <strong>4</strong>, <strong>5</strong>, or <strong>6</strong> columns.</td></tr><tr><td><mark style="color:blue;">Number of rows on desktop</mark></td><td><p>Choose how many rows of collection items to display on desktop screens. <strong>Show all rows</strong> or limit the initial number of rows between <strong>1</strong> and <strong>5</strong>. A “Show all” button will reveal additional rows.<br></p><p>This settings does not apply if you enable the slider.</p></td></tr><tr><td><mark style="color:blue;">Enable slider on desktop</mark></td><td>Display collection list items in a single-row carousel that visitors can rotate through.</td></tr><tr><td><mark style="color:blue;">Number of columns on mobile</mark></td><td>Choose how many collections to show per row on mobile screens: either <strong>2</strong>, <strong>3</strong>, or <strong>4</strong> columns.</td></tr><tr><td><mark style="color:blue;">Number of rows on mobile</mark></td><td><p>Choose how many rows of collection items to display on mobile. <strong>Show all rows</strong> or limit the initial number of rows between <strong>2</strong> and <strong>5</strong>. A “Show all” button will reveal additional rows.<br></p><p>This settings does not apply if you enable the slider.</p></td></tr><tr><td><mark style="color:blue;">Enable slider on mobile</mark></td><td>Display collection list items in a single-row carousel that visitors can swipe left and right view more.</td></tr></tbody></table>

## Section header

***

Add section **headings** and an optional **button** above the collection list.

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your theme editor (**Customize**):

1. Click on **Collection list** to open the section settings.
2. Enter **Accent** text to display a small label above the heading.
3. Enter **Heading** text to display a section title in the top-left.

   > The default heading is "Collection list."
4. Enter **Subheading** text to display below the heading.

   > Use the formatting buttons to add text styles, links, or lists. To learn more, see Shopify's [Rich text editor guide](https://help.shopify.com/en/manual/shopify-admin/productivity-tools/rich-text-editor#format-text-with-the-rich-text-editor).
5. Select or paste a URL for the **Button Link**.

   > The link is set to "All collections" by default. You can customize your list of collections in the Collections list template.
6. Change the **Button label** (e.g. "View all collections").

   > Leave this field blank to remove the button.

   > The most effective button labels ask customers to do something (e.g. Get started, Join us, Shop now). To learn more, [read "What is a Call to Action?"](https://www.thebalancesmb.com/call-to-action-1794380)
7. Click **Save**.

</details>

<table><thead><tr><th width="239">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Center header content</mark></td><td>Display headings in the center above the section. Uncheck this option to align headings to the left.</td></tr><tr><td><mark style="color:blue;">Accent</mark></td><td>Add text to show a small heading above the main section heading.</td></tr><tr><td><mark style="color:blue;">Heading</mark></td><td>Add text to show a main heading above the section.</td></tr><tr><td><mark style="color:blue;">Subheading</mark></td><td>Add text to show a subheading below the main heading.</td></tr><tr><td><mark style="color:blue;">Maximum text width</mark></td><td>Set the maximum width of heading text between 400 and 1000 pixels.</td></tr></tbody></table>

\\

***

> **Related links**
>
> [Collection list buttons](https://help.fluorescent.co/cornerstone/pages/theme-sections/collection-list-buttons)\
> [Collection list page](https://help.fluorescent.co/cornerstone/pages/templates/collections-list-page)\
> [Featured collection](https://help.fluorescent.co/cornerstone/pages/theme-sections/featured-collection)\
> [Featured collection with media](https://help.fluorescent.co/cornerstone/pages/theme-sections/featured-collection-with-media)