# 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?](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

<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](https://docs.foxecom.com/sleek-theme/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>


---

# 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/sleek-theme/theme-sections/featured-products-tab.md?ask=<question>
```

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.