# Handpicked products

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FtQWFqopjxdq857jQ0nRi%2FFox-BG%20Light%20(38).jpg?alt=media&#x26;token=e3effb9b-ba17-4851-b1a0-595e1b2dfaea" 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="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2Fs02wVWzr8QrcOTqJyaNN%2Fimage.png?alt=media&#x26;token=070e88ac-a0b5-4788-abb1-2cf23d1607bb" 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="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2F2NOdEdVx6dBeMdKZm8VA%2Fimage.png?alt=media&#x26;token=9be898f9-c895-4d16-ad31-544a127e7043" alt=""><figcaption></figcaption></figure>

### Mobile layout

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

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FZv005O92XBea30wy23LV%2Fimage.png?alt=media&#x26;token=9a2920fa-feae-4371-85ff-e301baf43567" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FtCXCC1xxnZLn45SCtoWw%2Fimage.png?alt=media&#x26;token=688bf8b4-1c17-4c2f-bb47-cbf525148ac3" alt=""><figcaption></figcaption></figure>


---

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