1.8 (35%) 4 votes

Configure Color Swatches in Magento 2

  1. Text-Based Swatches
  2. Swatches in Layered Navigation

It is crucial to give the true attributes of the items by Swatches features such as color, pattern, and texture, because customers only base the senses to make a judgment and decide whether they will buy the product or not in shopping online.  If  the clients feel  realistic, you might sell out more products.

To show clients the variety of pattern , pattern, or color of your product, Color Swatch is a good solution for the configurable products . In addition, the swatches of product are displayed on the product detail page and the catalog page on the store view, as the following:

Configure Color Swatches in Magento 2
Configure Color Swatches in Magento 2

Text-Based Swatches

However, a text-based will appear instead of true color and behave in the same way as a swatch with an image, if you did not set a specific image for a color swatch.

Configure Color Swatches in Magento 2
Configure Color Swatches in Magento 2

Any size that is not available is crossed out when text-based swatches are used to show the available sizes.

Configure Color Swatches in Magento 2
Configure Color Swatches in Magento 2

Swatches in Layered Navigation

In the layer navigation  , The swatches including  text-based swatches  as well as  color swatches might be also used.

Configure Color Swatches in Magento 2
Configure Color Swatches in Magento 2

Configure swatches in Magento 2 as the guiding:

Configure Color Swatches in Magento 2

Step 1 Create the Swatches
Step 2 Update your product

Step 1: Create the Swatches

To create the swatches,  you might apply one of the following methods.

Method 1 Add a Color Swatch
Method 2 Upload a Swatch Image

Method 1: Add a Color Swatch

  • For your product, you might identify the exact color.
  • You might go to the Admin sidebar, you might choose Stores , you might click Attributes , then select Product.
  • You might find and edit the Color attribute in the grid.
  • To Visual Swatch, You might set Catalog Input Type for Website Owner.
  • To add a new definition to the bottom of the list, you might click on Add Swatch under Manage Swatch. Then, you might do the following:
Configure Color Swatches in Magento 2
Configure Color Swatches in Magento 2
  • You might select Choose a color on the swatch menu.
Configure Color Swatches in Magento 2
Configure Color Swatches in Magento 2
  • You might enter the six numbers that represent the hexadecimal value of the new color in the # field in the color picker,  and to delete the current value, you might select the Backspace key. Then to save the swatch, in the lower-right corner, you might click on the Color Wheel button.
Configure Color Swatches in Magento 2
Configure Color Swatches in Magento 2
  • In the Admin and Default Store View, you might Enter the label for the color.
  • To set the default color as you need, you might Mark the checkbox under the Is Default.
  • When clicking on the icon in the top left of Manage Swatch table and drag it to the new position, you might Enable to change the order .
  • You might click on Save Attribute when you complete,then  in Cache Management tab, you might flush the cache.
  • Finally, you might go to Edit mode in each product, and with the correct swatch, you might  update Color attribute.You might follow the steps below to update multiple products at the same time .

Method 2: Upload a Swatch Image

  • You might collect the swatch image that is correct for your product.
  • You might go to the Admin sidebar, click Stores , then you choose Attributes , and select Product.
  • You might find and edit the Color attribute in the grid.
  • To Visual Swatch, you might set Catalog Input Type for website Owner.
  • To add a new definition to the bottom of the list, you might click on Add Swatch under Manage Swatch. Then,you might do the following:
    • You might select Upload a file on the swatch menu on the swatch menu .
Configure Color Swatches in Magento 2
Configure Color Swatches in Magento 2
    • 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.
  • In Cache Management tab, you might click on Save Attribute when complete, then you might remember to flush the cache.
  • Finally, you might go to Edit mode in each product, and  with the correct swatch, you might update Color attribute. Moreover, you might follow the steps below to update multiple products at the same time.

Step 2: Update your product

  • You might go to the Admin sidebar, then you might click Products , then choose Inventory , you might select Catalog.
  • To include only the applicable products, you might Filter the list by Name or SKU.
Configure Color Swatches in Magento 2
Configure Color Swatches in Magento 2
  • You might mark the checkbox of each product that you want the swatch to apply. Then, you might set the Actions control to Update Attributes.
Configure Color Swatches in Magento 2
Configure Color Swatches in Magento 2
  • You might look down to the Color attribute, then you might mark the Change checkbox.
Configure Color Swatches in Magento 2
Configure Color Swatches in Magento 2
  • To apply the swatch, you might Click on Save. In the Cache Management tab, you might remember to flush the cache.

Thanks for reading!

 

 

You can check our Magento extensions and Magento 2 modules for your ecommerce store ! 

Your Magento website needs a powerful Magento ERP for stock control.

DON'T MISS THE CHANCE!

magento erp

How to Override Magento JS Core in Magento 2 - Magento 2.3
How to Disable Requirejs Cache in Magento 2 - Magento 2.3

Leave a Reply

Your email address will not be published. Required fields are marked *