Download the PHP package mage2kishan/module-theme-customizer without Composer
On this page you can find all versions of the php package mage2kishan/module-theme-customizer. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download mage2kishan/module-theme-customizer
More information about mage2kishan/module-theme-customizer
Files in mage2kishan/module-theme-customizer
Package module-theme-customizer
Short Description Hyva Theme Customizer - Backend-driven theme configuration with CSS custom properties, color management, typography, and Tailwind CSS integration.
License proprietary
FAQ
Example:
In general, it is recommended to use always a project to download your libraries. In an application normally there is more than one library needed.
- Some hosting areas are not accessible by a terminal or SSH. Then it is not possible to use Composer.
- To use Composer is sometimes complicated. Especially for beginners.
- Composer needs much resources. Sometimes they are not available on a simple webspace.
- If you are using private repositories you don't need to share your credentials. You can set up everything on our site and then you provide a simple download link to your team member.
- Simplify your Composer build process. Use our own command line tool to download the vendor folder as binary. This makes your build process faster and you don't need to expose your credentials for private repositories.
Informations about the package module-theme-customizer
Magento 2 Hyva Theme Customizer: Google Fonts, Custom CSS, Sticky Header, Free Shipping Bar
Configure your Hyva storefront from the Magento admin panel. Panth Theme Customizer lets you load Google Fonts, inject custom CSS, enable a sticky header, show a free shipping progress bar in the mini cart, control header icons, add a top bar announcement strip, and trigger a Tailwind CSS rebuild - all without touching theme files.
Product page: kishansavaliya.com/magento-2-theme-customizer.html
Quick Answer
What is Panth Theme Customizer? It is a Magento 2 extension for Hyva storefronts that moves common theme configuration options into the admin panel. You control Google Fonts, custom CSS, header behavior, mini cart settings, and icon visibility without editing code or re-deploying theme files.
What does it add to my store?
- Google Fonts for body and heading text, loaded via CDN with a single admin dropdown.
- Custom CSS injection per store view, output as an inline style tag on every page.
- Sticky header with optional scroll-up reveal behavior.
- Top bar announcement strip with configurable left and right text blocks.
- Free shipping progress bar in the mini cart with a configurable threshold and custom messages.
- Header icon controls to show or hide search, account, and mini cart icons, and set icon size and badge style.
- Tailwind CSS rebuild triggered from admin via CLI commands or an AJAX button.
Which themes are supported? Hyva (Tailwind-based). The module also ships Luma-compatible SVG header icons for stores that mix themes. Core Tailwind token management (colors, spacing, radius) is done through theme-config.json in your Hyva child 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.
| ### Kishan Savaliya **Top Rated Plus on Upwork** [](https://www.upwork.com/freelancers/~016dd1767321100e21) 100% Job Success - 10+ Years Magento Experience Adobe Certified - Hyva Specialist | ### Panth Infotech Agency **Magento Development Team** [](https://www.upwork.com/agencies/1881421506131960778/) 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
- Key Features
- Compatibility
- Installation
- Configuration
- How It Works
- FAQ
- Support
- About Panth Infotech
- Quick Links
Who Is It For
- Merchants on Hyva who want to change fonts, inject CSS, or toggle header options without asking a developer every time.
- Designers and marketing teams who need to adjust the storefront appearance for campaigns or seasonal promotions without a code deploy.
- Store owners running multiple brands who need different fonts or custom CSS per store view.
- Developers setting up Hyva stores who want a clean admin UI for the most common runtime theme settings, while keeping visual tokens in
theme-config.json.
Key Features
Google Fonts
- Body font selector - pick any Google Font from the admin dropdown for body text, paragraphs, buttons, and inputs.
- Heading font selector - pick a separate font for h1-h6 elements, or leave it to follow the body font.
- Automatic CDN link injection - the module generates the optimized Google Fonts
<link>tag and adds it to<head>for you. - System fonts option - set either field to System Fonts to load nothing from CDN, which is the fastest option.
Custom CSS Injection
- Per-store CSS textarea in admin with a built-in ACE editor (beautify, validate, download, import).
- Backend validation blocks dangerous patterns like script tags, JavaScript URLs, and event handler attributes.
- Inline output as a
<style>tag after the main stylesheet, so your rules take precedence without a theme deploy. - Store-view scoped - each store view can carry its own CSS block.
Header Configuration
- Enable custom header toggle to switch between the default theme header and the Panth header.
- Sticky header with a configurable scroll-up reveal behavior (hide when scrolling down, show when scrolling up).
- Header height setting in pixels for the content area.
- Container width selector for the header content area.
Top Bar Announcement Strip
- Enable top bar toggle for an announcement bar above the header.
- Left side text and right side text fields that support HTML for links, bold text, and other inline markup.
- Common use: free shipping threshold message on the left, phone number or store hours on the right.
Mini Cart and Free Shipping Progress Bar
- Free shipping progress bar in the mini cart sidebar showing how close the cart total is to the threshold.
- Configurable threshold - set the minimum order amount per store view.
- Progress message with an
{amount}placeholder. Example:Add {amount} more for free shipping! - Success message shown when the threshold is reached.
- Show/hide continue shopping button in the mini cart.
- Show/hide cart subtotal in the mini cart.
Header Icon Controls
- Toggle search, account, and mini cart icons on or off.
- Cart counter badge style - choose between circle, pill, or square badge shapes.
- Icon size field in pixels (default: 24).
Tailwind CSS Build Integration
theme:customizer:buildCLI command triggers the Tailwind build from the shell.theme:customizer:checkCLI command verifies the build environment.theme:customizer:export-cssCLI command exports compiled CSS.- Admin AJAX build button in the Theme Customizer configuration section.
ThemeBuildExecutorInterfaceimplementation so other modules (including Panth Core) can trigger builds through a shared contract.- Luma header compatibility - SVG header icons, account dropdown, and top bar that match Hyva's icon style on Luma storefronts, removed automatically on Hyva via
default_hyva.xml.
Architecture
theme-config.jsonin the child theme holds visual tokens (colors, spacing, radii, shadows) consumed by the Node.js Tailwind build script.- CSS custom properties generated from
theme-config.jsonfor colors and typography, emitted once in<head>. - Constructor dependency injection only - no ObjectManager usage.
- Multi-store scoped - all admin settings respect default, website, and store view scope.
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+ (required for Tailwind build integration) |
| Node.js | 18.x or 20.x (for Tailwind rebuild, not required at runtime) |
| Required Dependency | mage2kishan/module-core (free) |
Installation
Composer Installation (Recommended)
Manual Installation via ZIP
- Download the latest release from Packagist or from the product page.
- Extract it to
app/code/Panth/ThemeCustomizer/in your Magento install. - Make sure
Panth_Coreis installed too (required dependency). - Run the commands above starting from
bin/magento module:enable.
Verify Installation
After install, open:
Configuration
Theme Customizer
Go to Stores -> Configuration -> Panth Extensions -> Theme Customizer.
| Setting | Group | Default | Description |
|---|---|---|---|
| Body Font | Google Fonts | System Fonts | Google Font for body text. System Fonts loads nothing from CDN. |
| Heading Font | Google Fonts | System Default | Google Font for h1-h6. Leave as System Default to follow body font. |
| Custom CSS | Custom CSS | (empty) | CSS injected as inline <style> on every page. Scoped per store view. |
Visual design tokens (colors, spacing, radii, shadows, typography sizes) are configured in theme-config.json inside your Hyva child theme's web/tailwind/ directory. After editing that file, run node generate-theme-css.js and npm run build in that directory, then flush the cache.
Header Configuration
Go to Stores -> Configuration -> Panth Extensions -> Header Configuration.
| Setting | Group | Default | Description |
|---|---|---|---|
| Enable Custom Header | General | No | Use the Panth custom header instead of the default theme header. |
| Enable Sticky Header | General | No | Header stays fixed at the top when scrolling. |
| Show on Scroll Up | General | No | Hide sticky header when scrolling down, show on scroll up. Requires sticky enabled. |
| Enable Top Bar | Top Bar | No | Show the announcement bar above the header. |
| Left Side Text | Top Bar | (empty) | Left side content. Supports HTML. |
| Right Side Text | Top Bar | (empty) | Right side content. Supports HTML. |
| Show Search Icon | Icons | Yes | Show or hide the search icon in the header. |
| Show Account Icon | Icons | Yes | Show or hide the account icon in the header. |
| Show Mini Cart Icon | Icons | Yes | Show or hide the mini cart icon. |
| Cart Counter Badge Style | Icons | Circle | Shape of the item count badge on the cart icon. |
| Icon Size (px) | Icons | 24 | Size of header icons in pixels. |
| Show Free Shipping Progress | Mini Cart | No | Progress bar toward free shipping in the mini cart sidebar. |
| Free Shipping Threshold | Mini Cart | 99 | Minimum order amount for free shipping. |
| Progress Message | Mini Cart | (template) | Message with {amount} placeholder while progress is incomplete. |
| Success Message | Mini Cart | (template) | Message shown when threshold is reached. |
| Show Continue Shopping Button | Mini Cart | Yes | Show or hide the continue shopping button in the mini cart. |
| Show Cart Subtotal | Mini Cart | Yes | Show or hide the cart subtotal in the mini cart. |
| Container Width | Layout | (theme default) | Width of the header content area. |
| Header Height (px) | Layout | 80 | Height of the header in pixels. |
How It Works
- Google Fonts - on each page request, the module reads the admin-selected fonts, builds the Google Fonts CDN URL with
display=swap, and injects a<link>tag into<head>. No font files are hosted locally. - Custom CSS - the admin textarea value is read at render time and output as an inline
<style>tag after the main stylesheet. Backend validation runs when you save, blocking any patterns that could introduce XSS. - Header and icons - an Alpine.js-powered header block reads the admin settings via a view model and toggles sticky behavior, scroll-up reveal, and icon visibility at runtime. No jQuery is needed.
- Top bar - rendered as a separate block above the header, with left and right text fields. HTML is allowed so you can include links.
- Free shipping bar - the mini cart block reads the configured threshold, compares it to the current cart subtotal, and renders a progress bar with the configured messages. It updates reactively via Alpine.js when the cart changes.
- Tailwind rebuild - the
BuildExecutormodel runsnpm run build-prodin the active Hyva child theme'sweb/tailwind/directory and flushes static content. This is available as a CLI command or an admin AJAX button. theme-config.json- visual tokens (colors, spacing, radii) live here and are read by the Tailwind build script. CSS custom properties generated from this file are emitted in<head>so color changes without Tailwind class changes take effect without a rebuild.
FAQ
Does this work with Luma?
Mostly no. The Google Fonts loader, custom CSS, and free shipping bar work on any theme. The sticky header, top bar, and icon controls are designed for Hyva's Alpine.js architecture. The module ships separate Luma-compatible SVG header icons that are loaded on Luma and removed on Hyva automatically.
Do I need to run a Tailwind rebuild every time I change something?
No. Google Fonts, custom CSS, sticky header, top bar, icon settings, and free shipping bar all work without a rebuild. Only changes to theme-config.json (colors, spacing tokens, radii) that affect Tailwind utility classes require the npm run build step.
Can I have different settings per store view?
Yes. All settings in both configuration sections respect Magento's scope hierarchy: default, website, and store view. Each store view can have its own fonts, custom CSS, free shipping threshold, and header configuration.
Is the custom CSS safe to use?
The module validates the CSS value before saving. It rejects script tags, JavaScript URLs (javascript:), and event handler attributes. Ordinary CSS rules save without restriction.
Does the free shipping bar work with multi-currency?
Yes. The threshold is stored in your base currency. The comparison to the cart subtotal uses Magento's standard subtotal calculation, which already handles currency conversion for each store view.
Can I export the Theme Customizer settings?
Yes. Use bin/magento config:show and bin/magento config:set to move settings between environments. All Theme Customizer paths start with theme_customizer/* and all Header Configuration paths start with panth_header/*.
Does this module need Node.js installed on the server?
Only for the Tailwind rebuild commands (theme:customizer:build). Runtime features like Google Fonts, custom CSS injection, sticky header, and free shipping bar have no Node.js dependency. If your CI pipeline handles static content deployment, you do not need Node.js on the production server.
Does Panth Theme Customizer need Panth Core?
Yes. mage2kishan/module-core is a free, required dependency. Composer installs it for you automatically.
Is the source code on GitHub?
Yes. The full source is at github.com/mage2sk/module-theme-customizer.
Support
| Channel | Contact |
|---|---|
| Product Page | kishansavaliya.com/magento-2-theme-customizer.html |
| [email protected] | |
| Website | kishansavaliya.com |
| +91 84012 70422 | |
| GitHub Issues | github.com/mage2sk/module-theme-customizer/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:
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-theme-customizer.html |
| Packagist | mage2kishan/module-theme-customizer |
| GitHub | mage2sk/module-theme-customizer |
| Website | kishansavaliya.com |
| Free Quote | kishansavaliya.com/get-quote |
| Upwork (Top Rated Plus) | Hire Kishan Savaliya |
| Upwork Agency | Panth Infotech |
| [email protected] | |
| +91 84012 70422 |
Ready to configure your Hyva storefront from the admin panel?
SEO Keywords: magento 2 theme customizer, hyva theme customizer, magento 2 google fonts, magento 2 custom css, hyva sticky header, free shipping progress bar magento, magento 2 header configuration, hyva theme builder, magento 2 admin theme editor, magento 2 topbar announcement, hyva tailwind css admin, magento 2 mini cart free shipping bar, hyva theme configuration, magento 2 custom css extension, magento 2 google fonts extension, hyva header icons, magento 2 sticky header, magento 2 free shipping bar, magento 2 header height, magento 2 hyva theme settings, panth theme customizer, mage2kishan theme customizer, magento 2.4.8 hyva, php 8.4 hyva, tailwind css magento 2, hyva 1.3 extension, magento 2 store view css, magento 2 per store font, custom css magento storefront, kishan savaliya magento, panth infotech, hire magento developer, top rated plus upwork, magento 2 hyva development, adobe commerce hyva extension
All versions of module-theme-customizer with dependencies
magento/framework Version ^103.0
magento/module-backend Version ^102.0
magento/module-config Version ^101.2
magento/module-store Version ^101.1
magento/module-theme Version ^101.1
mage2kishan/module-core Version ^1.0