Magento 2 - Overwrite module-swatches view.xml

Question

How do you overwrite the view.xml in \vendor\magento\module-swatches\etc\view.xml in your own template?

I want to overwrite the sizes for swatch_image and swatch_image_base. I tried putting the code in \...\mytheme\etc\view.xml and in \...\mytheme\Magento_Swatches\etc\view.xml but it does not work.

The other theme stuff works, so the theme is correctly set up.

Changing the values directly in the original view.xml works as well.

Edit: Full Code in \app\design\frontend\\{Vendor}\\{theme}\etc\view.xml

<?xml version="1.0"?>
<!--
/**
* Copyright © 2016 Magento. 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>50</width>
                <height>50</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>50</width>
                <height>50</height>
            </image>
            <image id="swatch_thumb_base" type="swatch_thumb">
                <width>110</width>
                <height>90</height>
            </image>
        </images>
    </media>
</view>

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

You can keep your specific field inside images tag.

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

Answer 2

Looks like M 2.1.x has some issues with this. Not only is needed to add your own <media> tag in app/design/frontend/{Package}/{themename}/etc/view.xml as already mentioned:

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

but, as is written in this issue https://github.com/magento/magento2/issues/6382, you'll need to add a DI to override for Magento\Framework\View\Config::getViewConfig() in your module. Make you own class \Vendor\Theme\Framework\View\Config and copy the getViewConfig() method from the original class.

You should replace line 74 from

$config = $this->viewConfigFactory->create($viewConfigParams);

to

$config = $this->viewConfigFactory->create();

I've tried myself and worked after cleaning the cache.

Answer 3

You have to put a copy of it into app/design/frontend/{Package}/{themename}/Magento_Swatches/etc/view.xml