I want to resize swatch images

See this http://awesomescreenshot.com/0d466soja3

We will change this color swatches to product images and

i want to resize this & if we can remove this resize code

it will also good.

2 Answers 2


Open class : Magento\Swatches\Block\Product\Renderer\Configurable

and find method : extractNecessarySwatchData()

here you can find all you solutions

I did this :

protected function extractNecessarySwatchData(array $swatchDataArray)
    $result['type'] = $swatchDataArray['type'];

    $objectManager = \Magento\Framework\App\ObjectManager::getInstance();

    $url =  $objectManager->get('Magento\Store\Model\StoreManagerInterface')

    if ($result['type'] == Swatch::SWATCH_TYPE_VISUAL_IMAGE && !empty($swatchDataArray['value'])) {
        $result['thumb'] = $url. 'attribute/swatch'. $swatchDataArray['value'];
        $result['value'] = $url. 'attribute/swatch'. $swatchDataArray['value'];
    } else {
        $result['value'] = $swatchDataArray['value'];

    return $result;

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">
        <images module="Magento_Catalog">
            <image id="swatch_image" type="swatch_image">
            <image id="swatch_thumb" type="swatch_thumb">
            <image id="swatch_image_base" type="swatch_image">
            <image id="swatch_thumb_base" type="swatch_thumb">

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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