Merry Christmas, 25% OFF. Coupon: XMAS Explore

How to configure Color Swatches in Magento 2

magento-2-tutorial
how-to
configure
swatches

In shopping online, shoppers only base the senses to make a judgment and decide whether they will buy this product or not. Because of that, it is necessary to give the true attributes of the items by Swatches feature such as color, pattern, and texture. For example, you have a shirt and it is more attractive with unique shades of color than flat color. The more realistic the customers feel, the more products you can sell out.

Color Swatch is a great solution for the configurable products to show customers the variety of color, pattern or design of your product. On the store view, the swatches of product are displayed on the catalog page and product detail page as the following:

How to configure Color Swatches on Product Page

Text-Based Swatches

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

How to configure Swatches Text-based Swatches

When text-based swatches are used to show the available sizes, any size that is not available is crossed out.

How to configure Swatches Text-based Swatches Unavailable Size

Swatches in Layered Navigation

The swatches including color swatches and text-based swatches can be also used in the layered navigation.

How to configure Color Swatches in Layered Navigation

How to configure swatches in Magento 2 as the following steps.

To Configure Color Swatches:

  • Step 1: Create the Swatches
  • Step 2: Update your product
  • Step 3: Save Product

Step 1: Create the Swatches

Apply one of the following method to create the swatches.

Method 1: Add a Color Swatch

  • Identify the exact color for your product.
  • On the Admin sidebar, Stores > Attributes > Product.
  • In the grid, find and edit the Color attribute.
  • Set Catalog Input Type for Store Owner to Visual Swatch.
  • Under Manage Swatch, click on Add Swatch to add a new definition to the bottom of the list. Then, do the following:

How to configure Swatches Manage Swatch Values

  • On the swatch menu, select Choose a color.

How to configure Swatches Choose Swatch Color

  • In the color picker, enter the six numbers that represent the hexadecimal value of the new color in the # field, and press the Backspace key to delete the current value. Then click on the Color Wheel button in the lower-right corner to save the swatch.

How to configure Swatches Hexademical Color

  • Enter the label for the color in the Admin and Default Store View.
  • Mark the checkbox under the Is Default to set the default color as you need.
  • Enable to change the order when click on the icon in the top left of Manage Swatch table and drag it to the new position.
  • When complete, click on Save Attribute, then flush the cache in Cache Management tab.
  • Finally, go to Edit mode in each product, and update Color attribute with the correct swatch. To update multiple products at the same time, follow the steps below.

Method 2: Upload a Swatch Image

  • Collect the swatch image that is correct for your product.
  • On the Admin sidebar, Stores > Attributes > Product.
  • In the grid, find and edit the Color attribute.
  • Set Catalog Input Type for Store Owner to Visual Swatch.
  • Under Manage Swatch, click on Add Swatch to add a new definition to the bottom of the list. Then, do the following:
    • On the swatch menu, select Upload a file.

    How to configure Swatches Upload Swatch file

    • Choose the desired image from your computer.
    • Repeat these steps for other swatch images.
    • Enter the label for the color in the Admin and Default Store View.
  • When complete, click on Save Attribute, then remember to flush the cache in Cache Management tab.
  • Finally, go to Edit mode in each product, and update Color attribute with the correct swatch. To update multiple products at the same time, follow the steps below.

Step 2: Update your product

  • On the Admin sidebar, Products > Inventory > Catalog.
  • Filter the list by Name or SKU to include only the applicable products.

How to configure Swatches Filter Attributes

  • Mark the checkbox of each product that you want the swatch to apply. And then, set the Actions control to Update Attributes.

How to configure Swatches Upload Attributes

  • Look down to the Color attribute, and mark the Change checkbox.

How to configure Swatches Change Color

  • Click on Save to apply the swatch. Then remember to flush the cache in the Cache Management tab.

Reference: Magento 2 user guide



It comes to the end of tutorial: How to configure Color Swatches in Magento 2.

Please leave comments if you have any questions, feedbacks.

Comments for How to configure Color Swatches in Magento 2

You also may like these Magento 2 Extensions

One Step Checkout

$199
18 reviews

Layered Navigation

$149
7 reviews

Store Locator

$199
no review

Shop By Brand

$99
no review

Zoho CRM

$249
no review

FAQ

$149
10 reviews

Better Blog

FREE
7 reviews

Affiliate

$149
7 reviews