cancel
Showing results for 
Search instead for 
Did you mean: 

Color Swatch design

Color Swatch design

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

See Picture here

2 REPLIES 2

Re: Color Swatch design

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


Re: Color Swatch design

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;
}
Avid learner and technical marketer at devrims.com