# Product suggestion

<Embed url="https://www.youtube.com/watch?v=RWsJtaH9gXc" />

The **Product suggestion** section lets you showcase curated product collections in a customizable grid or carousel, helping customers easily discover items that pair well together or fit their shopping interests.

![image](https://docs-assets.foxecom.app/pebble-theme/Fox-BG%20Light%20(4)_WYrpv7ry.jpg)

## How to add a Product suggestion section to your Shopify store

<Hint type="success">

1. In the theme editor **(Customize)**, click **Add section.**
2. Select **Product suggestion** section.
3. Make necessary changes.
4. **Save.**

</Hint>

## How to customize a Product suggestion section

### Section settings

* **Product count:** Controls how many products are displayed
* **Type**: Choose whether they appear in a grid or a carousel.

<Tabs>
<Tab title="Grid">

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

</Tab>

<Tab title="Carousel">

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

</Tab>
</Tabs>

* **Columns:** Sets how many products appear in each row.
* **Column gap:** Controls the horizontal spacing between product cards.
* **Row gap:** Controls the vertical spacing between product rows.
* **Enable swipe on mobile:** Allows users to swipe horizontally through products on mobile.
* **Mobile columns:** Sets how many products appear per row on mobile devices.
* **Column gap mobile:** Controls the horizontal spacing between product cards on mobile.
* **Row gap mobile:** Controls the vertical spacing between product rows on mobile.

### Block settings

#### Header

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

<Expandable title="📦 Nested dynamic blocks">

The **Header** block supports 4 nested block types:

<Table widths="219.5386962890625,auto">

| Dynamic blocks | Purpose |
| --- | --- |
| **Heading** | Primary title text used to introduce the section or key content. |
| **Subheading** | Secondary text that provides additional context or supports the main heading. |
| **Text** | Regular body text used for descriptions, details, or any supplementary information within the block. |
| **Button** | A call-to-action element that users can click to open another page. |

</Table>

</Expandable>

#### Product suggestion

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

* **Collection:** Selects which collection to display in this suggestion block.
* **Title:** Lets you set a custom heading for the block; leave it blank to use the collection’s default title.
* **Preset:** Determines the text style applied to the title.

<Expandable title="📦 Nested dynamic blocks - Badge block">

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

**Badge block:** Defines the text displayed on the badge

</Expandable>