2

I found the file to change the image size of Swatches here and it works when I change it in that place:

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

However, if I move it to my theme it doesn't overwrite the file and doesn't work. My path to override is:

app/design/frontend/name/themename/Magento_Swatches/etc/view.xml

Is this path wrong? Do etc files have a different path to be placed than phtml files?

10

You have to apply changes under app/design/frontend/{Package}/{themename}/etc/view.xml file.

For changes value of swatches you have to add your tag inside view.xml files

<media>
        <images module="Magento_Catalog">
             <image id="swatch_image" type="swatch_image">
                 <width>50</width>
                 <height>30</height>
             </image>
        </images>
</media>

You can keep your specific field inside images tag.

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

5
  • it not works with magento 2.1
    – LucScu
    Jul 6 '16 at 12:41
  • This is for magento 2.0 version, i have to check for new release issue Jul 6 '16 at 12:44
  • Please share if you find how to with 2.1.
    – LucScu
    Jul 7 '16 at 6:47
  • This is a known issue.
    – thdoan
    Mar 22 '17 at 7:45
  • Prior to the known issue resolution in 2.3-branch (github.com/magento/magento2/issues/6382) I was able I'm was able to change swatch dimensions via a custom module. I created a custom module Namespace/Swatches that's <sequence> after Magento_Swatches. Then add swatch sizes to Namespace/Swatches/etc/view.xml Apr 8 '19 at 5:29
8

1) Copy and create template vendor/magento/module-swatches/etc/view.xml into your theme app/design/frontend/[Vendor]/[Theme Name]/Magento_Swatches/etc/view.xml

2) Clear cache : php bin/magento cache:clean

3) Resize images : php bin/magento catalog:images:resize

4) Flush browser cache (F12 in Chrome, then right click refresh icon and choose "Emtpy Cache And Hard Reload"

<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>
3
  • Testing this in Magento 2.3.2 and I cannot get the swatch images to resize.
    – paj
    Jul 11 '19 at 12:11
  • @Sondre This code is not working in Magento 2.3.2 and 2.3.3 too. Please let us know the working solution. Dec 30 '19 at 5:11
  • Any ideas on a command to run just to re-size certain image types only, rather than all images? So how to just re-size "swatch_thumb" for example.
    – MagentoMac
    Jun 1 '20 at 12:10
4

I have investigated this issue. In file: Magento\Swatches\Helper\Media, we have this method:

vendor/magento/module-swatches/Helper/Media.php

/**
 * Merged config from view.xml
 *
 * @return array
 */
public function getImageConfig()
{
    $imageConfig = [];
    foreach ($this->themeCollection->loadRegisteredThemes() as $theme) {
        $config = $this->viewConfig->getViewConfig([
            'area' => Area::AREA_FRONTEND,
            'themeModel' => $theme,
        ]);
        $imageConfig = array_merge(
            $imageConfig,
            $config->getMediaEntities('Magento_Catalog', Image::MEDIA_TYPE_CONFIG_NODE)
        );
    }
    return $imageConfig;
}

It merge the config in all registered theme. But in loadRegisterdThemes()

vendor/magento/module-theme/Model/ResourceModel/Theme/Collection.php

/**
 * @return $this
 */
public function loadRegisteredThemes()
{
    $this->_reset()->clear();
    return $this->setOrder('theme_title', \Magento\Framework\Data\Collection::SORT_ORDER_ASC)
        ->filterVisibleThemes()->addAreaFilter(\Magento\Framework\App\Area::AREA_FRONTEND);
}

The theme list was sorted by title. In this case, my "Diamond Theme" was override by Luma and Blank theme. enter image description here The most quickly solution is just modify your theme name. I changed to Magento Theme Diamond, then swatch size in my theme was effected.

1

Use this below code, I have tested in Magento 2.2 version and it is working perfectly.

<image id="swatch_image" type="swatch_image">
    <width>50</width>
    <height>50</height>
</image>
<image id="swatch_thumb" type="swatch_thumb">
    <width>150</width>
    <height>130</height>
</image>
<image id="swatch_image_base" type="swatch_image">
    <width>50</width>
    <height>50</height>
</image>
<image id="swatch_thumb_base" type="swatch_thumb">
    <width>150</width>
    <height>130</height>
</image>
5
  • In which file did you place this?
    – pfandrade
    Dec 21 '17 at 20:29
  • This code needs to put under app/design/frontend/[Vendor]/[Theme Name]/etc/view.xml File . Tested in Magento 2.3.2
    – Dharmesh
    Sep 10 '19 at 5:00
  • 1
    @Dharmesh This code is not working in Magento 2.3.2 and 2.3.3 too. Please let us know the working solution. Dec 30 '19 at 5:11
  • what's weird if you inspect element, you can see that the sources are updated with the new resolution, but there is an inline css that still is stuck to 30x20 for me.
    – Earlee
    Sep 30 at 15:53
  • what i did is add css min-width and min-height as well.
    – Earlee
    Sep 30 at 15:59
0

I added the following to my theme/etc/view.xml and CSS and it works in 2.3.3 I have tested and verified. Src: https://github.com/magento/magento2/issues/6382

 <image id="swatch_image" type="swatch_image">
    <width>50</width>
    <height>50</height>
</image>
<image id="swatch_thumb" type="swatch_thumb">
    <width>50</width>
    <height>50</height>
</image>
<image id="swatch_image_base" type="swatch_image">
    <width>50</width>
    <height>50</height>
</image>


I updated CSS.

.page-wrapper .swatch-option {
height: 50px;
min-width: 50px;
}

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.