Magento – Magento 2 – Overwrite module-swatches view.xml

magento2theme

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>

Best Answer

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.

Related Topic