# Featured collection

<figure><img src="/files/JgsBIFL9udaLcCXdd4m8" alt=""><figcaption></figcaption></figure>

Featuring collections can help merchants promote sales and new collections. This article will show you how to add and customize your featured collection section in Sleek.

## How to add a Featured collection section

{% hint style="success" %}
Steps

1. In the theme editor **(Customize)**, click **Add section.**
2. Locate **Featured collection.**
3. Make necessary changes.
4. **Save.**
   {% endhint %}

## How to customize a Featured collection section

### **General**

Adjust the **Color scheme** for this section.

<figure><img src="/files/OXgyhyqszXZSSG8KWAzQ" alt=""><figcaption></figcaption></figure>

### Section header

You can choose your preferred section header **Layout** (Vertical/ Horizontal/ Standing column).

{% tabs %}
{% tab title="Vertical" %}

<figure><img src="/files/BJ23FFa3QCW9BVZh25sg" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Horizontal" %}

<figure><img src="/files/ERiwo2LzHte7jLoVRFsv" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Standing column" %}

<figure><img src="/files/YKsesnucbwtYyfgs13pG" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

Use the provided text fields to add a suitable **Heading**/ **Subheading**/ **Description**.

* Leave them blank if you do not want to display them.

Adjust the **Heading size** (Heading 1/ Heading 2/ Heading 3) and enable **Show collection description from the admin** checkbox if you wish to show the collection's description set in the admin.

<figure><img src="/files/x9TkPgTcsotXEpkbzdyG" alt=""><figcaption></figcaption></figure>

Here you can choose to display the collection you want and set up product cards.

* Select the collection to show.

To create collections for your store, see [Collections](https://help.shopify.com/en/manual/products/collections).

<figure><img src="/files/F55vmwpJKgV0CIwNmasD" alt=""><figcaption></figcaption></figure>

### Grid settings

Use the slider to adjust the **Maximum products to show** (between 2 and 12) and the **Number of columns on desktop** (between 2 and 6).

<figure><img src="/files/fA0ye6vUKGF0k1K8VBuI" alt=""><figcaption></figcaption></figure>

You can also control the suitable spacing between the product cards by selecting **Column gap** and **Row gap** options.

<figure><img src="/files/KBg0WJK2I9AIVBwYDj9q" alt=""><figcaption></figcaption></figure>

Provide the Featured collection with an appealing and appropriate **Grid layout**:

* Standard
* Grid mix

<figure><img src="/files/6wqPT8HhUrrdN8JWe6hU" alt=""><figcaption></figcaption></figure>

{% tabs %}
{% tab title="Standard" %}

<figure><img src="/files/9GGhNQZNjdv8T64BA8QH" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Grid mix" %}

<figure><img src="/files/1NcC2dFxkB0MkZ8hV9Ks" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### Carousel settings

You can enable the carousel effect in your featured collection by choosing **Enable carousel on desktop** checkbox.&#x20;

Carousel shows only when the number of products is larger than the number of columns.

<figure><img src="/files/6rE3a4bLuItaq0AZ7tdT" alt=""><figcaption></figcaption></figure>

### Product cards

Select the product card's **Image ratio** as:

* Use global settings
* Adapt to image
* Square (1:1)
* Portrait (3:4)
* Landscape (4:3)

<figure><img src="/files/Wql2kMbX9s4GovL9GMHx" alt=""><figcaption></figcaption></figure>

To set up other addons such as badges, buttons, etc. to the product cards, check out this article:

{% content-ref url="/pages/VRViDTCDEUgZDny5PXGM" %}
[Product cards](/sleek-theme/theme-settings/product-cards.md)
{% endcontent-ref %}

### **Mobile layout**

You can adjust the **Number of columns on mobile** to **1 column** or **2 columns.**

<figure><img src="/files/FGtQstkWXg2jdXOq18EO" alt=""><figcaption></figcaption></figure>

If you are not into the grid layout, you can use the carousel layout by selecting the **Enable swipe on mobile**.

<figure><img src="/files/OIRRovFhiZxCAQLv8w7d" alt=""><figcaption></figcaption></figure>

### **View all button**

Add a call-to-action **View all button** to direct customers to collection pages.

<figure><img src="/files/ZV98rRqQj9h3g6oz3IrZ" alt=""><figcaption></figcaption></figure>

This button can be positioned on the header on both desktop and mobile by enabling the **Show on heading section** checkbox.

<figure><img src="/files/bmTqtrkLvtnGOkVuT8xU" alt=""><figcaption></figcaption></figure>

{% tabs %}
{% tab title="On desktop" %}

<figure><img src="/files/0RvGa8uH7dPfbrQ3rjsN" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="On mobile" %}

<figure><img src="/files/YBwF2SwkRM1VbDwBYS0S" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

You can also insert the **Button label**&#x20;

* Leave the label blank if you want to hide the button.

Moreover, the **Button style** can be changed to the Primary button/ Secondary button/ Underline button.

<figure><img src="/files/gtsSTXuovjnkMSJNnbSf" alt=""><figcaption></figcaption></figure>


---

# 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://docs.foxecom.com/sleek-theme/theme-sections/featured-collection.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.