Assigning an image to Attribute Title

[buzzvick]

Hi I have a product with a number of attributes and want assign an icon/image as a background to the Attribute title field. eg Add a teddy should display a soft toy, Add chocolates should display a box of chocolates etc etc...

see here...

Brightday

Part of the current code is below, and I would have thought I should be looking at the code <div class="catProdAttributeTitle"> to achieve this, but each Title of course and needs a different image, so do I need to create an ID # or add more css  .....eg catProdAttributeTitle .5220581 {backgroun......}. eg catProdAttributeTitle .5220582 {backgroun......} etc?

Any suggestions greatly appreciated.

<!-- ATTRIBUTES -->

<div class="product-attributes">

  <div id="catProdAttributes2_9603328" class="productAttributes">

    <div class="catProductAttributeGroup">

      <div class="catProdAttributeTitle">Add A 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 a Boy / Girl $14</span></div>

      <div class="catProdAttributeItem">

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

        <span>I Love You $14</span></div>

    </div>

    <div class="catProductAttributeGroup">

      <div class="catProdAttributeTitle">Add A Teddy (selected to 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 -->

[Mihai_Stoichitescu]

Hi David,

Depending on your entire product setup you could use Liquid to construct the attributes.

With Liquid you could use some logic to add some classes/ids to style in your CSS.

But better yet, it may be simpler to use JS or jQuery to do this after page has loaded and then add the styling.

Hope it helped.

[Liam Dilley]

Hey Mihai,

Try constructing working attributes in BC.. I personally would not advise that just yet until the default attributes output in liquid is changed because its missing some data and you need specific ID's and classes so the BC scripting for add to cart for example still functions.

So I would not need to go down that route for people as a recommendation since there is no documentation on any of the aspects you need to do.

[Mihai_Stoichitescu]

Liam, you are correct, going the Liquid route for this is kinda time consuming.

[buzzvick]

OK ...Jquery is the go you think? So what do I need to to make this happen?

[buzzvick]

Any help appreciated. Still stuck where i was a week ago