> 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/handpicked-products.md).

# Handpicked products

<figure><img src="/files/42U8shsOOcSJk60HIQ02" alt=""><figcaption></figcaption></figure>

The handpicked products section lets you display a product grid with handpicked items from your store inventory. Thanks to the handpicked products section, you can point visitors to the exact products that you want to highlight.&#x20;

## How to add a Handpicked products section to your Shopify store

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

1. In the theme editor **(Customize)**, click **Add section.**
2. Select **Handpicked products.**
3. Make necessary changes.
4. **Save.**
   {% endhint %}

## How to customize a Handpicked products section

### Text & Styling

* **Heading**: Title of the section.
* **Subheading**: Optional text shown above the heading.
* **Description**: Add supporting copy to explain the selection or context.

### Products

* **Products**: Select up to **50 individual products** from your store.
* To reorder them, simply drag and drop in the theme editor.

{% hint style="info" %}
💡 **Pro tip**: You can combine products from different collections in one list. Great for gift guides or curated bundles.
{% endhint %}

### Grid settings

* **Products to show**: Choose how many products appear in total. If you enable a carousel, more can be shown via scroll.
* **Number of columns on desktop**: Control how many products display per row.
* **Column gap / Row gap**: Adjust the spacing between product cards.

### Carousel settings

* **Enable carousel on desktop**: When enabled, products can be scrolled horizontally.
* **Show navigation/pagination**: Optional arrows or dots for easier browsing.

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

{% hint style="warning" %}
Carousel will only appear if the number of products exceeds the number of columns. For example, if you show 4 products per row, the carousel needs 5+ products.
{% endhint %}

### Product card settings

* **Image ratio**: Choose how product images display (square, portrait, adapt to image, etc.)
* **Show vendor**: Toggle the brand/vendor name below the product title.

{% hint style="info" %}
📝 Tip: Use “Use global settings” to keep image sizes consistent across all product sections.
{% endhint %}

### View all button

* **Button label**: Customize the text.
* **Button link**: Paste the link to a collection, page, or product.
* **Button style**: Choose from solid, outline, or underline styles.

Optional: Leave the link field empty if you don’t want to show this button.

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

### Mobile layout

* **Enable swipe on mobile**: Let mobile users swipe horizontally through the products.

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

* **Number of columns on mobile**: Choose between 1 or 2 columns.

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