Before knowing about Magento 2 configurable swatches feature, 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 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 for a specific child product of the configurable. Not only does this functionality make your product more visual but it also gives the shoppers ease to choose their favorite items. The higher conversion rate is usually along with better sales.
Today, we discuss types of default swatches with the focus on how to configure color swatch. In this article, we also reveal the best solution to enhance Magento 2 swatch features for even more fascinating and effective. Let’s begin!
3 Types of Magento 2 Swatch by Default
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. Below are default swatch types
- 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: 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.
Bonus: If you also run Magento 1 website, you also need to know How to create Magento Color Swatches for Configurable Product.
Get back to our main topic today, we will walk you through how to Add Magento 2 Color Swatch in two steps.
Step 1: Create the Magento 2 Color Swatches
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.
Under the Properties tab, you can configure all the available swatch settings:
In Catalog Input Type for Store Owner: Define the Magento 2 color swatches 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.
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
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.
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.
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 products that need updating the color swatch.
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.
Finally, to apply an attribute, hit the Save Product button. Then remember to flush the cache in the Cache Management tab.
Here we present a tutorial video to help you track step by step of “How to add Magento 2 color swatches.”
Configurable Product Grid Table View for Magento 2
For further information, you can add color swatch for a configurable product in a grid table when applying 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 products instead of choosing from different drop-down boxes. This extension will provide your customers with a better experience when shopping in your store. Wholesale customers will find it’s simpler to pick up a suitable product than Default view, and then 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 color swatch function which brings a more visual overview of products for your customers. In case you have any further question regarding this blog, Website Development or our extension store on Magento 1 and Magento 2, please feel free to contact us. Our support team is always willing to aid you with the best service of FREE installation, FREE update, FREE 1-year support and 30-day money back guarantee.