Assigning an image to Attribute Title

hi have product number of attributes , want assign icon/image background attribute title field. eg add teddy should display soft toy, add chocolates should display box of chocolates etc etc...

 

see here...

brightday

 

part of current code below, , have thought should looking @ code <div class="catprodattributetitle"> achieve this, each title of course , needs different image, need create id # or add more css  .....eg catprodattributetitle .5220581 {backgroun......}. eg catprodattributetitle .5220582 {backgroun......} etc?

 

any suggestions appreciated.

 

<!-- attributes -->

 

<div class="product-attributes">

  <div id="catprodattributes2_9603328" class="productattributes">

 

    <div class="catproductattributegroup">

      <div class="catprodattributetitle">add balloon</div>

      <div class="catprodattributeitem">

        <input type="checkbox" id="30947222" name="5220581" />

        <span>happy birthday $14</span></div>

      <div class="catprodattributeitem">

        <input type="checkbox" id="30947223" name="5220581" />

        <span>it's boy / girl $14</span></div>

      <div class="catprodattributeitem">

        <input type="checkbox" id="30947224" name="5220581" />

        <span>i love $14</span></div>

    </div>

   

   

   

   

    <div class="catproductattributegroup">

      <div class="catprodattributetitle">add teddy (selected compliment arrangement)</div>

      <div class="catprodattributeitem">

        <input type="checkbox" id="30947225" name="5220582" />

        <span>small teddy $15.95</span></div>

      <div class="catprodattributeitem">

        <input type="checkbox" id="30947226" name="5220582" />

        <span>medium teddy $22.95</span></div>

      <div class="catprodattributeitem">

        <input type="checkbox" id="30947227" name="5220582" />

        <span>large teddy $39.95</span></div>

    </div>

   

   

   

    </div>

  </div>

</div>

<!-- // attributes -->

hi david,

 

depending on entire product setup use liquid construct attributes.

with liquid use logic add classes/ids style in css.

 

but better yet, may simpler use js or jquery after page has loaded , add styling.

 

hope helped.

More discussions in Business Catalyst

adobe