Hyper Theme
Hyper Theme
Theme Sections

Featured products tab 🔥

3 min read
image

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.


Steps:

  1. In the theme editor (Customize), click Add section.
  2. Locate Featured product tabs section.
  3. Make necessary changes.
  4. Save.

Section settings

Section header

image

Product cards

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

Mobile layout

Control how the products shown on mobile view.

image
image

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

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

image

Metafield setup

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

Create a new product metafield

  • Name: Your custom name - e.g.: Product tab title
  • Namespace & key: foxtheme.showcase_title
  • Type: Single line text
image

Save the definition

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

Custom product tab image

image

Metafield setup

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

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).
image

Save the definition

For each product:

  • Go to the Product page.
  • Scroll to the Metafields section.
  • Upload the custom image to Product tab image.
image
Last updated