# Featured collection

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2F69FI4rWVzeUmwpoLBje7%2FFox-BG%20Light%20(8).jpg?alt=media&#x26;token=1139cc20-67ce-44f9-a720-3b4565812ac0" 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="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FnQ3rvB2MLDQywupKeXp7%2FFox-BG%20Light%20(7).jpg?alt=media&#x26;token=21f54805-012f-443c-b46f-7dd46a8a294f" alt=""><figcaption></figcaption></figure>
{% endtab %}

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

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FhnzeNeFoNakEQqAxi8ky%2Fimage.png?alt=media&#x26;token=a8f5f878-fe9e-47ac-b209-a4ddb8e814b4" 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="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FhV22hjLLvEomry2OEN6m%2Fimage.png?alt=media&#x26;token=4c2c5c4a-6e64-4c27-b4c8-b47b55a25c1e" alt=""><figcaption></figcaption></figure>

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

{% tab title="Product card" %}

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FAAgzhTca8fJwbe0tiD2h%2Fimage.png?alt=media&#x26;token=94f14f26-1f01-4e43-b23e-b563f1e6ce50" 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="../theme-settings/product-cards" %}
[product-cards](https://docs.foxecom.com/pebble-theme/theme-settings/product-cards)
{% 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="../theme-blocks" %}
[theme-blocks](https://docs.foxecom.com/pebble-theme/theme-blocks)
{% endcontent-ref %}