use the key features of the extension to use swatches more effectively

show products sfrom the several sides right from the cateory page

Skip to the beginning of the images gallery

User Guide

Book a Live Demo

2.4.7-p2; 2.4.6-p6; 2.4.5-p8; 2.3.7-p4

Color Swatches Pro for Magento 2

see M1 version

4.9

98%

16 reviews

Provide customers with the most fulfilling shopping experience possible. Enrich the Magento 2 Color Swatches functionality with a bunch of new features.

Display price of simple products
Change product image on mouse hover
AJAX product info reload for better perception
Group related colors and show more items in search
Fully optimized for mobile
Mage-OS compatible
Hyva-ready storefront

Pick a combo deal with 15% discount:

15%

Color Swatches Pro M2

$169

15%

Mega Menu Pro M2

$199

15%

Improved Sorting M2

$199

$567

Save $85.05

$481.95

Make good steps on the way to providing a better shopping experience

🚩 Challenge

An important part of Magento web stores are products like magento 2 configurable, bundle products or virtual products that consist of simple products. And it might be challenging to present items that have numerous options like color, design, material and other. That’s why store owners prefer a direct method of communication with swatches. With the Color Swatches Pro extension, you can make sure all of your products are presented in the right and proper way.

💫 Solution

Magento 2 Color Swatches is an extension for the e-commerce platform default functionality designed to upgrade product presentation. In a nutshell, it is a color selector module for online stores, which animates text attributes of configurable products in Magento. Thus, color swatches (a) help shoppers view various product color magento options and (b) let store owners be more creative in presenting their inventory to stand out in the competitive crowd.

Check our video guide to see how to configure price display options

Exceptional presentation

Ecommerce has its specifics: customers cannot touch and examine goods in their hands as they do in regular store. Instead while online, they want as much detailed information on products as possible. Manage a vivid many-sided presentation of your configurable products with the extension for Magento 2:

Change main product image on mouse hover

Let your customers swatch colors of Magento 2 configurable product variants simply hovering over the options.

Show relevant product info on the cart and checkout pages

Always display only relevant simple product information on the cart and checkout pages.

Use smart page reload

The data as image, price, SKU will be reloaded automatically after customers select custom options.

Various price display

Shoppers are always attentive to sales and discounts, they concern about price a lot. It's in your interest to keep all the price details in order and display everything accurately (especially for configurable and bundle Magento 2 products):

Display prices with swatches

Display prices of the simples below corresponding swatches on a parent item page. Also, mark an out-of-stock item as a crossed-out swatch.

NEW | Product Matrix

Display a handy product matrix together with Magento 2 color swatches pro.

Display prices in drop-downs

You can also show prices in drop-downs. Choose whether to show the actual simple product price or the price difference.

Zoom & Lightbox

Highlight the quality of your goods with a must-have option for any product store. To perfectly display the goods with many details and nuances, use lens zoom functionality. Not to overweigh customers' attention - select inner zoom. Also, you can improve shopping experience with neat carousel & zoom. And a Magento 2 lightbox popup to focus customers on particular aspects.

Outside Zoom

Inner Zoom

Lens Zoom

Carousel options

Smart Lightbox

NEW | Image Flipper

Advanced options

Configurable Preselect

Apply preselect feature to display the cheapest or the first simple item on the product and category pages.

Share URLs with custom options

When a customer chooses different item options like (color, size etc.), the product URL automatically changes.

More items in search result

Suggest more variants to your customers when they search by colors. Associate related colors in one group.

Polish Magento 2 Color Swatches extension to make it shine

Limit the number of swatches on category pages

Manage the number of configurable Magento 2 swatches displayed under the main product image. In case the number of visible swatches is limited, customers will see a link like More Colors Available.

Compatibility with One Step Checkout extension

Enjoy the synergy of two modules: now predefined product options will be displayed on the customized cart and checkout pages. So that your customers will derive pleasure from the shopping process and definitely come back to your store again.

Let customers subscribe to out of stock options of configurable products

In case some of simple options of any configurable product are currently out of stock you can display them and let customers subscribe to a special notification letter. Motivate shoppers to return to your store. Check our Out of Stock Notification extension to use this feature.

