# Collection list grid

The **Collection list grid** section displays a grid of your selected collections.

{% hint style="info" %}
See the Collection list section to display your collections as a carousel in one row.
{% endhint %}

![](https://1086282208-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fl6iv1HA2gJCuwR5V6stX%2Fuploads%2Fgit-blob-abe4ceee5f13c7b3946f025c3688c99f594f2f99%2Fcollection-list-grid.jpeg?alt=media)

## 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/lorenza/general/editing-themes/using-templates#create-and-assign-multiple-templates) or [use metafields and dynamic sources](https://help.fluorescent.co/lorenza/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/lorenza/general/editing-themes/using-templates).
2. Under **Template**, click **(+) Add section** and select **Collection list grid**.
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, Lorenza 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**.

   ![](https://1086282208-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fl6iv1HA2gJCuwR5V6stX%2Fuploads%2Fgit-blob-e8cbfbd7b5dd40c1bdc6f1c9fa14ec3f9d5a3812%2Fcollection-list-grid-section.jpeg?alt=media)
2. Click on a **Collection** block to open the settings.
3. Click **Select collection** to find and select one of your collections.

   > We recommend adding a **Collection image** in your Shopify Admin. If no image is set, Lorenza will use a product image from that collection by default.
4. (*Optional*.) Click and hold the drag handles **`⋮⋮`** to rearrange the blocks:

   ![](https://1086282208-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fl6iv1HA2gJCuwR5V6stX%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.
5. Click **Save**.

</details>

## Section content and style

Change the overall style and layout of the section, along with headings and links.

<details>

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

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

1. Click on the **Collection list** section to open the section settings.

   ![](https://1086282208-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fl6iv1HA2gJCuwR5V6stX%2Fuploads%2Fgit-blob-f55982708c8970b0cc9198329680ca6ce1c8a3a6%2Fcollection-list-grid-settings.jpeg?alt=media)
2. (*Optional*.) Use the **Section style** dropdown to use **Contrast** colors.

   > The **Contrast** style uses the contrast colors in your **Theme Settings**.
3. Choose whether to **Enable animation** to show visual effects when scrolling, hovering, or interacting with the section.
4. Select a **Text position** for the section headings, either above or beside the gallery items.

   > Choose between *Top left*, *Top center*, *Top right*, *Middle left* or *Middle right* options.

   ![Top center headings](https://1086282208-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fl6iv1HA2gJCuwR5V6stX%2Fuploads%2Fgit-blob-79acac83bb96e766329e612cb10671a7958bb14e%2Fcollection-list.jpeg?alt=media)

   ![Middle left headings](https://1086282208-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fl6iv1HA2gJCuwR5V6stX%2Fuploads%2Fgit-blob-8baf04e3f69f47a476687fc5d3a73e9ab5ee4660%2Fcollection-list-middle-left.jpeg?alt=media)
5. Select the number of **Columns** of collections to display at once.

   > Choose between *2* and *4* columns.

   > On mobile, only one column displays at once.
6. 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 images.

   ![](https://1086282208-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fl6iv1HA2gJCuwR5V6stX%2Fuploads%2Fgit-blob-18e593ad0edf007db92b2db4471c455059562ccf%2Faspect-ratio.jpeg?alt=media)
7. Change the text for the **Small heading**, **Heading**, and **Subheading**.
8. Choose a **Heading alignment** for the heading, subheading, and button.

   > Either *Left* or *Center*.
9. Use the **Max width of text** slider to control the maximum width of the headings.

   > Use this setting to create a clean visual shape for your text and avoid unwanted line breaks.
10. Click **Save**.

</details>

## Settings reference

Click on the section to find the following settings:

| Setting            | Description                                                                                                                                                                                                                                                                                             |
| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Add collection     | Add all of the collections you want to feature using this button.                                                                                                                                                                                                                                       |
| Style              | Use the Default or Contrast section style. The Contrast style uses the contrast colors in your Theme Settings.                                                                                                                                                                                          |
| Columns            | Choose to display between 2 and 4 collections in each row.                                                                                                                                                                                                                                              |
| Image aspect ratio | Crop the shape of your images to Square, Landscape, or Portrait. Choose Natural to display the original image shape.                                                                                                                                                                                    |
| Small heading      | Enter text to display as a small heading above the main heading.                                                                                                                                                                                                                                        |
| Heading            | Enter heading text to display as a section title.                                                                                                                                                                                                                                                       |
| Subheading         | 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 manual](https://help.shopify.com/en/manual/shopify-admin/productivity-tools/rich-text-editor#format-text-with-the-rich-text-editor). |
| Heading alignment  | Set the position of the headings and button to the Left or Center of the section.                                                                                                                                                                                                                       |
| Max width of text  | Use the slider to control the maximum width and line breaks of the headings.                                                                                                                                                                                                                            |
| <p><br></p>        |                                                                                                                                                                                                                                                                                                         |

***

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