I am using magento 2.2. I've both color and size attribute and I want to display on frontend

enter image description here

I tried and colors are showing in left side: enter image description here

  • Go to Stores -> Product (under attribute section) -> Select the attribute color and size -> Storefront Properties -> Used in Product Listing option and set it to Yes . Oct 11, 2018 at 20:01
  • I tried but it's not showing size and color
    – kiran
    Oct 11, 2018 at 20:23
  • Did you flushed cache ? Are the attributes assigned to the products ? Oct 11, 2018 at 20:25
  • i did. yes, attributes are assigned to the products .
    – kiran
    Oct 11, 2018 at 20:51
  • So it is working now ? Try a reindex and cache flush. Oct 11, 2018 at 21:38

4 Answers 4


Visual swatches & text swatches visible on the storefront at the listing page (below the product name) is possible only with the configurable products so make sure that the product You have created is a configurable product & you have also created the sub-products(child-products) for it, and used the size/color attributes as variation options for the child products (You can use any as per your requirement).

Please refer these images

  1. https://www.screencast.com/t/lZbVFd8j
  2. https://www.screencast.com/t/bCE0d9gAv4NC

Now secondly make sure that the attributes you have used for the variations are of type visual/Text Swatch (in the property section) & are visible on the store front on the listing page (In the Storefront properties section).

Please refer these images

  1. https://www.screencast.com/t/C1HVMrA0
  2. https://www.screencast.com/t/SgID2exBI
  • if type is simple product then we can't display color and size.
    – kiran
    Dec 6, 2018 at 14:26
  • You need to do hard code for it but it doesn't makes any sense as because the swatches are given there to show the variety you have into the single product that is to show the single kind of product in multiple size/color/designs etc. Dec 7, 2018 at 4:45
  • It directly/indirectly links multiple simple products on the basis of there variation (single/multiple) & the similarities. Dec 7, 2018 at 4:48
  • i tried with configurable products but now add to cart is not working. Configurable product is not added to cart in catalog page. prntscr.com/ls48uf
    – kiran
    Dec 7, 2018 at 19:56
  • Configurable products can't be added into the cart they are just made to show the variations of a same kind of products. On the reference of that configurable product end users are buying the simple products.For eg. you have a shirt which has size = L but you have that shirt available in 3 colors so you will create a single configurable product & it's 3 child products (Simple products) with all the 3 different colors. Dec 8, 2018 at 5:05

In order to make an attribute selectable in the list you need to mark it with "Visible on Catalog Pages on Storefront" as "Yes".
Just to be safe put the flag "Used in Product Listing" to "yes" also.
In order to make it visible as a color swatch you need to set its type (Catalog Input Type for Store Owner) as "Visual swatch".
Make sure you rebuild your indexes when you are done.

  • I did, but it's not working
    – kiran
    Dec 7, 2018 at 17:52
  1. Change the Settings -> Go to Stores -> Product
    -> Select the attribute color and size -> Storefront Properties -> Used in Product Listing option and set it to Yes -> Used in Product Listing" to "yes"

  2. Then try cache clean

  3. Try a reindex and cache flush
  • What new you have suggested except @marius answer ? Dec 6, 2018 at 13:05
  • I did, but it's not working
    – kiran
    Dec 7, 2018 at 17:51

Try this code in list.phtml

<?php if($_product->isConfigurable()): ?>   //get attributes   <?php $attributes = $_product->getTypeInstance(true)->getConfigurableAttributes($_product) ?>   <?php if(count($attributes)): ?>
    <?php foreach($attributes as $att): ?>
      <?php $pAtt=$att->getProductAttribute();
        //get the child products
        $allProducts = $_product->getTypeInstance(true)->getUsedProducts(null, $_product);
        $frontValues =array() ?>
      <li><?php echo $pAtt->getFrontendLabel() ?>
       <?php foreach($allProducts as $p): ?>
         //check stock, status, ...
         //do not show unsaleable options
         <?php if(!$p->isSaleable()) continue; ?>
         <?php $out=$p->getAttributeText($pAtt->getName()); ?>
         <?php $frontValues[$out]=$out; ?>
       <?php endforeach ?>
        <li><?php echo implode('</li><li>', $frontValues) ?></li>
    <?php endforeach ?>
    </ul>   <?php endif ?> <?php endif ?>
  • This code is not working.
    – kiran
    Dec 7, 2018 at 19:53

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.