# Featured products tab 🔥

![image](https://docs-assets.foxecom.app/hyper-theme/Hyper%20docs%20screenshot%20do%20not%20delete%20(22)_qFaTkZGl.jpg)

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.

***

## How to add a Featured product tabs section to your Shopify store

<Hint type="success">

Steps:

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

</Hint>

## How to edit a Featured product tabs section

### Section settings

#### Section header

<Expandable title="See settings">

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

✍ [Add Highlighted text to your Headings](https://docs.foxecom.com/hyper-theme/faqs/add-highlighted-text-to-your-headings)

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

</Expandable>

![image](https://docs-assets.foxecom.app/hyper-theme/image_brh7tkLL.png)

#### Product cards

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

![image](https://docs-assets.foxecom.app/hyper-theme/image_ehtxGI8x.png)

#### Mobile layout

Control how the products shown on mobile view.

<Tabs>
<Tab title="Enable swipe on mobile">

![image](https://docs-assets.foxecom.app/hyper-theme/image_wDvnJzMv.png)

</Tab>

<Tab title="Show grid on mobile">

![image](https://docs-assets.foxecom.app/hyper-theme/image_6k5MEEXT.png)

</Tab>
</Tabs>

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

![image](https://docs-assets.foxecom.app/hyper-theme/image_syd50L3z.png)

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

![image](https://docs-assets.foxecom.app/hyper-theme/image_vjsyygWw.png)

<Stepper>

<Step>

#### Metafield setup

Go to Shopify **Settings > Metafields and metaobjects > Products > Add definition**.

</Step>

<Step>

#### Create a new product metafield

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

![image](https://docs-assets.foxecom.app/hyper-theme/image_NYBrfJCl.png)

</Step>

<Step>

#### Save the definition

</Step>

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

![image](https://docs-assets.foxecom.app/hyper-theme/image_WerlUW1K.png)

</Step>

</Stepper>

### Custom product tab image

![image](https://docs-assets.foxecom.app/hyper-theme/image_Y6CqmTPx.png)

<Stepper>

<Step>

#### Metafield setup

Go to Shopify **Settings > Metafields and metaobjects > Products > Add definition**.

</Step>

<Step>

#### Create a new product metafield

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

![image](https://docs-assets.foxecom.app/hyper-theme/image_a5tODWFJ.png)

</Step>

<Step>

#### Save the definition

</Step>

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

![image](https://docs-assets.foxecom.app/hyper-theme/image_00tFoUlF.png)

</Step>

</Stepper>