0

I want to resize default generated swatch images but upon doing that swatch images get blurred. So my question is, how to resize Magento swatch so that it will look nice? I have tried modifying background-size in swatch-renderer.js from initial to 50% 50% !important. Here is the code for your reference from swatch-renderer.js

if (type === 2) {
      // Image
      $image.css({
           'background': 'url("' + thumb + '") no-repeat center', 
            //Background case
            // changed background-size from initial to 50% 50% !important
           'background-size': '50% 50% !important'
     });
    $image.show();
}

Can anyone help me how can I do that?

Any help would be appreciated.

Thanks In advance..!

4
  • You can do this using view.xml file, Refer this link : magento.stackexchange.com/questions/201013/… Dec 2, 2019 at 5:08
  • I want to resize swatch images not product images, above link is all about modifying product images. @SanjayGohil and I don't see anything related to swatch images in view.xml.
    – AjayKr
    Dec 2, 2019 at 5:18
  • You will find "swatches" images resize related code inside view.xml file. Dec 2, 2019 at 5:45
  • Thanks! @SanjayGohil It's worked
    – AjayKr
    Dec 2, 2019 at 6:28

1 Answer 1

1
vendor/magento/module-swatches/etc/view.xml

path to override

app/design/frontend/{Package}/{themename}/etc/view.xml

example :

<?xml version="1.0"?>
<!--
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<view xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/view.xsd">
    <media>
        <images module="Magento_Catalog">
            <image id="swatch_image" type="swatch_image">
                <width>30</width>
                <height>20</height>
            </image>
            <image id="swatch_thumb" type="swatch_thumb">
                <width>110</width>
                <height>90</height>
            </image>
            <image id="swatch_image_base" type="swatch_image">
                <width>30</width>
                <height>20</height>
            </image>
            <image id="swatch_thumb_base" type="swatch_thumb">
                <width>110</width>
                <height>90</height>
            </image>
        </images>
    </media>
</view>

Now applying changes you have to clear cache and var folder.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.