README

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.

Need Custom Magento 2 Development?

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

Kishan Savaliya

Top Rated Plus on Upwork

100% Job Success - 10+ Years Magento Experience Adobe Certified - Hyva Specialist

Panth Infotech Agency

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

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

Supported Input Types

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

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

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

Download the latest release ZIP from Packagist or the Adobe Commerce Marketplace
Extract to app/code/Panth/CustomOptions/ in your Magento installation
Install Panth_Core the same way (required dependency)
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.

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.

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

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

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

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.

FAQ

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.

Support

Channel	Contact
Email	kishansavaliyakb@gmail.com
Website	kishansavaliya.com
WhatsApp	+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.

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:

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.

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

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

mage2kishan / module-custom-options

Maintainers

Package info

Statistics

Security