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

#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

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:

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

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.

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

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 🎉