# Featured products tab 🔥
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 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
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.
: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.
#### Product cards
* **Image ratio**: Control the ratio of the product images.
#### Mobile layout
Control how the products shown on mobile view.
{% tabs %}
{% tab title="Enable swipe on mobile" %}
{% endtab %}
{% tab title="Show grid on mobile" %}
{% 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")
* **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.
## 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
{% stepper %}
{% step %}
#### Metafield setup
Go to Shopify **Settings > Metafields and metaobjects > Products > Add definition**.
{% endstep %}
{% step %}
#### Create a new product metafield
* **Name**: Your custom name - e.g.: Product tab title
* **Namespace & key**: `foxtheme.showcase_title`
* **Type**: Single line text
{% 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**.
{% endstep %}
{% endstepper %}
### Custom product tab image
{% stepper %}
{% step %}
#### Metafield setup
Go to Shopify **Settings > Metafields and metaobjects > Products > Add definition**.
{% endstep %}
{% 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).
{% 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**.
{% endstep %}
{% endstepper %}
---
# 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/hyper-theme/theme-sections/featured-products-tab.md?ask=
```
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.
.jpg?alt=media&token=c9bebaff-467c-4a7b-adea-c16a6cd3ff9d)
.png?alt=media&token=90cbed2c-e791-49c8-9f43-49a08bed6f1f)
