> 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/favorite-collection.md).

# 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 %}