Before learning about the color swatch feature for the configurable product Magento 2, you might get too familiar with the color swatch concept. Simply speaking, a swatch is a range of color samples for users to compare and choose the preferred one easily.
With this usage in mind, Magento 2 color swatch is to help online shoppers to select among all of the available colors without page reloads, each of which presents a specific child product of the configurable.
Not only does this functionality make your product more visual, but it also gives the shoppers ease in choosing their favorite items. The higher conversion rate is usually along with better sales.
Today, we discuss types of default swatches with a focus on how to configure Magento 2 color swatch configurable product. In this article, we also reveal the best solution to enhance Magento 2 swatch features for even more fascinating and effective.
Let’s begin!
What Is Color Swatch For Configurable Product Magento 2?
Table of Contents
Magento 2 color swatch is the selectable color option for your configurable products. When customers click on the color swatch, the corresponding product image will be shown.
This color swatch feature in Magento helps improve the customer experience, thus, boost your sales.
Magento color swatches can be used on product pages as well as product listings and layered navigation.
Other than Color Swatch, Magento also supports other Configurable Swatch such as swatch for size, texture. etc.
However, in this article, we only focus on color swatch for configurable product Magento 2 and how to set it up in your store.
Enhance customer shopping experience with Awesome Display for Configurable Products in Magento 2.
3 Types of Default Magento 2 Swatch For Configurable Product
By default, it provides a flexible swatch feature that is suitable for every purpose. There are 3 types of swatches used for configurable products. The swatch can be applied on the product list pages, product pages, as well as in the layered navigation to outline the currently chosen option.
See 3 default swatch types below:
- Magento 2 Text Swatch: This functionality is applied for displaying sizes or other kinds of text-based options. A text swatch can be helpful for a shop that is selling electronics or different types of products with text options. When text-based swatches are used to show the available sizes, any size that is out of stock is crossed out.
- Magento 2 Color Swatch Configurable Product: this allows you to display available color options on the right side of the product image. It is simpler for a shopper to choose the best product when items are shown in available colors.
- Magento 2 Image Swatch: The image swatch feature allows you to give your customers the ability to check the original product details. Also, swatches are displayed not only on a product page but also on category pages.
Magento Swatch feature is most commonly used in fashion shops. So if you are running one of these stores for clothes, shoes, bags, etc, don’t miss this amazing feature with the detailed instructions to create it.
Getting back to our main topic today, we will walk you through how to Add Magento 2 Color Swatch in two steps.
Add Magento 2 Color Swatch For Configurable Product
Step 1: Configure the Magento 2 color swatch
You just realized that the default color swatches do not fit with your products. Here in the example, your product is purple, while the swatch is pinkish.
Change Magento 2 color swatch for the better experience
Create Magento 2 color swatches
Under the Properties tab, you can configure all the available swatch settings:
In Catalog Input Type for Store Owner: Define the Magento 2 color swatch input type by selecting Visual Watch from the drop-down menu; then, you can add the colors you need and fill in text descriptions. Besides, you can replace colors with images.
In Update Product Preview Image: Filtering by this attribute will update the product image on the catalog page.
Set Values Required and Use Product Image for Swatch if Possible as No.
Set up Magento 2 color swatch properties
Next, move to the Manage Swatch section. There are 2 ways to add swatch available on the Swatch menu. You can use one of them to create the swatches:
+ Method 1: Add a Color Swatch
+ Method 2: Upload a Swatch Image
Two ways to add Magento 2 color swatch values
Method 1: Add a color swatch
You might select choose a color on the swatch menu.
You can enter the value of the new color or choose any color you want by using a color picker. Then click on the Color Wheel button in the lower-right corner to save the swatch.
Pick color from Magento 2 color swatches picker
In the Admin and Default Store View, you might enter the label for the color.
The positions of swatches can be changed by simply dragging.
When it’s done, hit the Save Attribute button and flush Magento cache.
Method 2: Upload a swatch image
Firstly, you should collect the swatch image that is correct for your product.
You might select Upload a file on the Swatch menu.
Upload a file of Magento 2 color swatch image
From your computer, you might choose the desired image. For other swatch images, you might repeat these steps.
In the Admin and Default Store View, you might Enter the label for the color.
When it’s done, hit the Save Attribute button and flush Magento cache.
Step 2: Update your product
Navigate to Admin sidebar ⇒ Products ⇒ Inventory ⇒ Catalog.
You need to attach a newly created or modified attribute to specific products. To do this task, please filter the list by Name or SKU. For example, we filter Olivia 1/4 Zip Light. Tick on the children’s products that need updating the color swatch.
Filter specific product to apply Magento 2 color swatch change
Select the Update Attributes option from the Actions drop-down.
Look down to the Color attribute, and mark the Change checkbox. Then, choose the newly added color swatch.
Update color attributes
Finally, to apply an attribute, hit the Save Product button. Then remember to flush the cache in the Cache Management tab.
Magento 2 configurable swatch is changed in the frontend
Here we present a tutorial video to help you track step by step on “How to add Magento 2 color swatch configurable product.”
READ MORE Why Magento 2 B2B Extensions Package Fits New Customer Journey?
Best Configurable Product Magento 2 Extension
Configurable Product Grid Table View for Magento 2
A better solution is to add the Magento color swatch for a configurable product in a grid table by using our extension Configurable Product Grid Table View for Magento 2.
This table allows your customers to see all size, quantity, price, and of course the color of the children’s products instead of choosing from different drop-down boxes.
It makes it simpler for wholesale customers to pick up a suitable product than the Default view, thus they will quickly lead to the decision of buying your products.
As you can see, the first attribute in the grid table can be clickable and also integrated with the color swatch function, which brings a more visual overview of products for your customers.
We are confident that this module is the best way to optimize the display of the Magento 2 configurable product grid table view and enhance the B2B shopping experience in your store.
Check out its full list of features:
- Show all associated products in a table for quicker ordering;
- Show all related info: availability, SKU, unit price, tier prices, quantity, and subtotal;
- Allow adding multiple simple products to cart simultaneously;
- Integrate default Magento color swatch function;
- Configure table view display per customer group and per product page;
- Highly responsive on different devices: mobile, desktop, tablet, etc.
Magento 2 Simple Details on Configurable Product
Another great tool to simplify configurable products’ appearance and make it more user friendly is to use module Magento 2 Simple Details on Configurable Product.
This module makes sure customers can see all details of one selected option without page reload.
And when a customer chooses a child product item, it will display the selected child item’s image.
Check out its full list of features:
- Dynamic content updates: name, SKU, descriptions, and other attributes
- Generate a URL for each selected option
- Preselect options for multiple purposes
- Enrich customer shopping experiences and buying conveniences
WRAP UP
With a step-by-step guide to adding color swatch with configurable product Magento 2 extension, we hope you can know clearly and practice quickly. This will enhance your customer experience a lot, so your customer will get one step closer to go to the final purchase period – placing an order. Moreover, click Magento 2 extensions list to discover all the best modules ever for e-commerce businesses!
BSS Commerce is one of the leading Multi-platform eCommerce solution and web development services providers in the world. With experienced and certified developers, we commit to bring high-quality products and services to optimize your business effectively.
CONTACT NOW to let us know your problems. We are willing to support you every time.
