Color Swatch design

[itanet]

How do I change from a Circle  Visual Color Swatch to Square/Box design in Magento 2.4 ?

See Picture here

[magentogra692a]

You can achieve this through CSS modifications exclusively. To offer the precise solution, it would be beneficial if you could share the website link.

[ibtisamdev8aef]

Here are the steps to change from circle to square color swatches in Magento 2.4:

1. Override the _extend.less file for your theme.

2. Open 

app/design/frontend/<Your_Theme>/web/css/source/_extend.less

3. Add the following code:

.swatch-attribute-options {

    .swatch-option {
        border-radius: 0; 
    }
}

4. Save this file and flush Magento caches.

This will override the default border-radius property that makes swatches circular. Setting it to 0 makes the corners square.

Alternatively, you can override swatch styling in your own custom CSS/LESS without touching the _extend.less source. The key is adding:

.swatch-option {
   border-radius: 0;
}