Magento 2: How to change image size of swatches?

Question

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?

Answer 1

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.

Answer 2

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>

Answer 3

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. The most quickly solution is just modify your theme name. I changed to Magento Theme Diamond, then swatch size in my theme was effected.

Answer 4

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>

Answer 5

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;
}