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..!

  • You can do this using view.xml file, Refer this link : magento.stackexchange.com/questions/201013/… – Sanjay Gohil Dec 2 '19 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 '19 at 5:18
  • You will find "swatches" images resize related code inside view.xml file. – Sanjay Gohil Dec 2 '19 at 5:45
  • Thanks! @SanjayGohil It's worked – AjayKr Dec 2 '19 at 6:28
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, privacy policy and cookie policy

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