Magento 2 Color Swatches Extension by Amasty

Today, we review a substantial Magento 2 color swatches functionality enhancement. Meet the Magento 2 Color Swatches Pro extension by Amasty – one of the most reliable tools for achieving immersive shopping experience. The tool allows customers to quickly check available product options and select a desired one in the most convenient way. At the same time, store owners get a chance to stand out from competitors by implementing interactive elements on the storefront.

Below, we shed light on its core features, as well as provide a backend tutorial. The frontend section of the Magento 2 color swatches extension is reviewed as well. So, if you are wondering how to improve your configurable products, you’ve come to the right place.

Download / Buy Amasty Color Swatches Pro Magento 2 Extension

Features

• Separate price display for simple products;
• Dynamic image change on mouse hover + info reload (AJAX);
• URLs for selected product configuration;
• Group related colors;
• Optimized for mobile devices.

After installing the Magento 2 color swatches extension, you will be able to represent your configurable, grouped, or bundle products in the most user-friendly way: allow customers to switch between their components (simple products) without reloads.

The module allows changing the main product image just on mouse hover – can you imagine something more intuitive? There is no need to click multiple times to see a new product option. Furthermore, the Magento 2 color swatches module displays only relevant information on the cart and checkout pages, as well as changes price, SKU, and description when a new option is selected on a product page.

In case each simple item of a configurable product has its own price, you can display it along with color swatches, so there is no need to surf between various product pages to discover prices. The Magento 2 module also allows placing a product matrix for configurable products, letting customers to quickly put multiple simple products in the cart. The matrix can display the price and available qty of each product option. It is also possible to choose the required quantity right in the matrix on the product page. Alternatively, you can display prices in a drop-down list of options.

Moreover, you can leverage zoom and lightbox functionality to allow customers to view every detail of a product. Besides, you can use a carousel and image flipper for the goods on your web store.

Other customer-oriented options include URLs for product combinations. Thus, your visitors can easily share the desired configurable product combination with friends or save it for further purchase.

The Magento 2 Color Swatches extension even allows you to associate related colors in one group. As a result, when a customer searches by blue, the module will display light blue, azure, indigo, and all other colors that are in the group.

Besides, you can:

• Set a limit on the number of swatches on a category page;
• Enable subscriptions to out of stock options of a configurable product;
• Integrate the extension with One Step Checkout.

Let’s see how to manage all these features via the backend section.

Backend

To configure the extension, to to Stores -> Settings -> Configuration -> Amasty Extensions -> Color Swatches Pro. All settings are divided into 8 sections: General, Reloadable Information, Product Matrix, Preselect, Zoom, Lightbox, Carousel, and Out of Stock Notification.

The first one includes the following options:

• Enable Using Share Link – allow customers to share product combinations;
• Display Price of Simple Products in Swatch Title – enable or disable the feature;
• Display Price of Simple Products in Drop-Downs – you can show actual price or price difference; it is also possible to hide price there;
• Show Selected Option Swatch in Cart and Checkout – enable or disable the feature;
• Change Main Product Image on Mouse Hover – enable or disable the feature;
• Show Out of Stock Configurable Attributes – if enabled, swatches of simple products will be crossed if a product option is out of stock;
• Enable Zoom – when set to ‘Yes’, activates Zoom, Lightbox, and Carousel functions;
• Enable Product Image Flipper – activates flipper image effect on category pages;
• Enable slider for the swatches – enable or disable the feature;
• Visible Items Quantity – set the number of products to be displayed in the swatches slider.

As for the Reloadable Information section, it allows you to specify data you want to update: Name, Description, Short Description, Attributes block, SKU, or None.

Besides, you should specify Dom-Selectors for the selected attributes.

The Product Matrix section lets you place a product matrix for all products or specified products and add columns with available quantities of simple items and subtotal amounts.

In the Preselect tab, you can set the way products are preselected when a frontend user opens a product page: either by The First Options or The Cheapest Product. Here, you can also enable “Preselect on Category Page”.

Next, you can activate the zoom feature and choose its type: Outside, Inside, or Lens. Note that on mobile devices, only the Lens type can be used. Depending on the selected option, you will need to configure appropriate settings of the feature.

The Magento 2 color swatches module also allows you to enable the lightbox effect for product images in full size. You can also activate the lightbox effect for thumbnails, make it endless, select one of the available options for transition effect between slides and animation effect on opening/closing, and display thumbnail helper.

Besides, you can use the Carousel functionality and configure its settings:

As for Out of Stock Notification, the Magento 2 color swatches extension lets you enable notifications on out of stock products back to stock. Note that it works only in combination with the Amasty Out of Stock Notifier Magento 2 extension.

To manage group attributes, navigate to Stores -> Color Swatches Pro -> Manage Group Attributes. The relevant grid shows each existing group’s ID, position, title, status (enabled or disabled), attribute, and products options.

When adding a new group, create its title and code, set the status to ‘Enabled’, select a color for the swatch or upload an image, specify its position, select an appropriate attribute and its options to include in the group.

Frontend

This is how attributes might change when you select a new option:

Attributes are updated on the mouse hover over the product option, according to how they are specified in the backend section. Besides, you can see the example of how prices are displayed below Magento 2 color swatches.

Also, there is a section with a shareable link to a product combination:

Below, you can view an example of a product matrix:

An image on a category page is changed automatically on mouse hover in the following way:

These are drop-down lists of options with prices:

Recent Updates

Magento 2 Color Swatches Pro 2.5.9

• New option: a slider for swatches can be displayed now.
• Now it is possible to preselect product attributes on category pages.

Magento 2 Color Swatches Pro 2.4.2

• New feature: now, a product matrix can be displayed for configurable products.

Magento 2 Color Swatches Pro 2.3.11

• Information section was added to the Configuration page in the extension backend.
• The check for the zoom was added that can be enabled when reloading an image by mouse hover.
• Compatibility with the video image type was added.
• Now it is possible to preselect the first options or the cheapest simple item of the configurable product.
• New feature: an image flipper can be used to show an alternate image on mouse hover on the category page.

Magento 2 Color Swatches Pro 2.2.0

• New option: show out of stock products as crossed swatches.

Magento 2 Color Swatches Pro 2.1.0

• Now it is possible to display simple products prices below corresponding swatches for an unlimited number of attributes.
• NEW: The Zoom (Outside / Inside / Lens) functionality that allows viewing every detail of the product was added.
• NEW: The Lightbox effect when opening full-size images was implemented.
• NEW: The Carousel for product thumbnails was implemented.
• NEW: Now, it is possible to change the main product image on mouse hover.

Final Words

The Magento 2 Color Swatches extension by Amasty radically improves the default shopping experience of the platform by providing an entirely new level of interaction with the storefront elements. Besides, it is extremely easy to configure the module due to its intuitive backend interface. The price of the Magento 2 color swatches module is only $169. You can download it here:

Download / Buy Amasty Color Swatches Pro Magento 2 Extension