# Featured collection

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2Fdzy7B6sI7JGnLMUtbxxK%2FGroup%204977.png?alt=media&#x26;token=3ecc628b-82d2-4555-bfbc-6dfe6e82d723" 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="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FQjvyvNXbX5vxwJHIQ0S2%2Fimage.png?alt=media&#x26;token=d0e6ef11-fe99-4c57-90db-42db738350ff" 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="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FvEHBtEJSY0bJDoyvw08C%2Fimage.png?alt=media&#x26;token=d45ee8e9-bf55-4c54-bf77-d3a7ba98f217" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Horizontal" %}

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FHQhmnABtmINnOMOyS7sW%2Fimage.png?alt=media&#x26;token=73a0181e-fa4a-4115-8eaf-89a29c6fe3d7" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Standing column" %}

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FWdKKW4KGRksjIATjToxP%2Fimage.png?alt=media&#x26;token=ecbfff58-d91e-4aad-88e5-e16e87b8fd3c" 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="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FaZXqfbGdztByafCAAfH5%2Fimage.png?alt=media&#x26;token=f70eaee5-8bba-4a17-ac94-2b0ff33bd1eb" 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="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FZ8HOxCDLuZCoBt8dJTxK%2Fimage.png?alt=media&#x26;token=158273c7-dad9-48d7-a833-1437722137df" 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="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FLh7aclcOlexiEVcIwqnE%2Fimage.png?alt=media&#x26;token=4b33435b-c115-49e3-aa33-0461e8d2d971" 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="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FtPfD0nmnIVvFnOpB4ote%2Fimage.png?alt=media&#x26;token=1a139754-69fa-4bc5-8fff-fc4d500fcfe6" alt=""><figcaption></figcaption></figure>

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

* Standard
* Grid mix

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FD2DrGXOURWyMuiU2VTJ1%2Fimage.png?alt=media&#x26;token=16af7756-dbe3-43aa-82f4-6afcb2bea754" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FL05yLy8HBBLPWKQ5oG1l%2Fimage.png?alt=media&#x26;token=0e19518a-3849-426e-80d0-42905ddc49cd" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Grid mix" %}

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FLWlV7lNRaSBPnnSAZHWq%2Fimage.png?alt=media&#x26;token=cf74fdd3-b54c-422f-aaa8-cc725d3b1d80" 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="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FwTH9ITLJ41UB1yW5Aeti%2Fimage.png?alt=media&#x26;token=4a0d2c16-71cc-4415-93fe-bdbffd05ffbd" 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="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FQtGLnGmPwr21CeTMwMLk%2Fimage.png?alt=media&#x26;token=c680f36c-cf14-4f19-aebb-db99136bf43f" 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="../theme-settings/product-cards" %}
[product-cards](https://docs.foxecom.com/sleek-theme/theme-settings/product-cards)
{% endcontent-ref %}

### **Mobile layout**

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

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FlU107ZAwq3wiCT2ar5wi%2Fimage.png?alt=media&#x26;token=3b047fa5-5fc4-43af-9249-0c44ee73d2c4" 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="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FAduNv9v8SW4xsjekWIgs%2Fimage.png?alt=media&#x26;token=0fb79e26-fa86-49ee-964f-958a08f3d21c" alt=""><figcaption></figcaption></figure>

### **View all button**

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

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2F6ThH5JjcB7TtamDrfeaf%2Fimage.png?alt=media&#x26;token=f7b5225e-6f9a-4d2f-aa40-9d67cc4a3fc7" 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="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FGAd6LzfFLMgZ4UV6w0Bp%2Fimage.png?alt=media&#x26;token=8b0c2b6a-8723-4c6b-a4b0-82d1998503ac" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2Fymy5K874wNcDhDz55CCA%2Fimage.png?alt=media&#x26;token=632dcf69-8c06-4e42-99a9-f818580d2549" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="On mobile" %}

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2F3O4lskp98PdjoCSladag%2Fimage.png?alt=media&#x26;token=4940f290-6e24-465c-a30f-a8dcce554342" 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="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2Fs3oaTggxTZIITT1gaU7Z%2Fimage.png?alt=media&#x26;token=2e3307df-6066-4b28-b283-5af1e70912df" alt=""><figcaption></figcaption></figure>
