How to change Swatch Dimensions on the Product Page?

Hi Craig, hi guys,

I wonder if you can help.
At first my environment for testing: fresh M2.3.4 installation no 3rd party modules, Ubuntu18.04, PHP7.2, Oracle VM.

I’m trying and straggling to change M default size of swatches.

I created, registered a theme under my VendorName

app/design/frontend/VendorName/theme/ (composer.json, registration.php, theme.xml)

and applied it in M admin panel Content > Design > Configuration > Action and selected my new default theme

Next, I created a new etc directory within my newly created theme and finally, I created a view.xml file in the etc directory.

Cleared and flushed my cache with:
bin/magento c:c and bin/magento c:f

Removed processed files with:

rm -rf pub/static/frontend/ var/view_preprocessed/

Cleared my browser cache and it didn’t work.
Having said this I have already done it on one of my websites and it worked.
I’m stuck here. I even tried to modify the original M view.xml file under
vendor/magento/module_swatches/etc but with no results.

Could you guys please give me a tip on what am I doing wrong?
Thank you.


Source of info:

The solution you originally referred to is only applicable in 2.0.x. A lot of the theme stuff has been reworked since 2.1.x.

If you inspect element the swatch, you can simply override the CSS.



Therefore my solution would not avoid xml layouts and instead it would to simply extend your CSS:

Step 1: Delete the existing etc/directory you created (no need to override xml for this change)

Step 2: Create directory for the Magento Catalog directory (inc directories required for CSS changes)


Step 3: Create _extend.css file to put your custom CSS inside


Step 4: Inside _extend.css, add the CSS to change the size of the swatch

/* Custom Swatch Size */
.swatch-option {
	height: 60px;
	min-width: 60px;

You may want to tweak these CSS values and references to your liking. Chrome Inspect Element is your friend here.

Step 5: Manually delete any static generated files (I find I have to do this sometimes for changes to shows)

rm -rf pub/static/frontend/Test_Vendor

Step 6: Deploy static content (replace en_US with applicable locale)

bin/magento setup:static-content:deploy en_US -f

Step 7: Clear cache

bin/magento clear:cache

Finished File Structure

└── test_vendor_theme
    β”œβ”€β”€ composer.json
    β”œβ”€β”€ Magento_Catalog
    β”‚   └── web
    β”‚       └── css
    β”‚           └── source
    β”‚               └── _extend.less
    β”œβ”€β”€ registration.php
    └── theme.xml

Useful References

Note sure if this is the β€œperfect” solution, but it worked when I tested it and it does follow CSS extension conventions.

1 Like

Hi Craig,

Thank you for your replay.

It took me a while to figure out how all it works.
So to change sizes of swatches I modified the _extend.less files as you advised but to change sizes of swatch images I had to modify the view.xml.

To change sizes of swatch images
└── test_vendor_theme
β”œβ”€β”€ etc
β”‚ └── view.xml

To change sizes of swatches
└── test_vendor_theme
β”œβ”€β”€ Magento_Catalog
β”‚ └── web
β”‚ └── css
β”‚ └── source
β”‚ └── _extend.less

I didn’t know that these 2 differ.

Once again thank you for your help.



Swatches follow up post.

Please find a good piece of code.
It is for swatches custom validation.

As a default Magento displays β€œThis is a required field.” message after a customer clicks on β€œAdd to Cart” button on a configurable product without selecting an option.

With this module a custom message will be shown i.e. β€œPlease select a size” or β€œPlease select a colour”


It is worth to watch the video to understand what Max actually (3.2 KB)

  • Paste the code under app/
  • Run the following command: bin/magento setup:upgrade

Do it on your test environment at first and see if it works for you and if it is for you.

I would highly recommend to watch the Max’s video.