# Featured products tab 🔥

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FKq95ULEOl4Haj1fe0qM3%2FHyper%20docs%20screenshot%20do%20not%20delete%20(22).jpg?alt=media&#x26;token=c9bebaff-467c-4a7b-adea-c16a6cd3ff9d" alt=""><figcaption></figcaption></figure>

Showcase multiple highlighted products in a sleek tabbed interface. It's ideal for seasonal collections, style edits, or curating popular items with custom visuals and descriptions.

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FkUIzEsJKOeRiz891zyf5%2Flivechat883x471%20(1).png?alt=media&#x26;token=90cbed2c-e791-49c8-9f43-49a08bed6f1f" alt=""><figcaption><p><a href="https://apps.shopify.com/xflow?utm_source=foxecom&#x26;utm_medium=help_center_hyper&#x26;utm_campaign=banner">Install XFlow Back In Stock Automation FREE</a></p></figcaption></figure>

***

## How to add a Featured product tabs section to your Shopify store <a href="#how-to-add-a-banner-with-hotspots-section-to-your-shopify-store" id="how-to-add-a-banner-with-hotspots-section-to-your-shopify-store"></a>

{% hint style="success" %}
Steps:

1. In the theme editor **(Customize)**, click **Add section.**
2. Locate **Featured product tabs** section.
3. Make necessary changes.
4. **Save.**
   {% endhint %}

## How to edit a Featured product tabs section

### Section settings

#### Section header

<details>

<summary>See settings</summary>

* **Subheading**: Add a short, secondary heading to complement the main heading. This can provide additional context or detail.
* **Heading**: Enter the primary title for your banner.
* **Heading size:** Adjust the size to fit your design preference and ensure readability. Choose from available heading sizes.

:writing\_hand: [add-highlighted-text-to-your-headings](https://docs.foxecom.com/hyper-theme/faqs/add-highlighted-text-to-your-headings "mention")

* **Text:** Add a detailed explanation or summary for the banner. Use rich text formatting like **bold**, *italic*, links, and lists for better visual emphasis.
* **Text size:** Select the size of the description text.
* **Button label:** Input the text for the call-to-action button.
* **Button link:** Add a link to the button to direct users to a specific page, product, or collection.
* **Button style:** Choose a style for the button.

</details>

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FwfCnmtm1bdYbsgCzczr7%2Fimage.png?alt=media&#x26;token=30fe6247-cf94-49f7-a2bd-005f8d3e93f2" alt=""><figcaption></figcaption></figure>

#### Product cards

* **Image ratio**: Control the ratio of the product images.

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FZvyDfIe88gBXFieW8KL7%2Fimage.png?alt=media&#x26;token=e00edf7e-bc36-4a1a-b2f7-f17d739dc074" alt=""><figcaption></figcaption></figure>

#### Mobile layout

Control how the products shown on mobile view.

{% tabs %}
{% tab title="Enable swipe on mobile" %}

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FuuJBpQoiiFMvD20DAByY%2Fimage.png?alt=media&#x26;token=4eec4405-d8a0-4b87-ac04-0e222bf4526d" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Show grid on mobile" %}

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2Fxiexfb6LXIqYd65Zn1Fo%2Fimage.png?alt=media&#x26;token=534c6972-9146-439a-b98a-5a17f375faa9" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### Block settings

Each **Tab** block lets you configure:

* **Tab name**: This appears in the clickable tab list.
* **Color scheme**: Select from your theme’s predefined schemes for the product cards' text and button colors. *Learn more:* [colors](https://docs.foxecom.com/hyper-theme/theme-settings/colors "mention")&#x20;
* **Product list**: Choose 1–6 products to feature.
* Products auto-display their:
  * Image (see below for override)
  * Product title
  * Price
  * "Shop" button to direct customers to the product details page.

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2Flm76cojKgVYuEhcTfBnU%2Fimage.png?alt=media&#x26;token=4d4207aa-2f82-4e52-af0e-c807ba2c6857" alt=""><figcaption></figcaption></figure>

## How to add custom featured image and custom title

By default, each product tab displays the **product’s main image**. To adde a **custom title** and/or use a **custom image** for each product inside the tabs, use these **optional metafields**.

### Custom product tab title

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2Fdl9ka3fxXg6BCWOQjWBH%2Fimage.png?alt=media&#x26;token=bb41a721-9967-4c09-b53a-70d00906f3a4" alt=""><figcaption></figcaption></figure>

{% stepper %}
{% step %}

#### Metafield setup

Go to Shopify **Settings > Metafields and metaobjects > Products > Add definition**.
{% endstep %}

{% step %}

#### Create a new product metafield&#x20;

* **Name**: Your custom name - e.g.: Product tab title
* **Namespace & key**: `foxtheme.showcase_title`
* **Type**: Single line text

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FAwhDnbmDY4xoHG2ysLMr%2Fimage.png?alt=media&#x26;token=241374f8-844f-4390-a52d-e49e6e0fcd22" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

#### Save the definition

{% endstep %}

{% step %}

#### Add custom title to product

For each product:

* Go to the **Product page**.
* Scroll to the **Metafields** section.
* Add the custom title to the **Product tab title**.

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FY9vZuqeZft8kLbSvWlLu%2Fimage.png?alt=media&#x26;token=22f4788f-fb45-467c-8529-07c0e468f46d" alt=""><figcaption></figcaption></figure>
{% endstep %}
{% endstepper %}

### Custom product tab image

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FsNaYbYMOqsLqka2SjvvY%2Fimage.png?alt=media&#x26;token=58f47fdd-817c-4f13-b679-eacb269574f8" alt=""><figcaption></figcaption></figure>

{% stepper %}
{% step %}

#### Metafield setup

Go to Shopify **Settings > Metafields and metaobjects > Products > Add definition**.
{% endstep %}

{% step %}

#### Create a new product metafield&#x20;

* **Name**: Your custom name - e.g.: Product tab image
* **Namespace & key**: `foxtheme.showcase_image`
* **Type**: File (Accepts images like JPG, PNG).

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FVNaJyU30X97Zcw4MGiRD%2Fimage.png?alt=media&#x26;token=0dadc1b5-2511-403a-bda0-1f7c0e35f599" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

#### Save the definition

{% endstep %}

{% step %}

#### Add custom featured image to product

For each product:

* Go to the **Product page**.
* Scroll to the **Metafields** section.
* Upload the custom image to **Product tab image**.

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FqkuRbUwBC18yXw5H85EN%2Fimage.png?alt=media&#x26;token=c1b3d11f-0990-4bc4-a6a5-8f280dabf916" alt=""><figcaption></figcaption></figure>
{% endstep %}
{% endstepper %}