# 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)