---
description: How to set up the attractive Featured products tab section in Sleek
---

# Featured products tab

{% embed url="https://youtu.be/_mDKQz913UE" %}

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FP7HkrE5r62Q6tt2NWfGH%2Fimage.png?alt=media&#x26;token=e41d7202-ea41-4d6b-8d01-42256486406d" alt=""><figcaption></figcaption></figure>

The **Featured products tab** lets you showcase the latest products, specials, best-sellers, and featured products on your website under different tabs.&#x20;

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

{% hint style="success" %}
Steps

1. In the theme editor **(Customize)**, click **Add section**
2. Locate **Featured products tab**
3. **Save**
{% endhint %}

### Section settings

#### General

Check the **Enable video autoplay** box to allow video autoplay (Videos are muted automatically to allow autoplay).

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FZJd7sqcnYYrN7659ErN3%2Fimage.png?alt=media&#x26;token=d42e5368-ad19-4518-b67d-bfa7eb5779a9" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2F152Daw7csn5vzDkYgalq%2Fimage.png?alt=media&#x26;token=8fbfed17-3da1-4898-aef0-21e766d85051" alt=""><figcaption></figcaption></figure>

#### Highlight text

[How to apply Highlight text to the section heading and block headings?](../../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

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2Fj53zMzrCfYLpLIEM4E9X%2Fimage.png?alt=media&#x26;token=da65cc37-920f-40fc-b851-f00eb464bfc4" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FsMqehNdKpoyBDisQBPCa%2Fimage.png?alt=media&#x26;token=8e067ed0-27bc-4ad0-aee8-ebd878bd2276" alt=""><figcaption></figcaption></figure>

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

<div><figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2F1Gz584t92Law0OAAUNIf%2Fimage.png?alt=media&#x26;token=30dcbf7a-237e-4c0a-b7fd-51a38e9c8f52" alt="" width="318"><figcaption></figcaption></figure> <figure><img src="https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FEacofTxQKDm3n2gtQpR6%2Fimage.png?alt=media&#x26;token=a033fa47-84f0-4204-b2a4-1a354ee04a64" alt=""><figcaption></figcaption></figure></div>

To set up other addons such as badges, buttons, etc. to the product cards, check out this article:

{% content-ref url="../theme-settings/product-cards" %}
[product-cards](../theme-settings/product-cards)
{% endcontent-ref %}

#### Mobile Layout

If you are not into the grid layout, you can use the carousel layout by selecting the **Enable swipe on mobile**.

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FseJ4xOSlwpozQU3VyeQa%2Fimage.png?alt=media&#x26;token=4c7ba4ce-1fb6-4410-afb2-e44917b54452" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FEBUeKTJSZmM3u8dTooUO%2Fimage.png?alt=media&#x26;token=fe9dfcc0-c527-4b05-9a25-f2e2396a6605" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2F5h9NhMOs0MJPlOwXaKRa%2Fimage.png?alt=media&#x26;token=33f1df5e-2043-4c4b-8e64-ce37e6c8d019" alt=""><figcaption></figcaption></figure>

In each Tab block, you can pick up to 6 outstanding or best seller products in the **Products** field to showcase.&#x20;

{% hint style="warning" %}
The featured media of the product follows your product setup in Shopify admin.

If you want to feature a different image/video, see:

:star:[#how-to-add-video-or-image-as-featured-media-of-the-product](#how-to-add-video-or-image-as-featured-media-of-the-product "mention") :star:
{% endhint %}



<div><figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FMVwdriAvYHNl38Li4FBV%2Fimage.png?alt=media&#x26;token=75d5d805-68d4-4b2b-873f-fe7aedea777a" alt=""><figcaption></figcaption></figure> <figure><img src="https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FDisBygFpWq0nj1l0h3zZ%2Fimage.png?alt=media&#x26;token=a3058b0d-ad4c-4db9-835b-6a5239f1c20a" alt=""><figcaption></figcaption></figure></div>

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.

{% hint style="info" %}
Note: If the product list is empty, then collection products will be shown instead.
{% endhint %}

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2F9Qv3moUvOD3qGEhCIShQ%2Fimage.png?alt=media&#x26;token=f23fef70-db0f-4122-aa21-3d00f4098914" alt=""><figcaption></figcaption></figure>



## How to add video or image as featured media of the product

{% hint style="info" %}
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 :dancer:
{% endhint %}

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2Fzw4ErCphXH96JDUUrkMq%2Fimage.png?alt=media&#x26;token=f3aa6f2e-d9d4-4de2-9c42-4f528f6efe37" alt=""><figcaption></figcaption></figure>

**Steps:**

### Create **product metafield definitions**&#x20;

1. Go to Shopify **Settings** > **Custom data** > **Products**
2. Select **Add definition**

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FjqKPD4hbU4p7HIJqIJMC%2Fimage.png?alt=media&#x26;token=e1f49e65-815b-46a0-bc4a-47c2ef52df4d" alt=""><figcaption></figcaption></figure>

3. Create two definitions with the given namespaces and keys below:

* Showcase image: **foxtheme.showcase\_image**

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2Fi2MwKaP6UImUWyPCf4sM%2Fimage.png?alt=media&#x26;token=a9f69aab-f18c-4902-802f-fe209424da9c" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FuSe1uAWZhTLLJHHgGG8S%2Fimage.png?alt=media&#x26;token=e8f3fd2a-f6ac-49ec-a321-ada84da480bf" alt=""><figcaption></figcaption></figure>

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 :tada:

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2Ft06UjublXWETUo7zKXCH%2Fimage.png?alt=media&#x26;token=23d976be-0b25-4b71-856d-3f031673756f" alt=""><figcaption></figcaption></figure>