Highlight special offers with eye-catching labels

Use Color Swatches Pro jointly with Product Labels extension and immediately draw customer attention to new arrivals or special products through various engaging labels. Automatically run several marketing campaigns at the same time, create any labels you need with ready made shapes. Enable your customers easily find necessary items in product list, and quickly make a purchasing decision.

magento-color-swatches-pro-m2-notifications

Create an outstanding shopping experience

An open secret: it's cheaper to retain a customer than acquire a new one. Pay extra attention to creating a foremost shopping experience. With the synergetic work of Amasty Color Swatches Pro and Amasty AJAX Shopping Cart extensions, you can make a huge step towards the aim.

According to the statistics, the extension can cover each business need in synergy with the following solution: magento b2b ecommerce.

improved-layered-navigation-pro-for-magento-2

Colored Swatches in the Layered Navigation

The swatches can be also used in the Amasty top hit AJAX Layered Navigation Magento 2 extension.

Easily guide international customers to the corresponding store versions

Make your store attractive and comfortable for the shoppers worlwide with the magento 2 currency switcher by guiding international customers to the corresponding stores with the appropriate currency and language.

How to create a new Color Swatch for a configurable product in Magento 2?

To apply the Magento color filter extension functionality, go to Stores > Attributes > Product and open the color attribute;
set the Catalog Input Type for Store Owner field to Visual Swatch;
In the Manage Swatch section, click Add Swatch and choose one of 3 options: Choose a color, Upload a file, Clear;
then fill in the Magento color code names for the Admin and Storefront;
save the attribute.

Why do you need a Magento 2 configurable product extension?

The Magento 2 configurable product extension allows you to give your customers a better shopping experience. Users can't touch and examine a product in their hands like they do while shopping offline. When using online stores, they need detailed product information. The extension allows you to manage the presentation of your configurable products with a large set of features.

FAQ

How to Setup Magento Color Swatches?

Step 1: Configure the Swatches In the Admin Sidebar, navigate to Stores > Attributes > Product. Click on the color attribute. Set Catalog Input Type for Store Owner to Visual Swatch. Optionally set Updated Product Preview Image to Yes for image updates with swatch selection. Choose No for Use Product Image for Swatch if Possible. Leave Advanced Attribute Properties as default. To add a new color swatch, click Add Swatch.
Step 2: Choose a Color or Upload an Image for Your Swatch To use a color: Select Choose a color and pick a color via hexadecimal code or color picker. To use an image: Select Upload a file and upload a square image file.
Step 3: Update Your Products Individually: Navigate to Catalog > Products, select a product, and Edit configuration. Here, you can customize images and prices for each color attribute.
By Bulk: Go to Catalog > Products, select products, and choose Update Attributes. Under Color, tick Change, and select your swatch. Remember to save and clear cache.

How can prices be displayed using the Magento 2 configurable product extension?

The Magento 2 configurable product extension (Color Swatches Pro) provides three options to showcase the prices of simple products on parent (configurable) item pages:

below the corresponding swatches;
as a product matrix (in a table);
in a dropdown.

These options offer flexibility for presenting prices based on customer preferences and design considerations.

4.5

See 500+ verified reviews

FAQ

Are Amasty extensions compatible with all themes and extensions by other vendors?

Amasty extensions work with all plugins we issued and with most 3rd-party plugins. If you come across a Magento 2 compatibility issue with any third-party module, we’ll definitely try to help you. If you face any technical issues, please create a ticket...

Will I get free support and updates?

Product updates for extensions purchased before Feb 1, 2022With the transition to product subscriptions, you will receive product updates for all extensions purchased before Feb 1, 2022 throughout the entire grace period — up to Aug 1, 2022. If you ...

Do you have the installation service in magento?

Yes, you can use installation and configuration services that are available as the part of Pro and Premium add-ons for your product subscriptions.Please note that this installation service doesn’t include uninstallation. So, if you need to completely...

Can I request a free trial?

Amasty doesn’t provide any trials of Magento extensions. There's one exception: Amasty extensions are provided for testing or demo purposes to our official Platinum Partners as a part of the “access to Amasty extensions for testing purposes with Composer...

