# Collection list

{% hint style="danger" %} <mark style="color:red;">Theme retirement</mark> | Context is no longer available on the Shopify theme store. **Theme support and updates for current users will end after May 18, 2024**. [Learn more here](https://help.fluorescent.co/context/readme/theme-retirement).
{% endhint %}

The **Collection list** section displays a grid of selected collections with featured images.

## Set up section

Add this section to your template and use the drag-and-drop handles to re-order its position. You can add this section multiple times with different content and settings.

{% hint style="warning" %}
Editing a template changes all pages that use that template. To edit specific pages, you can [create new templates](https://help.fluorescent.co/context/general/editing-themes/using-templates#create-and-assign-multiple-templates) or [insert dynamic content with metafields](https://help.fluorescent.co/context/general/adapting-your-theme/dynamic-content-with-metafields).
{% endhint %}

<details>

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

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

1. Select a **Template** to edit from the dropdown menu in the top bar.

   > Learn how to use templates in our [Templates guide](https://help.fluorescent.co/context/general/editing-themes/using-templates).
2. Under **Template**, click **(+) Add section** and select **Collection list**.
3. Click and hold the drag-and-drop handles **`⋮⋮`** to re-order your sections.

</details>

## Select feature collections

Select multiple **Collections** to display in a grid with featured collection images that link to those collections. We recommend adding a **Collection image** in your Shopify Admin. If no image is set, Context will use a product image from that collection by default.

<details>

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

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

1. Click **(+) Add Collection**.
2. Click on a **Collection** block to open the block settings.
3. Click **Select collection** to find and select one of your collections.
4. Return to the list of your template sections in the sidebar and repeat this process until you've added all the Collection blocks you need.
5. (*Optional*.) Click and hold the drag handles **`⋮⋮`** to rearrange the blocks:

   ![](https://3096289102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fvbp0IBkqpivnJ0UBSwsh%2Fuploads%2Fgit-blob-22765d66f3708b95b5907a71e6b24326594ad146%2Fshopify-content-drag-handles.jpeg?alt=media)

   > Click **Remove block** in the block settings to delete a block.

   > Click the **Eye icon** to hide or unhide a block.
6. Click **Save**.

</details>

## Section content and layout

The **Collection list** section settings apply to all Collection list blocks. You can add a main **Heading** and **Subheading**, set the number of **columns per row**, change the **Image aspect ratio** (shape or orientation).

<details>

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

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

1. Click on the **Collections list** section to open the section settings.
2. (*Optional*.) Add **Heading** text to display as a title above the section.
3. Choose to display *2*, *3*, or *4* **Columns per row** of your selected collections.

   > On mobile, Collection blocks are displayed in a single column.
4. To make your images a uniform shape and size, select the **Image aspect ratio** to crop your images to **Square**, **Landscape**, or **Portrait**.

   > The default **Natural** setting will display the original orientation of your image.

   ![](https://3096289102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fvbp0IBkqpivnJ0UBSwsh%2Fuploads%2Fgit-blob-18e593ad0edf007db92b2db4471c455059562ccf%2Faspect-ratio.jpeg?alt=media)
5. Click **Save**.

</details>

## Settings reference

Click the **Collection list** section to find the following settings.

| Setting             | Description                                                                                                                                                                                   |
| ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Select collection   | Choose from your store's list of product collections.                                                                                                                                         |
| Heading             | Enter text to display a section title above the collection list.                                                                                                                              |
| Collections per row | Select the number of collections to show in each row for desktop. The section can display a maximum of 12 collections.                                                                        |
| Image aspect ratio  | Choose to crop all images to be a single uniform shape. Select Portrait (2:3), Square (1:1), or Landscape (3:2). Select Natural to display images in their original shape (without cropping). |
| <p><br></p>         |                                                                                                                                                                                               |

***

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