# Favorite collection

![image](https://docs-assets.foxecom.app/zest-theme/Fox-BG%20Light%20(32)_3Q894sFI.jpg)

<Hint type="info">

This section is available on ✨ **Zest version 9.0.0 onwards**. See our [Changelog](/zest-theme/changelog)

</Hint>

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

<Hint type="success">

**Steps:**

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

</Hint>

![image](https://docs-assets.foxecom.app/zest-theme/image_FnV6HCBK.png)

## How to edit a Favorite collection **section**

### Section settings

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

![image](https://docs-assets.foxecom.app/zest-theme/image_tYj8p7bd.png)

![image](https://docs-assets.foxecom.app/zest-theme/Untitled%20design%20(24)_Ellog2QC.gif)

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

![image](https://docs-assets.foxecom.app/zest-theme/image_4USaIjTS.png)

<Hint type="warning">

The **Column gap** setting only works on the mobile screen.

</Hint>

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

![image](https://docs-assets.foxecom.app/zest-theme/image_vWNEvPju.png)

#### 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">

![image](https://docs-assets.foxecom.app/zest-theme/image_O4ca22mk.png)

</Tab>

<Tab title="Disable swipe on mobile">

![image](https://docs-assets.foxecom.app/zest-theme/image_JHi0TW5Y.png)

</Tab>
</Tabs>