8000 GitHub - mage2sk/module-producttabs: Product detail page tab customization for Magento 2. Supports horizontal/vertical tab styles, fade/slide/none animations , and mobile accordion. Compatible with Hyva and Luma themes. · GitHub
Skip to content

mage2sk/module-producttabs

Repository files navigation

Magento 2 Product Tabs Extension: Custom Layout, CMS Block Tabs, and Attribute Tabs (Hyva + Luma)

Magento 2.4.4 - 2.4.8 PHP 8.1 - 8.4 Hyva + Luma Live Demo & Details Packagist Upwork Top Rated Plus Website

Rethink how product information is displayed on your PDP. Panth Product Tabs replaces Magento's default tab strip with a configurable system that supports horizontal and vertical layouts, fade and slide animations, a mobile accordion, unlimited custom CMS block tabs, attribute-driven spec tabs, and full admin control over tab labels, visibility, and sort order. Native templates for Hyva (Alpine.js) and Luma are both included.

Product page: kishansavaliya.com/magento-2-producttabs.html


Quick Answer

What is Panth Product Tabs? It is a Magento 2 product tabs extension that replaces the default PDP tab strip with a fully configurable tab system, so merchants can choose layouts, add custom content tabs, and control every tab from admin without touching a template.

What does it add to my store?

  • A horizontal or vertical tab layout with fade, slide, or no animation, configurable from admin.
  • Mobile accordion mode so the PDP stays compact and easy to scroll on phones.
  • Custom CMS block tabs for shipping info, size guides, care instructions, warranty details, and anything else stored in a CMS block.
  • Custom attribute tabs that pull product attribute values into a clean spec table.
  • Full label, visibility, and sort order control for the built-in Description, More Information, and Reviews tabs.

Which themes are supported? Both Hyva (Alpine.js, no jQuery) and Luma. The right template is loaded based on the active theme.

What does it need? Magento 2.4.4 to 2.4.8, PHP 8.1 to 8.4, and the free mage2kishan/module-core package.


Need Custom Magento 2 Development?

Get a free quote for your project in 24 hours for custom modules, Hyva themes, performance work, M1 to M2 migrations, and Adobe Commerce Cloud.

Get a Free Quote

Kishan Savaliya

Top Rated Plus on Upwork

Hire on Upwork

100% Job Success • 10+ Years Magento Experience Adobe Certified • Hyva Specialist

Panth Infotech Agency

Magento Development Team

Visit Agency

Custom Modules • Theme Design • Migrations Performance • SEO • Adobe Commerce Cloud

Visit our website: kishansavaliya.com  |  Get a quote: kishansavaliya.com/get-quote


Table of Contents


Who Is It For

  • Stores with detailed product information who want to organize descriptions, specs, shipping terms, and size guides into separate tabs instead of one long content block.
  • Merchants selling technical products like electronics, tools, or building materials, who need a clean specification table pulled from product attributes.
  • Hyva storefronts that need a product tabs extension built with Alpine.js, with no jQuery or RequireJS added back in.
  • Store owners who manage their own content and need to add or remove tabs from admin without developer help.
  • Mobile-focused stores that want the PDP to collapse into an accordion on phones so shoppers can find what they need quickly.

Key Features

Tab Layout and Animations

  • Horizontal or vertical tab style so the layout matches your storefront design.
  • Fade, slide, or no animation between tab panels, set from admin.
  • Sticky tab navigation to keep the tab bar visible as shoppers scroll through long content.
  • Open first tab by default with a toggle to change this per store view.

Mobile Experience

  • Mobile accordion mode that collapses tabs into an expandable list on small screens.
  • Horizontal scroll fallback as an alternative mobile layout for long tab lists.
  • Accordion on mobile toggle in admin to switch modes without touching templates.

Custom Tab Types

  • Unlimited CMS block tabs so any CMS block can become a tab (shipping details, size charts, care instructions, warranty info, videos).
  • Custom attribute tabs that group product attributes into a styled specification table.
  • Per-tab icon class support (Bootstrap Icons or any custom class) for CMS and attribute tabs.

Admin Control

  • Tab visibility toggle for Description, More Information, and Reviews tabs independently.
  • Custom label overrides to rename any built-in tab from admin.
  • Numeric sort order for all tabs, built-in and custom, combined into one sorted list.
  • Default open tab selector to choose which tab shows first on page load.
  • Lazy load reviews to defer the Reviews tab JavaScript until the tab is clicked, which helps initial page load time.

