Hello, hope somebody can help with this problem.

I have added some custom fields to the Ecommerce product module structure. Both fields are  Multi Dropdown fields with a Yes or No option. The idea is that by selecting yes or no an icon will/will not appear on a list of products.  The html below shows how I want the selected field to work with the span to provide a class to display the icon if set to 'yes'. 

But I can't get it to work; the field value appears as class="[" yes"]"=""  So I'm unable to turn on the icon. 

Can anybody see why this is happening? How do I get the value to appear as I need it?

 

CSS

.custom2-image span{display:none;}

.custom2-image span.yes{display:block;}

HTML

<div class="custom2-image">

         <span class="{{this['New Intro']}}">  - this will take a value of yes or no for a class

           <img  src="{{ 'product-images/newIntro-large.png' | asset_url }}" alt="New Intro" />

         </span>

       </div>