What's new
kishansavaliyakb@gmail.com
Chat on WhatsApp
Toggle Nav
My Cart
Hyva Theme Customizer for Magento 2

Hyva Theme Customizer for Magento 2

Backend-driven theme configuration for Hyva-powered Magento 2 storefronts. Manage your entire design system — colors, typography, Google Fonts, Tailwind CSS tokens, custom CSS, header layout, sticky header behavior, free shipping progres…

Magento 2.4.6–2.4.8 PHP 8.1–8.4 Hyva Ready Free

Key Features:

  • Design Token Management
  • Typography
  • Tailwind CSS Integration
  • Custom CSS Injection

Additional Services

$0.00
In stock
SKU
panth-theme-customizer
Links
Pay with Wise
Lifetime Updates Every Magento release
1-Year Free Support Email + WhatsApp
Adobe-Certified Magento 2 Developer
Free Forever No subscription, no upsell
What you get

Everything in the box

Built-in from day one. No add-ons, no upsell, no licence keys to renew.

Design Token Management

Color palette — primary, secondary, accent, success, warning, error, info, neutral grays (11-step scale) — all editable via color picker

Typography

Google Fonts integration — pick any Google Font for body text, headings, and UI elements

Tailwind CSS Integration

Theme config JSON — etc/theme-config.json exposes all tokens to the Hyva Tailwind build

Custom CSS Injection

Per-store CSS textarea — inject custom CSS that loads after the main stylesheet

Header & Layout

Header layout variants — centered logo, split navigation, minimal, classic left-logo

Free Shipping Progress Bar

Dynamic progress bar — displayed in cart and minicart showing progress toward free shipping threshold

Overview

The Hyva Theme Customizer for Magento 2 is a backend-driven theme configuration module for Hyva-powered Magento 2 storefronts that exposes every design token as an admin setting. It replaces the "edit tailwind.config.js, run npm run build-prod, redeploy static content" workflow with admin color pickers, Google Fonts dropdowns, and one-click rebuilds.

Design tokens cover the full semantic color palette (primary, secondary, accent, success, warning, error, info, plus an 11-step neutral gray scale), border-radius scale, spacing tokens, and typography. Color, font, and radius changes use CSS custom properties (--color-primary, --font-body, --radius-default) so they take effect instantly with no rebuild. Tailwind-class-driven changes trigger the "Rebuild Theme" button, which runs npm run build-prod in the active Hyva theme's web/tailwind directory and flushes static content.

The Hyva Theme Customizer for Magento 2 ships ready-to-use storefront components too: a sticky header with scroll threshold, shrink-on-scroll, and hide-on-scroll-down (all driven by Alpine.js plus IntersectionObserver, zero scroll listeners); a free-shipping progress bar in the cart drawer; five header layouts (Classic, Centered, Split Nav, Minimal, Transparent Overlay); and an icon library switcher (Heroicons Outline/Solid, Lucide, custom SVG sprite). Every setting is multi-store scoped. Magento 2.4.4 - 2.4.8, Hyva 1.3.0+, PHP 8.1 - 8.4.

Best for:

  • Hyva merchants who want to swap brand colors or Google Fonts without a developer
  • Multi-brand operators running different palettes per store view from one admin
  • Marketing teams shipping Black Friday or holiday styling without a deploy cycle

Why Theme Customizer

Hyva is the fastest Magento 2 storefront frontend in existence — but customizing it traditionally requires editing tailwind.config.js, running npm run build-prod, and deploying static content every time you want to change a color or swap a font. That workflow is fine for developers, but it's a blocker for merchants, designers, and marketing teams.

Theme Customizer bridges that gap. Every design decision that used to require a developer now lives in Stores → Configuration → Panth Extensions → Theme Customizer:

  • Want to change the primary brand color for Black Friday? Open admin, pick a color, save.
  • Want to try a new Google Font for headings? Type the font name, save, done.
  • Want to toggle the sticky header on mobile only? Check a box.
  • Want to inject custom CSS for a one-off campaign? Paste it into the admin textarea.

All changes are multi-store scoped — a different color palette per brand, per store view, per website.

What you get

The Hyva Theme Customizer for Magento 2 turns every design decision into an admin setting:

  • Full semantic color palette plus 11-step neutral scale via native HTML5 color picker
  • Google Fonts integration with preconnect, preload, font-display swap, and weight selection
  • Tailwind etc/theme-config.json with one-click Rebuild Theme button from admin
  • Sticky header with shrink-on-scroll and hide-on-scroll-down via Alpine plus IntersectionObserver
  • Free shipping progress bar with multi-currency support and theme-color-aware fill
  • Five header layouts, icon library switcher, custom CSS injection, per-store scope

