Featured products tab 🔥

Showcase multiple highlighted products in a sleek tabbed interface. It's ideal for seasonal collections, style edits, or curating popular items with custom visuals and descriptions.

Install XFlow Back In Stock Automation FREE

---

How to add a Featured product tabs section to your Shopify store

Steps:

1. In the theme editor (Customize), click Add section.

2. Locate Featured product tabs section.

3. Make necessary changes.

4. Save.

How to edit a Featured product tabs section

Section settings

Section header

See settings

• Subheading: Add a short, secondary heading to complement the main heading. This can provide additional context or detail.

• Heading: Enter the primary title for your banner.

• Heading size: Adjust the size to fit your design preference and ensure readability. Choose from available heading sizes.

✍️ Add Highlighted text to your Headings

• Text: Add a detailed explanation or summary for the banner. Use rich text formatting like bold, italic, links, and lists for better visual emphasis.

• Text size: Select the size of the description text.

• Button label: Input the text for the call-to-action button.

• Button link: Add a link to the button to direct users to a specific page, product, or collection.

• Button style: Choose a style for the button.

Product cards

• Image ratio: Control the ratio of the product images.

Mobile layout

Control how the products shown on mobile view.

Enable swipe on mobile

Show grid on mobile

Block settings

Each Tab block lets you configure:

• Tab name: This appears in the clickable tab list.

• Color scheme: Select from your theme’s predefined schemes for the product cards' text and button colors. Learn more: Colors

• Product list: Choose 1–6 products to feature.

• Products auto-display their:

  • Image (see below for override)

  • Product title

  • Price

  • "Shop" button to direct customers to the product details page.

How to add custom featured image and custom title

By default, each product tab displays the product’s main image. To adde a custom title and/or use a custom image for each product inside the tabs, use these optional metafields.

Custom product tab title

1

Metafield setup

Go to Shopify Settings > Metafields and metaobjects > Products > Add definition.

2

Create a new product metafield

• Name: Your custom name - e.g.: Product tab title

• Namespace & key: foxtheme.showcase_title

• Type: Single line text

3

Save the definition

4

Add custom title to product

For each product:

• Go to the Product page.

• Scroll to the Metafields section.

• Add the custom title to the Product tab title.

Custom product tab image

1

Metafield setup

Go to Shopify Settings > Metafields and metaobjects > Products > Add definition.

2

Create a new product metafield

• Name: Your custom name - e.g.: Product tab image

• Namespace & key: foxtheme.showcase_image

• Type: File (Accepts images like JPG, PNG).

3

Save the definition

4

Add custom featured image to product

For each product:

• Go to the Product page.

• Scroll to the Metafields section.

• Upload the custom image to Product tab image.