Custom Products: Add option to display configurator in a modal on the product detail page
Description:
Currently, the Custom Products configurator is rendered inline on the product detail page (PDP), typically within the buy box or page flow. For products with complex configurations and many options, this can lead to a cluttered layout and negatively impact the user experience.
Proposal:
Introduce an optional display mode that renders the Custom Products configurator inside a modal (overlay), triggered via a button in the buy box.
Example Behavior:
- A button such as “Configure product” is shown in the buy box
- On click, a modal opens containing the full configurator
- The configurator runs entirely inside the modal (including validation, dynamic pricing, etc.)
- After completion, the modal closes and the selected configuration is applied to the product
Benefits:
- Improved clarity and usability for complex configurations
- Better user focus by isolating the configuration process
- Consistent UX pattern used by many modern configurator-based shops
- Significantly improved mobile experience (e.g. fullscreen modal)
Optional Enhancements:
- Selectable display modes:
- Inline (current behavior)
- Step-by-step (existing)
- Modal (new)
- Configurable globally or per product in the admin
- Fullscreen modal option for mobile devices
Technical Notes:
- Could leverage existing storefront modal mechanisms (e.g. modal / AJAX modal infrastructure)
- Reuse of existing Custom Products components inside the modal
- No changes required to business logic, only presentation layer
Priority / Use Case:
Relevant for merchants with:
- complex or visual product configurations
- multiple option groups
- strong focus on UX and conversion optimization
Tobias Kaßner
shared this idea