Sleek
Try Sleek freeResourcesOther solutions
  • What is Sleek theme
  • Changelog
  • Refund policy
  • Support policy
  • Getting started
    • Install Sleek theme
    • Set up my store as Sleek demo
    • Update Sleek theme
    • Theme license & Transfer
  • BUILD FOR SUCCESS SERIES
    • Homepage for Health & Beauty 🔥
  • Page's global sections
    • General settings
    • Announcement bar
    • Cart drawer
    • Header
      • Mega menu
      • Use Country/ Region selector
      • Use Language selector
    • Footer
    • Mobile navigation bar
    • Pop-up
    • Quick view
  • Theme sections
    • Before/ After image slider
    • Blog post
    • Card images
    • Collage tabs
    • Collapsible tabs
    • Collection image showcase
    • Collection list
    • Collections showcase
    • Collections slider
    • Contact form
    • Countdown timer
    • Custom content
    • Custom liquid
    • Email signup
    • Favorite products
    • Feature list
    • Featured product
    • Featured collection
    • Featured products tab
    • Highlight text with image
    • Image gallery
    • Image with text
    • Image with text columns
    • Image with text overlay
    • Layered images with text
    • Lookbook banner
    • Lookbook cards
    • Lookbook slider
    • Media with collection
    • Multicolumn
    • Press
    • Products bundle
    • Product tabs
    • Product showcase
    • Recently viewed products
    • Rich text
    • Scrolling promotion
    • Slideshow
    • Store locator
    • Testimonials
    • Video
    • Video hero
    • Video with text
  • Theme settings
    • General 🔥
    • Animations
    • Buttons
    • Custom CSS
    • Blog cards
    • Cart
    • Collection cards
    • Color swatches
    • Colors
    • Currency format
    • Layout
    • Logo
    • Product cards
    • Search behavior
    • Social media
    • Typography
  • Collections & Products
    • Product page
      • Product template
      • Breadcrumbs
      • Product information
      • Related products
      • Sticky add to cart bar 🔥
    • Collection page
      • Collection template
      • Collection banner
      • Product grid
    • Collections list page
  • Other pages
    • 404 page
    • Blogs
    • Blog posts
    • Cart
    • Password
    • Search page
  • FAQs
    • Generic
      • Add gift wrap option to my cart
      • Combined listings app
      • How to add custom fonts in Sleek? 🔥
      • JavaScript events for developers
    • Product
      • Set up quantity rules and volume pricing 🔥
      • Add custom badges using product tags
      • Set up Local Pickup option
      • Show dynamic content for Products using Metafields 🔥
Powered by GitBook
On this page
  • How to customize a Featured products tab
  • Section settings
  • Block settings
  • How to add video or image as featured media of the product
  • Create product metafield definitions
  • Add metafield value for products
  1. Theme sections

Featured products tab

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

PreviousFeatured collectionNextHighlight text with image

Last updated 2 months ago

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

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.

The featured media of the product follows your product setup in Shopify admin.

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

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

Steps:

Create product metafield definitions

  1. Go to Shopify Settings > Custom data > Products

  2. Select Add definition

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

  • Showcase image: foxtheme.showcase_image

  • Showcase video: foxtheme.showcase_video

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

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

In our demo (for example: ), we are using stunning videos and images to feature in the section.

Follow our instructions below if you want to set up the same

In the Metafields section, select an image/video to be featured in the section and there you have it

⭐
⭐
💃
🎉
Product cards
Glossy
How to apply Highlight text to the section heading and block headings?