Custom Product Options for Magento 2 (Hyva + Luma)

What you get

Panth Custom Options - Styled Product Custom 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.

Key Features

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

Theming with 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;
}

How It Works

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.

Troubleshooting

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

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

Compatibility

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)

Installation

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.

Configuration

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.

License

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