# Featured collection

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

Showcase a selected product collection in a clean, customizable layout that highlights your best items.

## How to add a Featured collection section to your Shopify store

{% hint style="success" %}

1. In the theme editor **(Customize)**, click **Add section.**
2. Select **Featured collection: Carousel/Featured collection: Grid** section.
3. Make necessary changes.
4. **Save.**
   {% endhint %}

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

{% tabs %}
{% tab title="Featured collection: Grid" %}

<figure><img src="/files/WJeqDCWEOMbDyJKqYAgn" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Featured collection: Carousel" %}

<figure><img src="/files/Z9AycZPJWqj1skdJplF5" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### Section settings

* **Collection:** Selects which product collection to feature in this section.
* **Product count:** Controls how many products from the collection are displayed.
* **Layout:**
  * **Container:** Chooses whether the section spans the full page width or stays within a fixed content width.
  * **Type:** Sets the layout style to either a grid or a carousel.
  * **Columns:** Determines how many products appear per row in grid mode.
  * **Horizontal gap:** Controls the spacing between products from left to right.
  * **Vertical gap:** Controls the spacing between product rows from top to bottom.
* **Mobile layout:**
  * **Enable swipe on mobile:** Allows horizontal swiping to navigate products on mobile.
  * **Mobile columns:** Sets how many products appear per row on mobile devices.
  * **Horizontal gap (mobile):** Controls left-to-right spacing between products on mobile.
  * **Vertical gap (mobile):** Controls top-to-bottom spacing between product rows on mobile.

### Block settings

#### Default nested blocks

{% tabs %}
{% tab title="Header" %}

<figure><img src="/files/22cVaSlubKb3v0uq7vW0" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
📝 Learn more about customizing the header block: [Text block](/pebble-theme/theme-blocks/basic.md#text)
{% endhint %}
{% endtab %}

{% tab title="Product card" %}

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

You can go to **Theme Settings > Product cards** to customize your product card.&#x20;

You’ll find all the available settings that let you personalize how your product cards look and behave, so you can create a layout that fits your brand perfectly.

{% content-ref url="/pages/reUyzfr46bMJKCfSkgcc" %}
[Product cards](/pebble-theme/theme-settings/product-cards.md)
{% endcontent-ref %}
{% endtab %}
{% endtabs %}

#### Nested dynamic blocks

You can add multiple dynamic blocks within this section. Learn more about each block type here.

{% content-ref url="/pages/kDPTtLq1SGRul34JEndy" %}
[Theme blocks](/pebble-theme/theme-blocks/overview.md)
{% endcontent-ref %}


---

# 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/featured-collection.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.