Key Features

Design Token Management

  • Color palette — primary, secondary, accent, success, warning, error, info, neutral grays (11-step scale) — all editable via color picker
  • CSS custom properties — every token is emitted as a CSS variable (--color-primary, --font-body, --radius-default) for instant theming without rebuilds
  • Border radius tokens — small, default, large, full — applied across buttons, cards, inputs, modals
  • Spacing tokens — consistent padding and margin scales across the storefront

Typography

  • Google Fonts integration — pick any Google Font for body text, headings, and UI elements
  • Font preloading — automatic <link rel="preload"> for critical fonts to eliminate FOUT
  • Font-display optimization — font-display: swap applied by default for performance
  • Fallback stacks — graceful fallbacks to system fonts if Google Fonts fail to load
  • Font weight controls — select which weights to load per font (400, 500, 600, 700, 800)

Tailwind CSS Integration

  • Theme config JSON — etc/theme-config.json exposes all tokens to the Hyva Tailwind build
  • One-click rebuild — Rebuild Theme button in admin triggers the Tailwind build from the UI
  • ThemeBuildExecutorInterface — implements the Panth Core contract so other modules can trigger builds too
  • Automatic static content deploy — after build, static assets are flushed so changes go live immediately

Custom CSS Injection

  • Per-store CSS textarea — inject custom CSS that loads after the main stylesheet
  • Critical CSS option — mark CSS as critical to inline in <head> for above-the-fold styling
  • Store-view scoped — each store view can have its own custom CSS

Header & Layout

  • Header layout variants — centered logo, split navigation, minimal, classic left-logo
  • Header height control — set desktop and mobile header heights independently
  • Sticky header — enable sticky behavior with configurable scroll threshold
  • Shrink-on-scroll — optional header shrink animation when user scrolls
  • Transparent header on homepage — optional transparent overlay for hero sections

Free Shipping Progress Bar

  • Dynamic progress bar — displayed in cart and minicart showing progress toward free shipping threshold
  • Configurable threshold — set the free shipping minimum amount per store
  • Custom messaging — templated messages like "Add $25 more for free shipping!" and " You qualify for free shipping!"
  • Color-aware — uses your theme's primary and success colors automatically

Icon Controls

  • Icon library switcher — choose between Heroicons (outline/solid), Lucide, or upload custom SVG sprite
  • Icon size tokens — small (16px), medium (20px), large (24px), xl (32px)
  • Icon color inheritance — icons inherit text color by default, with override per instance

Security & Performance

  • MEQP compliant — passes Adobe's Magento Extension Quality Program
  • Cached output — compiled CSS tokens are cached and invalidated only on config change
  • Zero runtime overhead — CSS variables are emitted once per page, no JS required for theming
  • CSP-friendly — custom CSS is nonce-tagged if Content Security Policy is active

Color Management

The module defines a complete semantic color system following Tailwind conventions:

Token Purpose Default
primary Main brand color (buttons, links, focus rings) #0D9488
secondary Secondary brand color #1E40AF
accent Accent for callouts, badges #F59E0B
success Success states, checkmarks, free shipping earned #16A34A
warning Warnings, low stock #F59E0B
error Errors, validation, out of stock #DC2626
info Info banners #2563EB
neutral-50 → neutral-900 11-step gray scale Tailwind defaults

Each color is editable via a native HTML5 color picker in admin and emitted as a CSS custom property:

:root {
 --color-primary: 13 148 136;
 --color-secondary: 30 64 175;
 --color-accent: 245 158 11;
 /* ...etc */
}

Typography &amp; Google Fonts

Typography is configured in the Typography section. You can choose any font from the Google Fonts library for:

  • Body font — applied to <body> and inherited by default
  • Heading font — applied to h1–h6
  • UI font — optional separate font for buttons, navigation, form inputs

For each font, you select which weights to load. The module generates the optimized Google Fonts stylesheet URL with:

  • display=swap for FOUT prevention
  • Multiple families in a single request
  • Preconnect hints to fonts.gstatic.com
  • Preload for critical weights

Example output in <head>:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@700&display=swap">

Tailwind CSS Integration