Developer and SEO

  • Review count badge in the Reviews tab label showing approved review count.
  • Widget support to embed Product Tabs on any CMS page or block via the widget picker.
  • Deep linking via URL hash so you can link directly to a tab from emails or ads.
  • Hyva and Luma dual templates with automatic theme detection via Panth\Core\Helper\Theme.
  • Clean constructor dependency injection, no ObjectManager usage.
  • Translation ready, every label uses Magento's __() function.

Compatibility

Requirement Versions Supported
Magento Open Source 2.4.4, 2.4.5, 2.4.6, 2.4.7, 2.4.8
Adobe Commerce 2.4.4, 2.4.5, 2.4.6, 2.4.7, 2.4.8
Adobe Commerce Cloud 2.4.4 to 2.4.8
PHP 8.1.x, 8.2.x, 8.3.x, 8.4.x
Hyva Theme 1.3+ (native Alpine.js support)
Luma Theme Native support
Required Dependency mage2kishan/module-core (free)

Installation

Composer Installation (Recommended)

composer require mage2kishan/module-producttabs
bin/magento module:enable Panth_Core Panth_ProductTabs
bin/magento setup:upgrade
bin/magento setup:di:compile
bin/magento setup:static-content:deploy -f
bin/magento cache:flush

Manual Installation via ZIP

  1. Download the latest release from Packagist or from the product page.
  2. Extract it to app/code/Panth/ProductTabs/ in your Magento install.
  3. Make sure Panth_Core is installed too (required dependency).
  4. Run the commands above starting from bin/magento module:enable.

Verify Installation

bin/magento module:status Panth_ProductTabs
# Expected: Module is enabled

After install, open:

Admin -> Stores -> Configuration -> Panth Extensions -> Product Tabs

Configuration

Go to Stores -> Configuration -> Panth Extensions -> Product Tabs.

Setting Group Default Description
Enable Module General Yes Master toggle for the Product Tabs module.
Sticky Tab Navigation General No Keep the tab bar pinned while scrolling the PDP.
Lazy Load Reviews General No Defer Reviews tab JS until the tab is clicked.
Default Open Tab General First Available Which tab opens on page load.
Tab Style Design Horizontal Horizontal (top strip) or Vertical (side column) layout.
Animation Type Design Fade Fade, Slide, or None animation between tabs.
Mobile Behavior Design Accordion Accordion or horizontal scroll on mobile.
Open First Tab by Default Design Yes Automatically open the first tab when the page loads.
Accordion on Mobile Design Yes Switch to accordion layout below the mobile breakpoint.
Description Tab Label Tab Labels (empty) Custom label for the Description tab.
More Information Tab Label Tab Labels (empty) Custom label for the More Information tab.
Reviews Tab Label Tab Labels (empty) Custom label for the Reviews tab.
Show Description Tab Tab Visibility Yes Show or hide the Description tab.
Show More Information Tab Tab Visibility Yes Show or hide the More Information tab.
Show Reviews Tab Tab Visibility Yes Show or hide the Reviews tab.
Description Tab Sort Order Tab Sort Order 10 Sort order for the Description tab.
More Information Tab Sort Order Tab Sort Order 20 Sort order for the More Information tab.
Reviews Tab Sort Order Tab Sort Order 30 Sort order for the Reviews tab.
CMS Block Tabs Custom CMS Block Tabs (empty) Dynamic rows to add tabs that render CMS block content.
Attribute Tabs Custom Attribute Tabs (empty) Dynamic rows to add tabs that display product attributes as a table.

How It Works

  1. Panth Product Tabs hooks into the product detail page layout via layout XML and replaces the default Magento tab block.
  2. On page load, the active theme is detected by Panth\Core\Helper\Theme, and either the Hyva (Alpine.js) or Luma template is served.
  3. Built-in tabs (Description, More Information, Reviews) and all configured custom tabs are merged into a single sorted list using the sort order values set in admin.
  4. On the Hyva template, Alpine.js manages the open tab state, handles the fade or slide transition, and switches to accordion layout below the mobile breakpoint.
  5. When Lazy Load Reviews is enabled, the Reviews tab JavaScript is not loaded until the shopper clicks that tab.
  6. CMS block tabs fetch the block content server-side and render it inside the tab panel.
  7. Attribute tabs read the product's attribute values and render them as a label-value table inside the tab panel.
  8. URL hash deep linking updates via history.replaceState so shoppers and campaigns can link directly to a tab.

FAQ

Does this work on Hyva themes?