Can I test an Amasty extension on a staging site before transferring it to a live one in magento?

Yes, you can install any Amasty extension on a test site and configure all the settings there before doing it on your live store.

How can I get a refund?

Amasty offers to its Customers a thirty (30) day money-back guarantee for the Software. In case the acquired extension didn’t meet your expectations, our support team is always ready to help you. Fees for support subscriptions and any services provided...

How can I receive a discount?

We are now working at a loyalty program for our customers that is supposed to bring even greater benefits in the long term. While it’s not out yet, you can look through these Special Offers. New discounts and specials are added every month. To stay ...

How to update a Magento 2 Amasty extension?

To update a Magento 2 extension by manual upload:1. log in to the customer account;2. navigate to the Products tab, scroll to the packages section, and click the Download link next to the extension that should be updated;3. Important: If some extension...

If I need additional features to be added to an Amasty extension, how can I ask for it?

To leave your feature request, log in to your customer account and open the Products tab. Then, scroll down to the bottom of the page, and leave your feature request in the following form: As soon as you send your request, it is considered by our ...

Magento 2 Amasty extensions installation

Each Amasty extension package is provided with the extension files, installation & setup guides, and a license agreement. Some extensions include import files examples as well. So how to install our Magento extension? What is the plugin...

How can I prolong support?

If you have an active support service subscription, it grants you access to support services for all products purchased before Feb,1 as long as your subscription is active. Alternatively, support services are only available as the part of a product ...

Can I change the EE extension to CE for free in magento?

Usually, no, you can’t exchange modules. Please, contact our support managers and they’ll consider your case individually. → Learn more about our special offers

How can I get a discount to re-purchase plugins?

Usually, we don’t provide any discounts. But you can contact us, and we’ll consider your case individually. → Learn more about our special offers

Reviews

Customer Reviews

Customization

Do you need specific features added so you can achieve your business goals?

Drop us a line and we'll customize this extension for you!

Change Log v 2.10.0

You can always download the recent version free of charge from your account installing an upgrade is easy

Check now →

See Magento (and other software) versions we support and guarantee their compatibility with our extensions

Check now →

Color Swatches Pro for M2
Grouped Options for M2

Select item

Version 2.10.0

Last Update: Aug 28, 2024

2.10.0 - Aug 28, 2024

Compatibility we added compatibility with the Hyvä Theme for the Color Swatches Pro. You can find the 'amasty/module-color-swatches-pro-hyva' package for installing in composer suggest (Note: the compatibility is available as a part of an active product subscription or support subscription)

Version 2.9.8

Last Update: Jul 01, 2024

2.9.8 - Jul 01, 2024

Improvement we added Qty Increments value to the Reloadable Information section
Fix we fixed the issue with the Display Last Attribute in Rows - For Specified Products setting that caused a console error
Fix we eliminated the Undefined variable: selectedProduct error
Fix we improved the compatibility with Amasty Improved Layered Navigation extension

2.9.7 - Mar 15, 2023

Compatibility now the extension is compatible with Magento 2.4.5-p2, 2.4.6

2.9.6 - Nov 04, 2022

Improvement we updated the deprecated jQuery functions
Fix the issue with images swiping in the mobile version was resolved
Fix we fixed the error occurred on a product page when SKU for a simple product which is preselected in a configurable product was changed

2.9.5 - Jul 06, 2022

Compatibility now the extension is compatible with Magento 2.4.4
Improvement we switched the module to a declarative schema
Fix we fixed the compatibility with Amasty Product Labels so now labels are displayed on category pages as they should
Fix the issue with displaying preselected products during filtration on category pages was resolved

2.9.4 - Jan 17, 2022

Improvement we added an option to display swatch title in the product matrix
Fix we resolved the issue with zoom not working after the initial page load
Fix we adjusted the behavior of dropdown options with out of stock child products
Fix now extension reloads product information only when all configurable options are selected when using dropdown attributes
Fix we fixed preselect behavior when the first option is out of stock

2.9.3 - Nov 09, 2021

Compatibility we improved compatibility with Amasty Jet Theme

