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

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FVsDRdxsxQeI83XGHOv5j%2FFox-BG%20Light%20(4).jpg?alt=media&#x26;token=4f88e675-279e-457e-8645-cba892db9dd0" alt=""><figcaption></figcaption></figure>

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

{% hint style="success" %}

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

## How to customize a Product suggestion section <a href="#how-to-customize-a-banner-with-tabs-section" id="how-to-customize-a-banner-with-tabs-section"></a>

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

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FIFNfbWdcjAd48UKLwvMA%2Fimage.png?alt=media&#x26;token=8121c70e-1424-4125-99c0-88650f132ec4" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Carousel" %}

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2F2QxiyVBCB6MLE3dMPcHG%2Fimage.png?alt=media&#x26;token=a554613f-80a1-42b7-aa65-c3f669929338" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

* **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

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FgikrV6fTj141Ev1vWWzY%2Fimage.png?alt=media&#x26;token=7643273d-ebd9-4ffb-bcb8-11c2e3420013" alt=""><figcaption></figcaption></figure>

<details>

<summary>📦 Nested dynamic blocks</summary>

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

<table><thead><tr><th width="219.5386962890625">Dynamic blocks</th><th>Purpose</th></tr></thead><tbody><tr><td><strong>Heading</strong></td><td>Primary title text used to introduce the section or key content.</td></tr><tr><td><strong>Subheading</strong></td><td>Secondary text that provides additional context or supports the main heading.</td></tr><tr><td><strong>Text</strong></td><td>Regular body text used for descriptions, details, or any supplementary information within the block.</td></tr><tr><td><strong>Button</strong></td><td>A call-to-action element that users can click to open another page.</td></tr></tbody></table>

</details>

#### Product suggestion

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2F3FNTLelFx1dli2idwlCc%2Fimage.png?alt=media&#x26;token=afcf0e1a-88e9-4b0c-886b-64a1038108f0" alt=""><figcaption></figcaption></figure>

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

<details>

<summary>📦 Nested dynamic blocks - Badge block</summary>

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2Fgqqjg4YKfWqklT4zuqv2%2Fimage.png?alt=media&#x26;token=69446596-056f-42ee-ac89-a7565c49a2f3" alt=""><figcaption></figcaption></figure>

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

</details>