# Featured products tab ![image](https://docs-assets.foxecom.app/sleek-theme/image_qlY7mnUm.png) 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). ![image](https://docs-assets.foxecom.app/sleek-theme/image_jywH3Rtz.png) #### 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. ![image](https://docs-assets.foxecom.app/sleek-theme/image_bBHnag3v.png) #### 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 ![image](https://docs-assets.foxecom.app/sleek-theme/image_rB3F08Hb.png) #### 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 ![image](https://docs-assets.foxecom.app/sleek-theme/image_sy6BHc3L.png) #### 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)
![image](https://docs-assets.foxecom.app/sleek-theme/image_ME8b5X92.png) ![image](https://docs-assets.foxecom.app/files/EacofTxQKDm3n2gtQpR6)
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**. ![image](https://docs-assets.foxecom.app/sleek-theme/image_6JaL0aru.png) ### 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. ![image](https://docs-assets.foxecom.app/sleek-theme/image_Ibx2V1HL.png) ![image](https://docs-assets.foxecom.app/sleek-theme/image_JLgeExEo.png) 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) ⭐
![image](https://docs-assets.foxecom.app/sleek-theme/image_Nio6vVfQ.png) ![image](https://docs-assets.foxecom.app/files/DisBygFpWq0nj1l0h3zZ)
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. ![image](https://docs-assets.foxecom.app/sleek-theme/image_y73lfW9v.png) ## 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 💃 ![image](https://docs-assets.foxecom.app/sleek-theme/image_lnSVn5vP.png) **Steps:** ### Create **product metafield definitions** 1. Go to Shopify **Settings** > **Custom data** > **Products** 2. Select **Add definition** ![image](https://docs-assets.foxecom.app/sleek-theme/image_0AI5MZp0.png) 3. Create two definitions with the given namespaces and keys below: * Showcase image: **foxtheme.showcase\_image** ![image](https://docs-assets.foxecom.app/sleek-theme/image_1y5JQTCE.png) * Showcase video: **foxtheme.showcase\_video** ![image](https://docs-assets.foxecom.app/sleek-theme/image_CYTmnIkB.png) 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 🎉 ![image](https://docs-assets.foxecom.app/sleek-theme/image_o5vBn4V4.png)