# Favorite collection

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2F2PHbnm8RGiW7cY8pAkfA%2FFox-BG%20Light%20(32).jpg?alt=media&#x26;token=b82fcde0-d179-4107-9496-c02f30aa61a3" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
This section is available on ✨ **Zest version 9.0.0 onwards**. See our [changelog](https://docs.foxecom.com/zest-theme/changelog "mention")
{% 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="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FYwgJtGWayYXdKZTZzpvW%2Fimage.png?alt=media&#x26;token=5257f277-3b0b-4f4d-9d0a-2bfbaf0f9131" 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="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2F5fU8kBzcNPI8gRjdst3O%2Fimage.png?alt=media&#x26;token=a738086d-00b1-4aef-86d7-32198ef1edb8" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2F7zjStjXA4vi4FWNNkY1d%2FUntitled%20design%20(24).gif?alt=media&#x26;token=cb096c62-646c-409a-86ce-4f47d57687fc" 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="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FJV9bA2uK7R4K4z3dZez9%2Fimage.png?alt=media&#x26;token=0b026921-a476-4b59-9bac-7d023362ba0e" 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="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FnJFfD9Teuskp9XKajWlj%2Fimage.png?alt=media&#x26;token=d8145eec-4fc2-44f1-a124-93046c11c116" 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="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FxmmcO7XydsvCuaNFt6Sx%2Fimage.png?alt=media&#x26;token=6d7a900b-5f04-4803-941c-e70531f6ca04" alt=""><figcaption></figcaption></figure>
{% endtab %}

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

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FIrICC5N1WfWXzY2wcwwe%2Fimage.png?alt=media&#x26;token=a4ad7cd1-aca4-4b28-b3db-fe16d3584c53" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}