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 progress bar, and icon controls — directly from the Magento admin panel without touching a single line of code or running a Tailwind rebuild manually.

Panth Theme Customizer turns your Hyva theme into a fully configurable design system. It exposes every brand-critical token — primary color, secondary color, accent color, body font, heading font, border radius, spacing, header height, icon set — as admin settings, then compiles them into CSS custom properties and Tailwind config that your frontend consumes live. Change a color in admin, click save, and watch your storefront update instantly.

Under the hood, the module leverages CSS custom properties (CSS variables) so the entire color palette and typography system can be swapped without rebuilding your theme for most changes. For Tailwind-driven updates, a one-click "Rebuild Theme" button triggers the Hyva build pipeline from admin. Typography integrates directly with Google Fonts — pick any font from the Google Fonts library, and the module handles preloading, font-display optimization, and layered fallbacks automatically.

Beyond tokens, Theme Customizer ships ready-to-use storefront components: a configurable sticky header with scroll thresholds, a free shipping progress bar that shows shoppers how close they are to free delivery, header layout variants (centered logo, split navigation, minimal), and an icon library switcher (Heroicons outline/solid, Lucide, custom SVG). Everything is multi-store aware, so each store view can have its own brand identity.

Get a free quote for your project in 24 hours — custom Hyva themes, theme customizer extensions, Tailwind design systems, performance optimization, and Adobe Commerce Cloud deployments.

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

• Why Theme Customizer
• Key Features
• Compatibility
• Installation
• Configuration
• Color Management
• Typography & Google Fonts
• Tailwind CSS Integration
• Custom CSS Injection
• Header Configuration
• Sticky Header
• Free Shipping Progress Bar
• Icon Controls
• FAQ
• Support
• About Panth Infotech
• Quick Links

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.

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

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

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

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

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

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 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">

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.

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.

Pre-built header layouts are selectable from a dropdown:

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

The sticky header is fully configurable:

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

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.

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.

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.

Response time: 1-2 business days.

Need Custom Hyva Development?

Looking for custom Hyva theme development, Tailwind design systems, theme customizer extensions, or storefront performance optimization? Get a free quote in 24 hours:

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.

Built and maintained by Kishan Savaliya — kishansavaliya.com — a Top Rated Plus Magento developer on Upwork with 10+ years of eCommerce experience and a deep specialization in Hyva themes and Tailwind design systems.

Panth Infotech is a Magento 2 development agency focused on high-performance Hyva storefronts, custom module development, and merchant-empowering admin tools. Our extension suite spans SEO, performance, checkout, product presentation, customer engagement, and store management — over 34 modules built to MEQP standards and tested across Magento 2.4.4 to 2.4.8.

Browse the full extension catalog on the Adobe Commerce Marketplace or Packagist.

Quick Links

• Website: kishansavaliya.com
• Get a Quote: kishansavaliya.com/get-quote
• Upwork Profile (Top Rated Plus): upwork.com/freelancers/~016dd1767321100e21
• Upwork Agency: upwork.com/agencies/1881421506131960778
• Packagist: packagist.org/packages/mage2kishan/module-theme-customizer
• GitHub: github.com/mage2sk/module-theme-customizer
• Adobe Marketplace: commercemarketplace.adobe.com
• Email: kishansavaliyakb@gmail.com
• WhatsApp: +91 84012 70422

Ready to transform your Hyva storefront design workflow?

SEO Keywords: magento 2 theme customizer, hyva theme builder, css custom properties, google fonts magento, tailwind magento, theme tokens, hyva theme configuration, magento 2 color palette, magento 2 typography, hyva sticky header, free shipping progress bar magento, magento 2 custom css, hyva tailwind config, magento 2 header layouts, hyva icon library, heroicons magento, lucide icons magento, magento 2 design system, hyva child theme customization, tailwind design tokens, magento 2 admin theme editor, backend driven theme, hyva theme customization, magento 2 brand manager, multi-store theme, store view color palette, panth theme customizer, panth infotech, hire magento developer upwork, top rated plus magento freelancer, kishan savaliya magento, hyva performance optimization, magento 2.4.8 hyva, php 8.4 hyva, mage2kishan, mage2sk, magento marketplace developer, custom hyva development india, magento 2 hyva development, magento 2 performance optimization, adobe commerce cloud expert, tailwind css magento