# Collection list buttons

Use the **Collection lists buttons** section to display selected collections as clickable buttons, either in multiple rows or in a single row slider that visitors can swipe through.

<figure><img src="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2FWXYf7BU3uWdowroZWeQG%2Fcollection-buttons-botanical.png?alt=media&#x26;token=50629590-5560-4612-97d0-23fe73d47493" 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 buttons**. 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 collection

***

Select multiple **Collections** to display as buttons 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 buttons** to open the 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** to display on both *desktop* and *mobile* screens\_.\_

   > 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** or color background (**filled**).
* 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>) or a solid color background (<strong>Filled</strong>).</td></tr><tr><td><mark style="color:blue;">Shape</mark></td><td>Choose to display collection items as a <strong>Rectangle</strong> or with <strong>Slightly rounded corners</strong>.</td></tr><tr><td><mark style="color:blue;">Image source</mark></td><td>Choose to display the <strong>Collection image</strong> or <strong>First product image</strong> for the collection items.</td></tr><tr><td><mark style="color:blue;">Image position</mark></td><td>Display images to the <strong>Left</strong> or <strong>Right</strong> of collection item titles.</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>For both desktop and mobile, change the space around images: between 0px and 20px.</td></tr><tr><td><mark style="color:blue;">Image size</mark></td><td>For both desktop and mobile, set the pixel width of images for mobile screens: between 40 and 80 pixels.</td></tr><tr><td><mark style="color:blue;">Title font</mark></td><td>Set the collection title font to the <strong>Body</strong> or <strong>Heading</strong> font selected in your theme settings.</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

`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 3 or 4 columns.</td></tr><tr><td><mark style="color:blue;">Number of rows on desktop</mark></td><td>Choose how many rows of collection items to display on desktop screens. You can Show all rows of collection items at once or limit the initial number of rows between 1 and 5. Visitors can reveal additional rows by clicking a “Show all” button.</td></tr><tr><td><mark style="color:blue;">Grid spacing</mark></td><td>Change the spacing between collection list buttons. Select <strong>Comfortable</strong> for more spacing or <strong>Compact</strong> for less.</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>1</strong> or <strong>2</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 screens. You can Show all rows of collection items at once or limit the initial number of rows between <strong>2</strong> and <strong>5</strong>. Visitors can reveal additional rows by clicking a “Show all” button.</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](https://help.fluorescent.co/cornerstone/pages/theme-sections/collection-list)\
> [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)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.fluorescent.co/cornerstone/pages/theme-sections/collection-list-buttons.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.