Premium Hyva Child Theme for Magento 2

What you get

Panth Infotech — Premium Hyva Child Theme for Magento 2

Premium Hyva child theme for Magento 2 with 34 integrated Panth extensions — mega menu, advanced SEO, checkout optimization, product gallery, smart badges, dynamic forms, testimonials, and a full admin Theme Customizer. Built with Tailwind CSS 3 and Alpine.js for blazing-fast Core Web Vitals scores and a premium storefront UX out of the box.

Panth Infotech is a production-ready Hyva child theme built by a Top Rated Plus Magento developer with 10+ years of eCommerce experience. It bundles a complete Hyva storefront — header, mega menu, product pages, category pages, checkout, cart, footer, WhatsApp chat, and 404 page — with 34 custom Panth extensions seamlessly wired into the Hyva design system. No manual template overrides, no Alpine.js conflicts, no Tailwind purge surprises. Just install, configure in the admin Theme Customizer, and ship a premium Magento 2 storefront in hours instead of months.

Under the hood the theme extends Hyva/default, uses the standard Hyva Tailwind build pipeline, and exposes every visual token — colors, typography, radius, spacing, header layout, footer layout — through the admin UI. Every included Panth extension ships with Hyva-compatible templates, so you get a unified look and feel across every page of the storefront.

Need a Custom Hyva Theme or Magento 2 Storefront?

Get a free quote in 24 hours — custom Hyva themes, Magento 2 module development, performance optimization, M1→M2 migrations, and Adobe Commerce Cloud.

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

Key Features

Premium Storefront UX

• Sticky header with scroll-triggered shrink animation
• Mega menu with images, featured products, and multi-level categories
• Product gallery with zoom, thumbnails, swipe support, and lazy-loaded images
• Quick view modal — add-to-cart without leaving the category page
• Smart badges — sale, new, best-seller, out-of-stock, custom labels
• Banner slider — homepage and category-level promotional slides
• Testimonials carousel, FAQ accordions, dynamic forms, product tabs, product slider

Admin Theme Customizer

• Full visual control from the Magento admin — colors, typography, radius, spacing, buttons
• Live preview of color and typography changes
• Header & footer builder — columns, links, social icons, trust badges
• One-click Tailwind rebuild from admin (no SSH required)
• Import / export theme presets as JSON

Performance & SEO

• Core Web Vitals optimized — LCP < 2.5s, CLS < 0.1, INP < 200ms on a standard Magento 2.4.8 install
• Tailwind CSS purge — only shipped CSS classes end up in production bundle (typically < 40 KB gzipped)
• Alpine.js (no jQuery, no Knockout.js on frontend) — tiny runtime, instant interactivity
• Lazy-loaded images, prefetched links, deferred third-party scripts
• Advanced SEO integration — structured data, hreflang, sitemaps, AI-generated meta

Developer Experience

• Standard Hyva child theme structure — no custom conventions to learn
• Tailwind 3 config — extend colors, fonts, breakpoints from a single tailwind.config.js
• ES modules — modern JS, tree-shakable
• MEQP compliant — passes Adobe's Extension Quality Program for all bundled extensions
• Composer-installable — one command installs theme + 34 extensions

Included Extensions

The theme ships with Hyva-compatible templates and Tailwind components for all 34 Panth extensions:

All 34 extensions are pulled in automatically by Composer when you install the theme — no manual installation needed.

Tailwind Build Pipeline

The theme follows Hyva's standard Tailwind 3 build pipeline:

web/tailwind/
├── components/ # Custom Alpine.js components (ES modules)
├── tailwind-source.css # Entry CSS (@tailwind directives + custom layers)
├── tailwind-preset.js # Shared preset (colors, fonts, breakpoints)
├── tailwind.config.js # Theme-specific Tailwind config
├── postcss.config.js # PostCSS pipeline (autoprefixer, cssnano)
└── package.json # npm scripts: build, watch, build-prod

npm scripts:

Output: web/tailwind/tailwind.css (picked up automatically by Hyva layout).

What's Inside

