Custom Product Options for Magento 2 (Hyva + Luma)

Beautifully styled product custom options for Hyva and Luma Magento 2 storefronts. Replaces Magento's default custom options rendering with a modern, accessible UI - styled text inputs, drag-and-drop file upload zones, elegant dropdowns, card-style radio and checkbox groups, native HTML5 date pickers, and CSS custom properties for easy theming.

Panth Custom Options gives your configurable and simple products with options (monograms, engravings, gift messages, file uploads, date selection, add-ons) a premium look that matches the rest of your Hyva or Luma storefront. Every input type Magento supports is restyled for clarity, accessibility, and conversion. All colors, radii, spacing, and typography are controlled by CSS variables - override them once in your theme and every custom option on every product follows your brand.

Built on Alpine.js for Hyva (no extra JS libraries) and lightweight CSS for Luma. Toggle globally from the admin, or let it stay on out of the box.

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

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

• Key Features
• Supported Input Types
• Compatibility
• Installation
• Configuration
• Theming with CSS Variables
• How It Works
• Troubleshooting
• FAQ
• Support
• About Panth Infotech
• Quick Links

Modern, Accessible UI

• Styled text inputs and textareas - clean borders, focus rings, floating hints, character counters
• Drag-and-drop file upload zones - visual upload area with filename preview, size validation feedback, and remove button
• Polished dropdowns - custom-styled <select> elements with chevron, hover and focus states
• Card-style radio buttons - large, clickable cards with price-delta badges instead of tiny native radios
• Card-style checkboxes - multi-select cards with checkmark icon and price-delta badges
• Native HTML5 date pickers - <input type="date">, <input type="time">, and <input type="datetime-local"> - no external date libraries
• Accessible by default - proper <label> associations, ARIA attributes, keyboard navigation, visible focus states

Theming and Branding

• CSS custom properties - every color, radius, spacing, and font is a CSS variable - override in one place
• Primary color, border color, focus color, label color, price color, required color - all themable
• Radius and font family - match your storefront's design system
• Per-store-view overrides - native Magento scope (default / website / store view) honored

Hyva and Luma Support

• Hyva - templates use Alpine.js and Tailwind utility classes, zero external JS
• Luma - lightweight CSS styling layered over Magento's default templates
• Auto theme detection - powered by Panth\Core\Helper\Theme, no manual switching
• Works with configurable, simple, virtual, and downloadable products - any product type that supports custom options

Admin Control

• Single master toggle - turn styled rendering on or off from Stores > Configuration > Panth Extensions > Custom Options
• Fallback-safe - when disabled, Magento's native templates take over with zero overhead

Performance and Quality

• Zero external JS dependencies - everything uses Alpine.js (bundled with Hyva) or vanilla CSS
• MEQP compliant - passes Adobe's Magento Extension Quality Program
• Lightweight - under 40 files, minimal CSS footprint
• Composer-installable - Panth_Core dependency resolved automatically

Every Magento custom option input type is styled by this module:

Tested on:

• Magento 2.4.8-p4 with PHP 8.4 (Hyva 1.3)
• Magento 2.4.7 with PHP 8.3 (Hyva 1.2)
• Magento 2.4.6 with PHP 8.2 (Luma)

Composer Installation (Recommended)

composer require mage2kishan/module-custom-options
bin/magento module:enable Panth_Core Panth_CustomOptions
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 ZIP from Packagist or the Adobe Commerce Marketplace
2. Extract to app/code/Panth/CustomOptions/ in your Magento installation
3. Install Panth_Core the same way (required dependency)
4. Run the same commands as above starting from bin/magento module:enable

Verify Installation

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

Then open any product that has custom options defined - the styled UI will replace the default Magento rendering automatically.

Navigate to Stores > Configuration > Panth Extensions > Custom Options.

That's it - the module is designed to work beautifully out of the box. Visual customization happens through CSS variables.

All visual tokens are exposed as CSS custom properties. Override any of these in your child theme's CSS (or in theme-config.json if you use Panth_ThemeCustomizer):

Example override

/* app/design/frontend/YourVendor/yourtheme/web/css/overrides.css */
:root {
 --custom-options-primary: #7c3aed;
 --custom-options-border-focus: #7c3aed;
 --custom-options-radius: 4px;
}

Panth Custom Options uses Magento's standard layout override system to replace the templates that render product custom options. Specifically:

• On Hyva, the module ships Alpine.js-powered templates under view/frontend/templates/product/view/options/ that emit Tailwind utility classes
• On Luma, a lightweight CSS file is appended that restyles Magento's native option templates
• Panth\Core\Helper\Theme detects which theme is active per store view and loads the correct layout
• All price-delta calculations continue to use Magento's standard Magento_Catalog/js/price-option and priceBox behaviour - no pricing logic is changed

No database schema is modified, no product data is touched, and disabling the module instantly restores default rendering.

Enable Debug Mode in Panth Extensions > Core Settings for verbose logs in var/log/panth_core.log.

Does this module change how Magento calculates custom option prices?

No. All price-delta logic continues to flow through Magento's standard priceBox and price-option JS components. This module only replaces the visual rendering.

Will it work with my existing product custom options?

Yes. All your existing custom options (set up under Admin > Catalog > Products > [Product] > Customizable Options) automatically render in the new styled UI. No migration required.

Does it support file upload validation?

Yes. Magento's native file type and size validation continues to work, with better visual feedback for the customer (file name preview, size check, remove button, error states).

Can I disable styling on specific products?

The master toggle is global. For per-product control, you can override the layout on a single product page using the standard Magento layout update XML.

Does it support Hyva child themes?

Yes. The module uses the Hyva theme parent chain - any Hyva child theme automatically inherits the styled templates.

Does it work on configurable products with custom options?

Yes. Custom options on configurable products (the parent product, not the simple variants) render with the new UI. Configurable variant selection remains Magento-native.

Is the source code available?

Yes. Full source on GitHub at github.com/mage2sk/module-custom-options.

Does it support multi-store setups?

Yes. Settings respect Magento's standard scope hierarchy (default > website > store view). Different store views can have different primary colors or even disable the styling entirely.

Response time: 1-2 business days.

Need Custom Magento Development?

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

Panth Custom Options is distributed under a proprietary license - see LICENSE.txt. Distribution is restricted to the Adobe Commerce Marketplace and authorized Packagist channels.

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 specializing in high-quality, security-focused extensions and themes for both Hyva and Luma storefronts. Our extension suite covers 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.

• 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-custom-options
• GitHub: github.com/mage2sk/module-custom-options
• Adobe Marketplace: commercemarketplace.adobe.com
• Email: kishansavaliyakb@gmail.com
• WhatsApp: +91 84012 70422

Ready to upgrade your Magento 2 product pages?

SEO Keywords: magento 2 custom options, product options styling, hyva custom options, luma custom options, magento 2 product options, magento 2 styled custom options, magento 2 file upload zone, magento 2 date picker, magento 2 radio buttons cards, magento 2 checkbox cards, hyva product page ui, luma product page ui, magento 2 product configurator, magento 2 customization options, panth custom options, magento 2 hyva module, magento 2 luma module, hyva alpine.js, magento 2 css variables, magento 2 theming, magento 2 accessible ui, magento 2.4.8 custom options, php 8.4 magento module, magento 2 monogram, magento 2 engraving, magento 2 gift options, magento 2 add-ons, mage2kishan, mage2sk, panth infotech, kishan savaliya magento, hire magento developer upwork, top rated plus magento freelancer, magento 2 development agency, custom magento development, magento 2 hyva development, magento 2 luma customization