I am using Magento 2.2.2

I have created one attribute "Manufacturer". Input type of this attribute is visual swatch. I have added values with swatch images in this attribute.

I have selected different values of this attribute in different products. Now I am trying to display this images in listing page. See below code:

 <?php $_productCollection = $block->getLoadedProductCollection(); ?>
     <?php foreach ($_productCollection as $_product): ?>
          <?php $m = $_product->getResource()->getAttribute('manufacturer')->getFrontend()->getValue($_product);
                        $swatchCollection = $objectManager->create('Magento\Swatches\Model\ResourceModel\Swatch\Collection');
                        $swatchHelper= $objectManager->get("Magento\Swatches\Helper\Media"); 
                        $item = $swatchCollection->getFirstItem();
                        $SwatchImage = $swatchHelper->getSwatchAttributeImage('swatch_image', $_product->getValue());
                        $thumbImage =  $swatchHelper->getSwatchAttributeImage('swatch_thumb', $_product->getValue());
                    <?php /*?><div class="brand"> <img src="<?php echo $this->getViewFileUrl('images/product_brand_logo.jpg'); ?>" alt="" /> </div><?php */?>
                    <div class="brand"> <img src="<?php echo $thumbImage; ?>" alt="" /></div>
     <?php endforeach; ?>

I have added this code in list.phtml file but I am not getting swatch image for corresponding product in listing page. So how can I solve this issue?

1 Answer 1


Finally I found the answer to your question, and I'm going to share it because maybe it helps somebody in the future:

1.- Enter to admin panel

2.- Stores (left menu)

3.- Product (under attribute section)

4.- Select the attribute you want to edit, for example Manufacturer

5.- Storefront Properties (in the Attribute Information menu on the left)

6.- Look for Used in product listing option and set it to YES

And then Incase anyone is experiencing the same problem, the problem was the catalog.xml file - items were missing from this.

  • I have already tried this solution but still I can't see image in front end. So I think the issue is in the programming. Commented Jan 30, 2019 at 10:18
  • then you can compare default catalog_category_view.xml and theme catalog_category_view.xml Commented Jan 30, 2019 at 10:19

Your Answer

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

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