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.
|
Top Rated Plus on Upwork 100% Job Success - 10+ Years Magento Experience Adobe Certified - Hyva Specialist |
Magento Development Team Custom Modules - Theme Design - Migrations Performance - SEO - 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
- 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
- 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 - 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
- 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
- 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_Coredependency resolved automatically
Every Magento custom option input type is styled by this module:
| Magento Type | Rendered As |
|---|---|
| Text Field | Styled single-line text input with focus ring |
| Text Area | Styled multi-line textarea with resize handle |
| File | Drag-and-drop upload zone with preview and remove button |
| Drop-down | Custom-styled <select> with chevron icon |
| Radio Buttons | Card-style radio group with price-delta badges |
| Checkbox | Card-style checkbox group with price-delta badges |
| Multiple Select | Enhanced multi-select with tags |
| Date | Native HTML5 <input type="date"> |
| Date & Time | Native HTML5 <input type="datetime-local"> |
| Time | Native HTML5 <input type="time"> |
| 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.1+ |
| Luma Theme | Native support |
| Panth_Core | ^1.0 (required, free) |
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 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- Download the latest release ZIP from Packagist or the Adobe Commerce Marketplace
- Extract to
app/code/Panth/CustomOptions/in your Magento installation - Install
Panth_Corethe same way (required dependency) - Run the same commands as above starting from
bin/magento module:enable
bin/magento module:status Panth_CustomOptions
# Expected output: Module is enabledThen 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.
| Setting | Default | Description |
|---|---|---|
| Enable Custom Options Styling | Yes | Master toggle. When disabled, Magento falls back to its default templates with zero overhead. |
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):
| Variable | Default | Purpose |
|---|---|---|
--custom-options-primary |
#0D9488 |
Primary brand color (buttons, focus, price) |
--custom-options-border |
#E5E7EB |
Input border color |
--custom-options-border-focus |
#0D9488 |
Input border color on focus |
--custom-options-bg |
#FFFFFF |
Container background |
--custom-options-input-bg |
#F9FAFB |
Input background |
--custom-options-text |
#171717 |
Primary text color |
--custom-options-text-muted |
#6B7280 |
Hint and helper text |
--custom-options-label |
#374151 |
Option label color |
--custom-options-price |
#0D9488 |
Price-delta badge color |
--custom-options-required |
#EF4444 |
Required asterisk color |
--custom-options-radius |
10px |
Border radius for inputs and cards |
--custom-options-font |
'DM Sans', sans-serif |
Typography |
/* 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\Themedetects 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-optionandpriceBoxbehaviour - no pricing logic is changed
No database schema is modified, no product data is touched, and disabling the module instantly restores default rendering.
| Issue | Cause | Resolution |
|---|---|---|
| Options still show default styling | Cache not flushed | Run bin/magento cache:flush and hard-refresh the product page |
| File upload zone not working | Static content not deployed | Run bin/magento setup:static-content:deploy -f |
| Date picker shows old-style input | Browser does not support HTML5 date input | Update to a modern browser (Chrome, Edge, Firefox, Safari - all support it) |
| CSS variables not applying | Variables defined at a lower-specificity selector | Place overrides inside :root {} or body {} |
| Styling missing on Hyva | Hyva CSS not rebuilt | Run npm run build-prod inside your Hyva theme's web/tailwind directory |
Enable Debug Mode in Panth Extensions > Core Settings for verbose logs in var/log/panth_core.log.
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.
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.
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).
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.
Yes. The module uses the Hyva theme parent chain - any Hyva child theme automatically inherits the styled templates.
Yes. Custom options on configurable products (the parent product, not the simple variants) render with the new UI. Configurable variant selection remains Magento-native.
Yes. Full source on GitHub at github.com/mage2sk/module-custom-options.
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.
| Channel | Contact |
|---|---|
| kishansavaliyakb@gmail.com | |
| Website | kishansavaliya.com |
| +91 84012 70422 | |
| GitHub Issues | github.com/mage2sk/module-custom-options/issues |
| Upwork (Top Rated Plus) | Hire Kishan Savaliya |
| Upwork Agency | Panth Infotech |
Response time: 1-2 business days.
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