# Featured collection grid

The **Featured collection grid** section displays a grid of products from one of your collections. With [Quick shop](https://help.fluorescent.co/lorenza/products/quick-shop) enabled, customers can buy your products without leaving the page.

> See the [Featured collection](https://help.fluorescent.co/lorenza/sections/theme-sections/featured-collection) and [Featured collection row](https://help.fluorescent.co/lorenza/sections/theme-sections/featured-collection-row) sections for alternate layouts.

## Set up section

Add this section to any template (except Checkout) 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 **Featured collection grid**.
3. Click and hold the drag-and-drop handles **`⋮⋮`** to re-order your sections.

</details>

### Select featured collection

Select a **Collection** to display its products in a grid with adjustable rows and columns.

<details>

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

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

1. Click the **Featured collection grid section**.
2. Use the **Select collection** button find the collection you want to feature.

   > We recommend collections with at least 4 products.
3. Click **Save**.

</details>

## **Section headings and button**

<details>

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

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

1. Click on the **Featured collection grid** section to open the section settings.
2. Change the **Small heading** text that displays above the Heading.

   > We recommended using the **Small heading** as a label or category such as "Collections" or "Sale".
3. Change the **Heading** text for the section title.

   > We recommended a short title of just a few words.
4. Change the **Subheading** text displayed below the heading.

   > We recommend two or three short sentences.
5. Change the "Shop now" **Button text** for your call-to-action button.

   > The button links to the selected feature collection.

   > The most effective button labels ask your 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)
6. Click **Save**.

</details>

## Section style and layout

Once you've added a featured collection and your section content, you can customize the overall look of the section.

<details>

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

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

1. Click on the **Featured collection** 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-210dd1cd4bebc194e5b3d826b620903e885b95e8%2Ffeatured-collection-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. Choose how many **Columns** and **Rows** of products to display in the grid.

   > Choose between *2* and *4* columns and *1* and *3* rows.

   > Note that on mobile devices only one column is shown at once.
5. 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://1086282208-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fl6iv1HA2gJCuwR5V6stX%2Fuploads%2Fgit-blob-18e593ad0edf007db92b2db4471c455059562ccf%2Faspect-ratio.jpeg?alt=media)
6. Change the **Heading alignment** to position the headings and button on the **Left** or **Center** of the section.
7. 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.
8. Click **Save**.

</details>

## Settings reference

Click on the section to find the following style settings:

| Setting            | Description                                                                                                                                                                                                                                                                                             |
| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 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). |
| Button text        | Change the "Shop now" text for your call-to-action button. The most effective button labels ask your customers to do something (e.g. Get started, Join us, Shop now).                                                                                                                                   |
| Style              | Use the Default or Contrast section style. The Contrast style uses the contrast colors in your Theme Settings.                                                                                                                                                                                          |
| Columns            | Use the slider to choose how many items should be displayed side by side. Choose between 2 and 4.                                                                                                                                                                                                       |
| Image aspect ratio | Crop the shape of your images to Square, Landscape, or Portrait. Choose Natural to display the original image shape.                                                                                                                                                                                    |
| Max width of text  | Use the slider to control the maximum width and line breaks of the headings.                                                                                                                                                                                                                            |
| <p><br></p>        |                                                                                                                                                                                                                                                                                                         |

***

> **Related links**
>
> [Featured collection row](https://help.fluorescent.co/lorenza/sections/theme-sections/featured-collection-row)\
> [Product listing settings](https://help.fluorescent.co/lorenza/products/product-listings)\
> [Collection pages](https://help.fluorescent.co/lorenza/collection-pages/collection-pages)\
> [Shopify collections guide](https://help.shopify.com/en/manual/products/collections/collection-layout#change-the-sort-order-for-the-products-in-a-collection)
