# Featured collection

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FBGhrmVBbmNLv9YMYKgAZ%2FFox-BG%20Light%20(36).jpg?alt=media&#x26;token=821950c6-1c8d-4c73-b1d2-6cd3d7d0322e" 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="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FY6AYatkYbSXyRraVz4Yb%2Fimage.png?alt=media&#x26;token=4bb6b6c8-8f80-4356-8c91-d6cc0673b19a" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FObewb0uXyDjcg1RSFf7C%2Fimage.png?alt=media&#x26;token=f7c57d17-a83d-4261-ab3a-c1424bf6b64c" alt=""><figcaption></figcaption></figure>
{% endtab %}

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

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2F5Dl3kjYuwMzRUevh7hhb%2Fimage.png?alt=media&#x26;token=4f6d48bf-31c6-459d-be23-d71ba423e9d1" 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="../theme-settings/product-card" %}
[product-card](https://docs.foxecom.com/zest-theme/theme-settings/product-card)
{% 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="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FyYjOqphwGzBB4sjNaXR2%2Fimage.png?alt=media&#x26;token=0373cd59-27de-4b3a-9f5f-cd84a5714e01" 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="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FMFvblIKhtxTGUWKNltQo%2Fimage.png?alt=media&#x26;token=127e7144-1034-4722-af0f-bff1e4af4ce2" alt=""><figcaption></figcaption></figure>
{% endtab %}

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

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FPwoe0chzuMQ5ebqqdSZs%2Fimage.png?alt=media&#x26;token=d10d9703-aa3f-4ead-a9bf-1223eb4d5912" 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>


---

# 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/zest-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.