# Featured products tab

The **Featured products tab** lets you showcase the latest products, specials, best-sellers, and featured products on your website under different tabs.
This creates a well-organized look for the site, drawing in more customers with the visually appealing cascading layout of products and sticky effect.
## How to customize a Featured products tab
Steps
1. In the theme editor **(Customize)**, click **Add section**
2. Locate **Featured products tab**
3. **Save**
### Section settings
#### General
Check the **Enable video autoplay** box to allow video autoplay (Videos are muted automatically to allow autoplay).

#### Section header
Use the provided text field to add a suitable **Heading**.
* Leave it blank if you do not want to display it
You can also change the **Heading size** to:
* Heading xs
* Heading sm
* Heading md
* Heading lg
* Heading xl
* Heading 2xl
* Display md
* Display lg
* Display xl
to make the content look balanced on your website.

#### Highlight text
[How to apply Highlight text to the section heading and block headings?](https://docs.foxecom.com/sleek-theme/pages-global-sections/general-settings#highlight-text)
Use the provided text fields to add a suitable **Subheading** and **Description**.
* Leave them blank if you do not want to display them

#### Grid settings
Use the slider to adjust the **Maximum products to show** (between 2 and 6) in tab blocks.
You can also control the suitable spacing between the product cards by selecting **Column gap** and **Row gap** options.
* **Column gap**: Extra large/ Large/Medium/Small/ Extra small/ None
* **Row gap**: Extra large/ Large/Medium/Small/ Extra small/ None/ Same as the column gap

#### Product cards
Select the product card's **Image ratio** as:
* Adapt to image
* Square (1:1)
* Portrait (3:4)
* Landscape (4:3)
You can modify the ratio for the product thumbnail in the **Thumbnail ratio** field:
* Use global settings
* Adapt to image
* Square (1:1)
* Portrait (3:4)
* Landscape (4:3)
 
To set up other addons such as badges, buttons, etc. to the product cards, check out this article:
Product cards
#### Mobile Layout
If you are not into the grid layout, you can use the carousel layout by selecting the **Enable swipe on mobile**.

### Block settings
Insert the preferred **Tab name** along with a detailed **Tab description** for each Tab block in order to attract the customer's attention and generate interest.


In each Tab block, you can pick up to 6 outstanding or best seller products in the **Products** field to showcase.
The featured media of the product follows your product setup in Shopify admin.
If you want to feature a different image/video, see:
⭐[How to add video or image as featured media of the product](#how-to-add-video-or-image-as-featured-media-of-the-product) ⭐
 
Moreover, if you wish to save time when choosing products, you can opt for a collection in the **Collection** field instead of selecting each product individually.
Note: If the product list is empty, then collection products will be shown instead.

## How to add video or image as featured media of the product
In our demo (for example: [Glossy](https://themes.shopify.com/themes/sleek/styles/glossy/preview)), we are using stunning videos and images to feature in the section.
Follow our instructions below if you want to set up the same 💃

**Steps:**
### Create **product metafield definitions**
1. Go to Shopify **Settings** > **Custom data** > **Products**
2. Select **Add definition**

3. Create two definitions with the given namespaces and keys below:
* Showcase image: **foxtheme.showcase\_image**

* Showcase video: **foxtheme.showcase\_video**

4. Select **Type** as **File** and click **Save**.
### Add metafield value for products
Once you have created the metafield definitions, go to **Products** > select the product you want to feature in your **Feature products tab** section.
In the **Metafields** section, select an image/video to be featured in the section and there you have it 🎉