Yes. Panth Product Tabs ships native Alpine.js templates for Hyva, with no jQuery, Knockout, or RequireJS. The module reads the active theme through Panth_Core and loads the Hyva template automatically.

Can I add more than three custom tabs?

Yes. Both CMS block tabs and attribute tabs support unlimited entries. Add as many as your product page requires.

Will the tabs work with configurable or bundle products?

Yes. The tab system works with all Magento product types: simple, configurable, grouped, bundle, virtual, and downloadable.

Does deep linking work with SEO tools?

Yes. The URL hash is updated via history.replaceState, which is standards-compliant and works with Google Analytics, GA4, and GTM. It does not add extra entries to browser history.

Does lazy loading the Reviews tab affect SEO?

No. The review schema (JSON-LD) is still rendered server-side. Lazy loading only defers the JavaScript widget, not the structured data or visible review HTML.

Can I use the Product Tabs block on CMS pages?

Yes. The module registers a widget that can be embedded on any CMS page or block through the admin widget picker.

Does it support multi-store setups?

Yes. All settings respect Magento's standard scope hierarchy: default, website, and store view. Tab labels can also be translated via i18n CSV files.

Does it modify core Magento files?

No. Panth Product Tabs uses standard Magento extension mechanisms: layout XML, observers, plugins, and ViewModels. No core file is touched.

Does Panth Product Tabs need Panth Core?

Yes. mage2kishan/module-core is a free, required dependency that Composer installs for you automatically.


Support

Channel Contact
Product Page kishansavaliya.com/magento-2-producttabs.html
Email kishansavaliyakb@gmail.com
Website kishansavaliya.com
WhatsApp +91 84012 70422
GitHub Issues github.com/mage2sk/module-producttabs/issues
Upwork (Top Rated Plus) Hire Kishan Savaliya
Upwork Agency Panth Infotech

Response time: 1-2 business days.

Need Custom Magento Development?

Looking for custom Magento module development, Hyva theme work, store migrations, or performance tuning? Get a free quote in 24 hours:

Get a Free Quote

Hire on Upwork    Visit Agency    View Product Page


About Panth Infotech

Built and maintained by Kishan Savaliya (kishansavaliya.com), a Top Rated Plus Magento developer on Upwork with 10+ years of eCommerce experience.

Panth Infotech is a Magento 2 development agency that builds high quality, security focused extensions and themes for both Hyva and Luma storefronts. The extension suite covers SEO, performance, checkout, product presentation, customer engagement, and store management, with each module built to MEQP standards and tested across Magento 2.4.4 to 2.4.8.

Browse the full extension catalog on our Magento extensions page or on Packagist.


Quick Links

Resource Link
Product Page magento-2-producttabs.html
Packagist mage2kishan/module-producttabs
GitHub mage2sk/module-producttabs
Website kishansavaliya.com
Free Quote kishansavaliya.com/get-quote
Upwork (Top Rated Plus) Hire Kishan Savaliya
Upwork Agency Panth Infotech
Email kishansavaliyakb@gmail.com
WhatsApp +91 84012 70422

Ready to give shoppers a better product detail page?
See Product Tabs


SEO Keywords: magento 2 product tabs, magento 2 product tabs extension, magento 2 custom tabs, magento 2 cms block tabs, magento 2 attribute tabs, magento 2 tab extension, magento 2 tab customization, product detail page tabs magento 2, magento 2 pdp tabs, magento 2 vertical tabs, magento 2 horizontal tabs, magento 2 mobile accordion tabs, magento 2 tab sort order, magento 2 tab visibility, magento 2 tab labels, magento 2 custom tab labels, magento 2 specification tab, magento 2 product attribute table, hyva product tabs, hyva alpine js tabs, luma product tabs, magento 2 sticky tabs, magento 2 lazy load reviews tab, magento 2 deep linking tabs, magento 2 tab widget, magento 2 product description tabs, magento 2 reviews tab, magento 2 more information tab, mage2kishan producttabs, panth product tabs, panth infotech, kishan savaliya, hire magento developer, top rated plus upwork, magento 2.4.8 tab extension, php 8.4 magento module, magento 2 hyva development, custom magento development

About

Product detail page tab customization for Magento 2. Supports horizontal/vertical tab styles, fade/slide/none animations , and mobile accordion. Compatible with Hyva and Luma themes.

Resources

License

Unknown, Unknown licenses found

Licenses found

Unknown
LICENSE.txt
Unknown
COPYING.txt

Stars

Watchers

Forks

Packages

 
 
 

Contributors

0