How to make such additional fields?

Question

css

There is a code:

<div class="item" title="lorem ipsum">
  <div class="hit"></div>
  <div class="img"><a href="/" title="lorem upsum"><div class="skoro"></div><img class="parent" src="img/content/1.png" alt="" border="0" width="230" height="230"></img></a></div>
  <div class="name"><a href="/" title="lorem upsum">title</a></div>
  <div class="price"><span class="catalog-price">price</span></div>
</div>

how to withdraw via add. fields "hit" "skoro" a picture and an indication of the title with the cost. I've already broken my head. You need to output to modx. I also need to be able to change hit to "sold" (sold)
Give at least a direction, please (
It looks like this

Answer 1

Good afternoon!
1) Make TV (for example, to mark Hit), name - hit - Type: Switches (radio), assign it to the desired templates, indicate possible values ​​-
2) In the desired products, switch to Yes.
3) In the output, insert the condition:

<div class="item" title="lorem ipsum">
 
  <div class="img"><a href="/" title="lorem upsum"><div class="skoro"></div><img class="parent" src="img/content/1.png" alt="" border="0" width="230" height="230"></img></a></div>
  <div class="name"><a href="/" title="lorem upsum">title</a></div>
  <div class="price"><span class="catalog-price">price</span></div>
</div>

ps following this example, you can make the remaining fields