> For the complete documentation index, see [llms.txt](https://foxecom.gitbook.io/zest-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://foxecom.gitbook.io/zest-theme/theme-sections/featured-collection.md).

# Featured collection

<figure><img src="/files/XHtOZPAdjEihK7eFoAFS" 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 Zest.

## How to add a Featured collection section to your Shopify store

{% hint style="success" %}
Steps

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

## How to customize your Featured collection section

### **Section settings**

#### ⚙️ Grid settings

<table><thead><tr><th width="280">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Layout</strong></td><td>Choose to display the section header with the View all button in horizontal or vertical layout.</td></tr><tr><td><strong>Collection</strong></td><td>Choose the collection whose products will appear in the grid.</td></tr><tr><td><strong>Products to show</strong></td><td>Limit the number of products displayed.</td></tr><tr><td><strong>Number of columns on desktop</strong></td><td>Set how many products display per row (2–12 columns).</td></tr><tr><td><strong>Column / Row gap</strong></td><td>Control spacing between items in the grid.</td></tr></tbody></table>

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

{% tabs %}
{% tab title="Section header layout: Horizontal" %}

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

{% tab title="Section header layout: Vertical" %}

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

#### :shopping\_bags: Product card settings

<table><thead><tr><th width="280">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Image ratio</strong></td><td>Inherit global settings or choose a fixed ratio for product cards' image.</td></tr><tr><td><strong>Show vendor</strong></td><td>Toggle whether to display the product’s vendor name.</td></tr></tbody></table>

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

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

#### 🎠 Carousel settings

<table><thead><tr><th width="280">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Enable carousel on desktop</strong></td><td>Turns the static grid into a scrollable carousel (only if items > columns).</td></tr><tr><td><strong>Show navigation / pagination</strong></td><td>Adds arrows or page dots to the carousel.</td></tr></tbody></table>

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

#### 🔘 View all button

<table><thead><tr><th width="250">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Show on heading section</strong></td><td>Enables the “View all” link next to your heading.</td></tr><tr><td><strong>Button label</strong></td><td>Customize the CTA.</td></tr></tbody></table>

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

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

{% tab title="Show on heading section" %}

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

#### 📱 Mobile layout

<table><thead><tr><th width="250">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Enable swipe on mobile</strong></td><td>Allow horizontal swipe navigation.</td></tr><tr><td><strong>Number of columns</strong></td><td>Choose 1 or 2 columns on mobile.</td></tr></tbody></table>