# Favorite collection

<figure><img src="/files/3Q894sFIsG58Uxirtxys" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
This section is available on ✨ **Zest version 9.0.0 onwards**. See our [Changelog](/zest-theme/changelog.md)
{% endhint %}

The **Favorite collection** section allows you to display a curated collection of products on your homepage. This section helps highlight specific products that you want to showcase, making it easier for customers to discover them.

## How to add a Favorite collection **section** to your Shopify store <a href="#how-to-add-a-highlight-text-with-image-section-to-your-shopify-store" id="how-to-add-a-highlight-text-with-image-section-to-your-shopify-store"></a>

{% hint style="success" %}
**Steps:**

1. In the theme editor **(Customize)** > click **Add section**
2. Select **Favorite collection**.
3. Make necessary changes.
4. **Save** the settings.
   {% endhint %}

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

## How to edit a Favorite collection **section** <a href="#how-to-edit-a-highlight-text-with-image-section" id="how-to-edit-a-highlight-text-with-image-section"></a>

### Section settings <a href="#section-settings" id="section-settings"></a>

#### General

* Select the **Collection** of products you want to display.
* Upload a custom **Image** to visually represent the collection.
* Enable the **Enable sticky columns on desktop** option to keep the collection fixed while scrolling.

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

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

#### Grid settings

* Use the **Products to show** slider to select the number of products displayed in the section (2 - 12).
* You can modify the **Column gap** and **Row gap** between each product cards for a balanced layout.

<figure><img src="/files/4USaIjTSPMN6LVtnK6j1" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
The **Column gap** setting only works on the mobile screen.
{% endhint %}

#### Product card

* Select the product card's **Image ratio** as:
  * Use global settings
  * Adapt to image
  * Square (1:1)
  * Portrait (3:4)
  * Landscape (4:3)
* Enable or disable the **Show vendor** option display or hide product vendors on the product cards.

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

#### Mobile layout

Check the **Enable swipe on mobile** option to make the product list swipeable instead of showing in a grid layout.

Choose between **1 column** or **2 column** layout option in the **Number of columns on mobile** for better readability.

{% tabs %}
{% tab title="Enable swipe on mobile" %}

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

{% tab title="Disable swipe on mobile" %}

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


---

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