Mix & Match

Mix & Match is an extension for Magento designed to enhance the product detail page with an interactive styling experience. It allows customers to visually combine complementary products such as tops and bottoms directly from the same product page, helping them evaluate complete outfits before making a purchase.

Instead of navigating across multiple pages, shoppers can open a built in Mix & Match interface that instantly displays compatible items defined by the merchant. For example, when viewing a shirt, customers can preview matching trousers or skirts in a dynamic popup without leaving the page.

This streamlined interaction reduces friction during the shopping process, encourages product discovery, and helps customers make more confident purchase decisions.

The extension runs entirely inside the storefront and does not require external redirects or third party integrations. All pairing logic and display behavior can be configured from the Magento Admin panel, giving merchants full control over how products are combined and presented.

Features

• Adds an interactive mix and match popup to product pages
• Displays compatible products based on configurable pairing rules
• Allows customers to preview complementary items without leaving the page
• Seamless storefront experience with no external redirects
• Admin configuration for product pairing logic and display behavior
• Customizable interface elements to match store branding
• Lightweight implementation designed to maintain storefront performance
• Compatible with standard themes

Configuration

After installation, Mix & Match can be configured directly from the Magento Admin panel.

Merchants can:

• Enable or disable the feature globally
• Define pairing logic between product types such as tops with bottoms
• Select which products are eligible for combinations
• Configure button labels and popup display behavior
• Adjust visual elements to align with the store theme

No coding is required for standard configuration.

Storefront Experience

Once enabled, a Mix & Match button appears on eligible product pages.

When customers click this button, a popup opens within the same page displaying predefined compatible products from the catalog. Shoppers can preview suggested items and continue browsing without interrupting their shopping flow.

The entire interaction remains inside the store domain, preserving brand consistency and the checkout process.

Compatibility

• Magento Open Source 2.x
• Adobe Commerce 2.x
• Compatible with default Luma based themes
• Does not modify Magento core files

Demo

Frontend Demo
youtube.com/watch?v=aoQdlSi-slo&authuser=0