2.9.2 - Sep 02, 2021

Fix we resolved the product page error for products without images

2.9.1 - Aug 19, 2021

Fix we adjusted the hiding of out-of-stock configurable options in a dropdown
Fix we corrected the display of a product’s gallery on PDP
Fix now dropdown options are getting preselected as expected

2.9.0 - Mar 24, 2021

Improvement we refactored the extension code to transfer Group Attributes functionality to the independent module Amasty Group Options

Version 2.8.8

Last Update: Feb 19, 2021

2.8.8 - Feb 19, 2021

Improvement now the lightbox is working even if there is only one image assigned to the product
Fix we corrected the delete confirmation popup title

2.8.7 - Feb 01, 2021

Fix we resolved the issue with unexpected crossing out of in-stock options for Configurable Products
Fix we corrected the display of simple products' prices in swatch titles
Fix now the swatches are not getting selected upon hovering over
Fix now the editing of product from the checkout cart page is performed as expected if product matrix is involved

2.8.6 - Sep 01, 2020

Compatibility we improved compatibility with Amasty Quick Order extension

2.8.5 - Aug 11, 2020

Compatibility compatibility with Magento 2.4 was added
Compatibility now the extension is compatible with Amasty Jet Theme

2.8.4 - Jul 08, 2020

Fix we resolved the issue with incorrect display of out of stock items in product matrix
Fix we corrected the malfunctioning of sorting on Group Attributes grid

2.8.3 - May 27, 2020

Improvement we slightly improved Grouped Options grid

2.8.2 - May 11, 2020

Compatibility compatibility with Elasticsearch was improved

2.8.1 - Apr 02, 2020

Compatibility compatibility with Amasty One Step Checkout was improved

2.8.0 - Apr 01, 2020

New GraphQL read compatibility was added for configurable products and product reloadable information settings

Version 2.7.4

Last Update: Mar 10, 2020

2.7.4 - Mar 10, 2020

Fix we rechecked and established correct dependency on jQuery UI library

2.7.3 - Feb 19, 2020

Compatibility compatibility with Request a Quote extension was enhanced

2.7.2 - Feb 13, 2020

Fix issue with Magento Inventory was resolved

2.7.1 - Feb 03, 2020

Improvement we significantly improved extension's performance

2.7.0 - Jan 04, 2020

Compatibility compatibility with Amasty Ajax Cart was improved
New we introduced an option to display simple product SKU in product matrix
Improvement we implemented performance enhancement
Fix we resolved multiple issues related to frontend view and backend product configuration

Version 2.6.6

Last Update: Oct 07, 2019

2.6.6 - Oct 07, 2019

Improvement we reviewed and enhanced the plugin’s code

2.6.5 - Aug 19, 2019

Compatibility compatibility with Magento 2.2.5 was improved

2.6.4 - Jul 09, 2019

Fix issue with grouped options was resolved
Fix issue with child configurable products was fixed
Fix minor fixes were resolved

2.6.3 - Mar 13, 2019

Compatibility a compatibility with Amasty Pre Order extension was improved
Fix a minor issue with grouped options was resolved

2.6.2 - Jan 28, 2019

Compatibility compatibility with Amasty Google Rich Snippets and SEO Toolkit extensions was enhanced

2.6.1 - Jan 15, 2019

Compatibility compatibility with Amasty Ajax Shopping Cart extension was improved
Fix an issue with some filter items created using the \"Manage Group Attributes\" displayed even they give 0 results was resolved

2.6.0 - Nov 29, 2018

Improvement now, the product matrix subtotal is displayed between the selection and the 'Add to cart' button
Improvement minor usability and design improvements were made

Version 2.5.9

Last Update: Nov 20, 2018

2.5.9 - Nov 20, 2018

Compatibility compatibility with Magento 2.3.0-alpha was added

2.5.8 - Nov 02, 2018

Compatibility compatibility with Amasty Ajax Shopping Cart extension was enhanced

2.5.7 - Oct 12, 2018

Fix the issue with an unselected attribute remaining in the URL was resolved
Fix the issue with the 'Enable Swipe Effect for Main Image in Mobile' setting and zoom feature on mobile version was resolved

