# 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="/files/WYrpv7ry74wsfSvq1Mak" 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="/files/Epn9dR7QJEdtaeeB70D3" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Carousel" %}

<figure><img src="/files/B5M6tIwcdWQkwvoliopI" 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="/files/ifyAFr1wJBUImmpdcj23" 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="/files/FLnpHQwvOb2gXDvodOJl" 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="/files/Q8wSnMnUEnQx8tiH0vkf" alt=""><figcaption></figcaption></figure>

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

</details>


---

# 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/pebble-theme/theme-sections/product-suggestion.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.