User Manual - Smart Product Tabs

composer require aheadworks/module-smart-product-tabs<version>

Introducing to Magento 2 Smart Product Tabs

Extension Overview

Give your catalog a professional, well-organized look with Smart Product Tabs for Magento 2. Designed to boost conversions and buyer trust, this module turns scattered technical specs, size guides, and rich media into clean, easy-to-navigate tab layouts directly on your product detail pages.

Take complete command over how your specifications appear. You can link whole attribute sets automatically, manually assemble custom tab groups, or craft rich media sections using Page Builder. Flexible condition rules ensure that specific tabs only appear on relevant products or store views, while dynamic indexers keep your storefront running lightning-fast.

Key Features

• Map attributes to storefront tabs automatically by linking synchronized Magento attribute sets and groups to your product layouts;

• Maintain clean layout structures using built-in settings that completely hide empty specification rows or missing attribute tabs;

• Apply flexible display rules to target tab visibility based on specific product SKUs, categories, or store views;

• Eliminate manual layout modifications by managing entire sets of product tabs from a centralized control panel;

• Maintain catalog presentation standards by using native attribute values as direct data sources to keep product pages uniform.

Using Magento 2 Smart Product Tabs

Global Configuration

To configure the global display settings for the module, navigate to Stores > Settings > Configuration > AHEADWORKS EXTENSIONS > Smart Product Tabs.

General

• Display Mode — Select how tab groups are rendered on the storefront product page:

• Tabs — Displays configurations as classic horizontal, clickable tabs.

• List — Renders all attributes and groups sequentially in a single scrolling list format.

When List is selected, the List Tab Title field appears dynamically. The text entered here becomes the main section heading on the product page, under which all chosen product attributes are displayed.

Managing Smart Product Tabs

To view, create, and manage your custom product tabs, navigate to Content > Smart Product Tabs by Aheadworks > Product Tabs from the Magento Admin panel.

The Product Tabs page displays a structured grid containing all existing tab groups. If no tabs have been created yet, the grid will display a "We couldn't find any records" message.

Grid Actions

• Create Smart Product Tab — Click in the top right corner to add a new tab group.

• Edit — Modify an existing tab group.

• Duplicate — Copy a tab group (handy for creating similar tabs quickly).

• Enable / Disable — Toggle a tab group on/off without deleting its configuration.

• Delete — Permanently remove a tab group.

• Mass Actions — Select multiple rows, click the Actions dropdown above the grid, and choose Enable, Disable, or Delete.

Creating a New Tab Group

To build a new custom layout, click the Create Smart Product Tab button in the top right corner of the page.

Settings

• Tab Display Name — Enter the title of the tab as it will appear on the storefront product page. Use the Store View scope selector at the top to configure localized titles per view.

• Tab Icon — Upload an image (JPG, JPEG, GIF, PNG, SVG up to 256 MB) to render next to the tab label on the storefront.

• Description Editor — Choose the content authoring mode for the tab description:

• Simple Text — Opens a standard text area allowing short plain text or HTML intro blocks directly above the attributes.

• Page Builder — Replaces the text area with the native Magento Page Builder canvas, allowing drag-and-drop creation of complex layouts, images, widgets, and dynamic blocks.

• Tab Description / Page Builder Content — Enter an intro text or design custom visual content that will appear inside the tab above the attribute table.

• Status — Use the toggle to Enable or Disable the tab group. Disabled tabs are hidden from the product page.

• Websites — Select the specific websites where this tab group should be active.

• Sort Order — Define a numerical display priority on the storefront (lower numbers appear first).

Creating Tab Content via Page Builder

When the Description Editor field is set to Page Builder, administrators can leverage native Magento Page Builder tools to design interactive, media-rich content blocks (such as sizing charts, video guides, banners, or dynamic CMS blocks) directly inside the tab.

Step-by-Step Workflow

1. In the Settings block, switch the Description Editor dropdown to Page Builder;

2. Click the Edit with Page Builder button to expand the full-screen visual workspace;

3. Use the left panel tools to structure and enrich your content:

• Layout Controls: Add Rows, Columns, or nested Tabs to structure content sections cleanly;

• Text & Code Elements: Insert styled text, headings, buttons, dividers, or custom HTML Code;

• Media Content: Drag and drop Images (e.g., visual size charts or infographics), Videos, Banners, Sliders, or interactive Maps;

• Dynamic Content: Embed native Magento CMS Blocks or display specific Products;

4. (Optional) Click Apply Template to use existing page layouts, or Save as Template to reuse the custom tab structure across other tab groups;

5. Click Close in the top-right corner to return to the main tab configuration form, then save the tab group.

Note: Any content built within Page Builder renders directly inside the tab above the attribute list on the storefront product page.

Attributes (What to Show)

This block defines how product attributes are selected, rendered, and managed within the tab.

• Show Attributes — Toggle to Show or Hide the product attributes table inside the tab. When disabled, the attribute table is hidden, and the storefront tab renders only the description / Page Builder content;

• When Value Missing — Define how the module handles empty attribute fields for a product:

• Hide Attribute — Hide only the specific attributes that have no assigned value, keeping the rest visible;

• Hide Tab — Hide the entire tab if one or multiple attributes are missing;

• Show N/A — Display missing attributes with an "N/A" value;

• Data Source Mode — Select the method used to populate attributes into the tab:

• Manual Selection — Allows picking specific catalog attributes individually;

• Auto Sync — Dynamically imports attributes based on Magento Attribute Sets and Attribute Groups, syncing changes automatically;

• Select Attributes — (Appears when Data Source Mode is set to Manual Selection) Choose one or multiple specific product attributes to display in this tab group;

• Select Attribute Set — (Appears when Data Source Mode is set to Auto Sync) Choose a target Magento attribute set (e.g., Bag) to load its underlying attribute groups;

• Select Attribute Groups — (Appears when Data Source Mode is set to Auto Sync) Pick one or multiple attribute groups from the chosen set. The tab will automatically populate all attributes contained within these groups;

• Hide Attribute Names For — Select specific attributes from your current selection/groups to hide their label titles on the storefront, displaying only their raw values.

Conditions (Where to show)

Define which products will display this tab group using standard Magento rule combinations:

• Product Selection — Specify conditions based on Product Attributes (such as Category, Attribute Set, Activity, etc.). Leave the conditions section blank to display this tab group on all products.

Indexing

The module utilizes a dedicated database index to determine which tabs display for each specific product, ensuring fast storefront performance and correct tab rendering. To apply any new tab groups, modifications, or visibility conditions to the live store, administrators must perform a reindex.

The indexer can be managed by navigating to System → Tools → Index Management, locating the index associated with Smart Product Tabs, and triggering the update. Alternatively, the reindexing process can be executed through standard Magento data workflows, such as automated cron jobs or the command-line interface (CLI).