theme-frontend-panth-infotech/
├── Magento_Catalog/
│ ├── layout/ # Category / product page layouts
│ └── templates/ # Product gallery, swatches, tiles
├── Magento_Checkout/
│ └── layout/ # Hyva checkout customizations
├── Magento_GiftMessage/
│ └── templates/
├── Magento_Swatches/
│ └── templates/
├── Magento_Theme/
│ ├── layout/ # Header, footer, homepage layouts
│ └── templates/ # Header, footer, copyright
├── Magento_Wishlist/
│ └── templates/
├── Panth_MegaMenu/
│ └── templates/ # Hyva mega menu template
├── etc/
│ └── view.xml # Image presets
├── media/
│ ├── preview.jpg # Theme preview thumbnail
│ └── screenshots/ # Marketplace screenshots
├── web/
│ ├── css/
│ ├── images/
│ ├── js/
│ └── tailwind/ # Tailwind 3 build pipeline
├── composer.json # 34 module dependencies
├── registration.php
├── theme.xml # parent: Hyva/default
├── CHANGELOG.md
├── LICENSE.txt
└── COPYING.txt

Troubleshooting

For other issues, enable Debug Mode under Theme Customizer and check var/log/panth_theme.log.

Compatibility

Tested on:

• Magento 2.4.8-p4 + Hyva 1.3 + PHP 8.4 + Node 20
• Magento 2.4.7 + Hyva 1.3 + PHP 8.3 + Node 20
• Magento 2.4.6 + Hyva 1.2 + PHP 8.2 + Node 18

Note: This is a Hyva child theme. A valid Hyva Themes license and the hyva-themes/magento2-default-theme parent are required.

Installation

Composer Installation (Recommended)

composer require mage2kishan/theme-frontend-panth-infotech
bin/magento setup:upgrade
bin/magento setup:di:compile
bin/magento setup:static-content:deploy -f
bin/magento cache:flush

Then set the theme as active:

Admin → Content → Design → Configuration → [Your Store] → Edit
Applied Theme: Panth Infotech - Hyva Child Theme

Save, then flush cache.

Manual Installation via ZIP

1. Download the latest release ZIP from Packagist or the Adobe Commerce Marketplace
2. Extract the contents to app/design/frontend/Panth/infotech/ in your Magento installation
3. Install all 34 Panth extensions via Composer (see composer.json)
4. Run bin/magento setup:upgrade && bin/magento setup:di:compile && bin/magento cache:flush
5. Activate the theme via Content → Design → Configuration

Build Tailwind CSS

cd app/design/frontend/Panth/infotech/web/tailwind
npm install
npm run build-prod
bin/magento cache:flush

Or trigger the build from the admin Theme Customizer → Build Theme button (no SSH required).

Configuration

All theme settings live under Admin → Stores → Configuration → Panth Extensions → Theme Customizer, grouped into sections:

License

Panth Infotech Theme is distributed under a proprietary commercial license — see LICENSE.txt. Each purchase licenses the theme for a single Magento installation (development, staging, and production of one live domain). For multi-store / multi-domain licensing, contact us for a quote.

Theme Customization

Extend Tailwind Config

Edit web/tailwind/tailwind.config.js in the theme root:

module.exports = {
 presets: [require('./tailwind-preset.js')],
 content: [
 '../../templates/**/*.phtml',
 '../../../../../code/**/view/frontend/templates/**/*.phtml',
 '../../../../../code/**/view/frontend/layout/**/*.xml',
 ],
 theme: {
 extend: {
 colors: {
 brand: {
 50: '#F0FDF4',
 500: '#10B981',
 900: '#064E3B',
 },
 },
 fontFamily: {
 display: ['Inter', 'sans-serif'],
 },
 },
 },
};

Run npm run build-prod (or use the admin Build button) to rebuild.

Override a Template

Copy any template from the parent Hyva theme into this theme at the same relative path. For example, to override the product price block:

vendor/hyva-themes/magento2-default-theme/Magento_Catalog/templates/product/price/final_price.phtml
→ app/design/frontend/Panth/infotech/Magento_Catalog/templates/product/price/final_price.phtml

Add Custom JavaScript

Drop your Alpine.js component under web/tailwind/components/:

// web/tailwind/components/my-component.js
export default () => ({
 open: false,
 toggle() { this.open = !this.open; },
});

Register it in web/tailwind/tailwind-source.css or via layout XML.