Theme Customizer writes its tokens to etc/theme-config.json, which is read by the Hyva theme's tailwind.config.js via the ThemeConfig view model. This means:

  1. CSS variable changes (colors, fonts, radius) take effect instantly with no rebuild
  2. Tailwind-class-driven changes (spacing scale, breakpoints, max-widths) require a Tailwind rebuild

The Rebuild Theme button in admin calls Panth\ThemeCustomizer\Model\BuildExecutor, which runs npm run build-prod in the active Hyva theme's web/tailwind directory and flushes static content. Progress and errors are streamed back to the admin UI.

Custom CSS Injection

The Custom CSS textarea lets you inject arbitrary CSS per store view. Common use cases:

  • Brand-specific overrides that don't warrant a full theme
  • Short-lived campaign styling (Black Friday banner, holiday promo)
  • Fixing a single selector without a theme deploy
  • A/B testing CSS changes

Injected CSS loads after the main stylesheet, so your rules take precedence. If Content Security Policy is active, the module automatically nonces the <style> tag.

For critical above-the-fold CSS, enable the Inline Critical toggle to emit the CSS directly in <head> instead of a linked stylesheet.

Sticky Header

The sticky header is fully configurable:

Setting Default Description
Enable Sticky Yes Master toggle
Scroll Threshold 100px Pixels scrolled before sticky activates
Enable on Mobile Yes Toggle for small screens
Shrink on Scroll No Animate header to smaller height when sticky
Hide on Scroll Down No Hide sticky header when scrolling down, show on scroll up

Implementation uses Alpine.js with IntersectionObserver — no jQuery, no scroll listeners — for buttery-smooth performance.

Free Shipping Progress Bar

The Free Shipping Progress Bar appears in the cart drawer and full cart page. It calculates the difference between the current subtotal and the configured free shipping threshold, then renders a visual progress bar with a live message.

Example messages:

  • Add $25.00 more for free shipping! (in progress)
  • You qualify for free shipping! (earned)
  • You saved $0 on shipping! (below threshold with inline savings highlight)

Colors automatically match your theme palette (primary for fill, success for earned state), so the progress bar looks native to your brand with zero styling effort.

Icon Controls

Select your icon library from a dropdown:

  • Heroicons Outline — clean line icons (default)
  • Heroicons Solid — filled icons for emphasis
  • Lucide — modern open-source icon set
  • Custom SVG Sprite — upload your own SVG sprite and map icon names

Icon sizes are standardized as Tailwind utilities:

  • icon-sm (16×16)
  • icon-md (20×20)
  • icon-lg (24×24)
  • icon-xl (32×32)

Colors inherit from currentColor by default, meaning icons match the surrounding text color automatically.

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 — 2.4.8
PHP 8.1.x, 8.2.x, 8.3.x, 8.4.x
Hyva Theme 1.3.0+ (required)
Tailwind CSS 3.x (bundled with Hyva)
Node.js 18.x, 20.x (for Tailwind build)
Dependency mage2kishan/module-core ^1.0

Tested on:

  • Magento 2.4.8-p4 with Hyva 1.3.5 and PHP 8.4
  • Magento 2.4.7 with Hyva 1.3.0 and PHP 8.3
  • Magento 2.4.6 with Hyva 1.2.8 and PHP 8.2

Installation

Composer Installation (Recommended)

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

Rebuild Hyva Theme

After installation, rebuild your Hyva theme to pick up the new Tailwind config:

cd app/design/frontend/<Vendor>/<theme>/web/tailwind
npm install
npm run build-prod

Or click the Rebuild Theme button in:

Admin → Stores → Configuration → Panth Extensions → Theme Customizer → Advanced

Manual Installation via ZIP

  1. Download the latest release ZIP from Packagist
  2. Extract the contents to app/code/Panth/ThemeCustomizer/
  3. Run the commands above starting from bin/magento module:enable

Verify Installation

bin/magento module:status Panth_ThemeCustomizer
# Expected output: Module is enabled

Configuration

All settings live at Stores → Configuration → Panth Extensions → Theme Customizer. The configuration is split into logical groups:

Section What It Controls
General Master enable toggle, store scope, cache behavior
Colors Full color palette (primary, secondary, accent, semantic colors, neutrals)
Typography Body font, heading font, font weights, Google Fonts loader
Layout Container widths, spacing scale, border radius tokens
Header Layout variant, height, sticky behavior, transparent overlay
Free Shipping Bar Enable, threshold amount, messages
Icons Icon library, sizes, custom SVG sprite
Custom CSS Per-store CSS injection, critical CSS toggle
Advanced Rebuild theme button, clear cache, debug mode