2.5.6 - Oct 02, 2018

Improvement the work of share link with one dropdown and one swatches was enhanced
Compatibility compatibility with Amasty Product Labels extension was improved. Now it allows to change the product label upon the simple product selection for configurable products
Compatibility compatibility with Amasty Out of Stock Notification extension was improved
Fix an issue with change image on hover on the product page was resolved

2.5.5 - Sep 03, 2018

Improvement the styles and templates refactoring was made

2.5.4 - Aug 31, 2018

New the ability to set a slider for the swatches was added

2.5.3 - Aug 17, 2018

Improvement the product matrix work with quantity was enhanced
Improvement the Share URL feature was enhanced

2.5.2 - Jul 23, 2018

Improvement product page optimization for mobile was made
Improvement configuration page was enhanced

2.5.1 - Jun 22, 2018

Fix the issue with zoom on a product page was resolved

2.5.0 - Jun 15, 2018

New now, the module allows to preselect product attributes on the category page

Version 2.4.2

Last Update: Jun 08, 2018

2.4.2 - Jun 08, 2018

Compatibility the compatibility with Amasty Ajax Shopping Cart extension was improved
Fix the issue with displaying price in dropdown for disabled options was resolved

2.4.1 - Jun 05, 2018

Improvement customer is able to view the additional images on mobile using the swipe function

2.4.0 - Jun 04, 2018

New display product matrix for configurable items to help customers quickly add multiple child products to cart

Version 2.3.11

Last Update: May 29, 2018

2.3.11 - May 29, 2018

Fix a problem with slick gallery was resolved
Fix an issue with the product info not reloaded after dropdown change was fixed
Fix an issues on IE browser were resolved

2.3.10 - May 21, 2018

Fix an issue with image responsiveness on mobile was fixed

2.3.9 - Apr 26, 2018

Fixed an issue with incorrect backend model

2.3.8 - Apr 23, 2018

Fixed an issue with missing Share link for the dropdowns

2.3.7 - Apr 12, 2018

Fixed an issue with the 'configurable preselect' feature when gallery was loaded before the swatches

2.3.6 - Apr 02, 2018

New Information section is added. Now you can see the version of installed extension, available updates, User Guide link, conflicts and other useful data right on the module Configuration page

2.3.5 - Mar 22, 2018

Minor bug fixes

2.3.4 - Mar 14, 2018

New Added the check for the zoom to be enabled when reloading an image by mouse hover

2.3.3 - Mar 06, 2018

Fixed an issue with minor java script error related to dropdown usage

2.3.2 - Mar 01, 2018

Fixed an issue with the unslick not working for the slow pages when the contend hadn't loaded before java script started working

2.3.1 - Feb 23, 2018

Added the compatibility with the video image type

2.3.0 - Feb 19, 2018

New added the possibility to preselect the options of the configurable product i.e. the first options or the cheapest simple product
New an image flipper feature is added. It allows to quickly view an alternate image on the catalog products listing simply by placing mouse over the product image

Version 2.2.0

Last Update: Feb 09, 2018

2.2.0 - Feb 09, 2018

New Allows to show the out-of-stock products as crossed swatches. After the version 2.2.0 Magento has removed the out of stock swatches feature - the functionality with crossed swatches. We have implemented this feature in the extension.

Version 2.1.3

Last Update: Jan 05, 2018

2.1.3 - Jan 05, 2018

Fixed an issue with the missing gallery for RTL direction
Fixed an issue with loading the simple product images at the end of the gallery
Improved the compatibility with M2.1.5 (image reload with zoom enabled)

2.1.2 - Dec 22, 2017

Minor JS fixes

2.1.1 - Dec 07, 2017

Magento 2.1 compatibility improvements

2.1.0 - Dec 06, 2017

New Added the Zoom (Outside / Inside / Lens) functionality that allows to see every detail of the product
New Added the Lightbox effect when opening full-size images
New Added the Carousel to show the product thumbnails
New Allows to change the main product image on mouse hover

Version 2.0.1

Last Update: Oct 17, 2017

2.0.1 - Oct 17, 2017