Guest post by Mageplaza 

People often make decision affected by their moods. That is the reason why in e-commerce, it is necessary for shop owners to pay attention to the display of their stores on the frontend. Therefore, when giving attributes to any item, shop admins need to be careful to provide the true value of Swatches features regarding color, pattern, and texture. A product with detailed descriptions and lively images will sure to attract more customers than a flat picture only, for example. In other words, the appearance of a landing page exerts profound effects on forming intuitive decisions of buyers about whether they should purchase a product or not. Therefore, obtaining a Color Swatch extension is the most appropriate choice for online merchants to configure their products display.


Display on the frontend


In the store view, swatches of products are presented in both catalog page and product detail page.



Text-based Swatches

In case you do not select an image for color swatches, on the display, a text-based will be shown rather than the true colors. A text-based swatch functions in the same way as an image swatch.



Text-based swatches are also used to present different sizes of products. If there is any size which is not available, a cross will be made on that swatch.

Swatches in Layered navigation

For stores which are applying color and text-based swatches, they can use them as filters in layered navigation.



Configuration in the backend

Step 1: Generate swatches

To create swatches for your stores, you can choose one of two methods below to follow.

Method 1: Add a Color Swatch

    • Determine what color will present for your product
    • From Admin Panel, access Store > Attribute > Product
    • A grid will appear, from this grid, find Color attribute to start editing
    • In Catalog Input Type for Store Owner choose Visual Swatch
    • In Manage Swatch section, select Add Swatch to add a new attribute



    • On the swatch menu, select Choose a color option




    • In the color picker, provide a chain of six numbers which present the hexadecimal value of the new color you want to add. These numbers have to be entered in the field box #. After that, click on the Color Wheel right at the bottom of the picker to save the color swatch.




    • In Admin and Default Store View, provide name for the new color
    • Tick on the checkbox under Is Default to determine default color for store
    • Press on the icon on the top of Manage Swatch table and drag it to new position.
    • Choose Save Attribute button to save previous setting the flush the cache in Cache Management section
    • Navigate Edit page of each product and update new color attribute with its true swatch. In case you want to update several items at the same time, go to step 2.

Method 2: Upload a Swatch Image

    • Find a correct image to use a swatch for your product
    • From the Admin sidebar, go to Store > Attributes > Product
    • When the grid appears, select color attribute you want to edit
    • In Catalog Input Type for Store Owner, choose Visual Swatch
    • In Manage Swatch field, select Add Swatch to add new value to the list
    • On the swatch menu, choose Upload a file



    • Select a picture from your devices
    • If you want to upload more swatch images, follow the same steps
    • Name the color in the Admin and Default Store View
    • Choose Save Attribute button to save configuration and flush the cache in Cache Management tab
    • Navigate Edit page for each product to update color attribute with true swatch. Follow the new steps to update various products at the same time.


Step 2: Update your product

    • From admin Panel, go to Products > Inventory > Catalog
    • Use filters Name or SKU to find out the applicable products



    • Tick on the checkbox of all products you want to apply the swatch



    • In Actions section, select Update Attributes



    • In Color field mark the checkbox Change
    • Press on Save button to apply this swatch the remember to flush the Cache in Cache Management tab

That is the final step to configure Color Swatches in Magento 2.

Conclusion

The use of color swatches in Magento 2 is significantly helpful in empowering customers the chance to access to more detailed descriptions of any product. However, customers will receive even more options when looking for a wish product if store owners equip their Magento stores with a Layered Navigation extension. With this great extension, buyers will take less time to find out the most appropriate products that can meet their preferences regarding not only size and color but also other factors such as price, bestsellers, high rating, and so on. Therefore, it is high time for you to consider getting this extension. Here you can learn more about this helpful supporter.