Header Configuration

Pre-built header layouts are selectable from a dropdown:

Layout Description
Classic Logo left, search center, mini-cart right (Hyva default)
Centered Logo centered, nav below
Split Nav Nav split around centered logo
Minimal Just logo and mini-cart, no search bar visible
Transparent Overlay Floating over hero image on homepage only

Each layout supports independent desktop height and mobile height settings in pixels.

License

Panth Theme Customizer is distributed under a proprietary license — see LICENSE.txt. A single license permits installation on one Magento production domain and its associated staging/development environments.

More Information
Module Category Theme & UI
Best For All Sizes
FAQ

Frequently Asked Questions

Do changes require a Tailwind rebuild every time?

No. Color, font, and radius changes use CSS custom properties and take effect instantly. Only changes to Tailwind-class-driven tokens (custom spacing scales, new breakpoints) require a rebuild via the Rebuild Theme button.

Does this work with Luma?

No. Theme Customizer is built specifically for Hyva's Tailwind-based architecture. For Luma stores, use Magento's built-in Design Configuration.

Can I have different colors per store view?

Yes. All Theme Customizer settings respect Magento's scope hierarchy — default, website, and store view — so each brand can have its own palette.

Will my custom Hyva child theme break?

No. Theme Customizer reads your active Hyva child theme and writes tokens into its Tailwind config. If your child theme already overrides tokens, you can disable Theme Customizer for those specific tokens.

Does the free shipping bar work with multi-currency?

Yes. The threshold is stored in base currency and converted per store view automatically using Magento's standard currency conversion.

Can I export and import my theme settings?

Yes. Use Magento's standard config export (bin/magento config:show / config:set) to move settings between environments. All Theme Customizer paths start with panth_theme_customizer/*.

Is the source code available?

Yes. The full source is on GitHub at github.com/mage2sk/module-theme-customizer.

Does the module slow down the frontend?

No. All CSS variables are emitted once in <head>, Google Fonts are preloaded, and the progress bar uses Alpine.js (already loaded by Hyva). Zero additional JS libraries are added to your storefront.

Does this replace Magento's native contact form?

Yes. When the module is enabled, the /contact URL is handled by Panth Advanced Contact Us and the stock Magento_Contact form is bypassed. Disable the module to revert to the native form — no data loss.

Does this submit URLs to Google?

No. Google does not participate in IndexNow and has stated they maintain their own crawl schedule. For Google indexing, use a proper XML sitemap and Google Search Console. This module is specifically for the IndexNow ecosystem (Bing, Yandex, Seznam, Naver, Yep).

Does this work on Hyva themes?

Yes. The module ships Hyva-native templates using Alpine.js and Tailwind. No jQuery required.

Does this slow down the order grid?

Minimally. The column loads order items for each visible row (typically 20-50 orders). For very large catalogs, you can disable thumbnails to reduce image loading.

Does Panth Advanced Cart work with Hyva?

Yes. The module ships dedicated Hyva templates built with Alpine.js and Tailwind CSS. Theme detection is automatic via Panth_Core.

Will this overwrite my custom image labels?

No. Merchant-authored labels (anything other than empty, the product name, Image, main product photo, or the raw filename) are preserved. Only Magento's default placeholders get upgraded to template output.

Can I have more than one banner slider on the same page?

Yes. Create as many sliders as you want in the admin and place each one via its own widget or layout block. Each slider maintains independent configuration and slides.

Does Panth Advanced SEO replace Magento's native SEO features?

It enhances them. Magento's native meta fields still work — Panth Advanced SEO adds template-based defaults, tokens, hreflang groups, JSON-LD, SEO scoring, and dozens of other features Magento ships without.

Does it work for guests?

Yes, guests can subscribe with their email address. You can optionally require login via admin config.

Will this slow down my storefront?

No. The head block is cacheable="true" so the full JSON-LD payload is baked into full-page cache. Providers only run on uncached renders; cached hits serve the pre-rendered <script> tag with zero PHP evaluation.

Need this customised?

Talk to Kishan directly — written quote, scope and timeline within 24 hours. No sales call.

WhatsApp

Hyva Theme Customizer for Magento 2

$0.00
Step up

Customers usually upgrade to