Featured products tab
How to set up the attractive Featured products tab section in Sleek
Last updated
How to set up the attractive Featured products tab section in Sleek
Last updated
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.
Steps
In the theme editor (Customize), click Add section
Locate Featured products tab
Save
Check the Enable video autoplay box to allow video autoplay (Videos are muted automatically to allow autoplay).
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.
How to apply Highlight text to the section heading and block headings?
Use the provided text fields to add a suitable Subheading and Description.
Leave them blank if you do not want to display them
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
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:
Product cardsIf you are not into the grid layout, you can use the carousel layout by selecting the Enable swipe on mobile.
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:
⭐How to add video or image as featured media of the product ⭐
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.
In our demo (for example: Glossy), we are using stunning videos and images to feature in the section.
Follow our instructions below if you want to set up the same 💃
Steps:
Go to Shopify Settings > Custom data > Products
Select Add definition
Create two definitions with the given namespaces and keys below:
Showcase image: foxtheme.showcase_image
Showcase video: foxtheme.showcase_video
Select Type as File and click Save.
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 🎉
