Изменение компонента catalog.section

Подскажите пожалуйста, как изменить компонент catalog.section:
Он выводится вот в таком виде:(первая картинка) а необходимо чтобы выводилось вот примерно в таком:(вторая картинка).
Код компонента:

<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?>
<div class="catalog-section">
<?if($arParams["DISPLAY_TOP_PAGER"]):?>

<?=$arResult["NAV_STRING"]?>

   

     <?endif?>
 

 
   
       
                     <thead>
                         <?if(count($arResult["ITEMS"]) > 0):
foreach($arResult["ITEMS"][0]["DISPLAY_PROPERTIES"] as $arProperty):?>
                         <?endforeach;
endif;?>
                         <?foreach($arResult["PRICES"] as $code=>$arPrice):?>
                         <?endforeach?>
                         <?if(count($arResult["PRICES"]) > 0):?>
                         <?endif?>
                     
                     <?foreach($arResult["ITEMS"] as $arElement):?>
                       <?foreach($arElement["DISPLAY_PROPERTIES"] as $pid=>$arProperty):?>
                       <?endforeach?>
                       <?foreach($arResult["PRICES"] as $code=>$arPrice):?>
                       <?endforeach;?>
                       <?if(count($arResult["PRICES"]) > 0):?>
                       <?endif;?>
                     <?endforeach;?>

	<?=GetMessage("CATALOG_TITLE")?>	<?=$arProperty["NAME"]?>	<?=$arPrice["TITLE"]?>
[url=<?=$arElement[]"><img style="border:1px solid #CCCCCC" src="<?=$arElement["PREVIEW_PICTURE"]["SRC"]?>" width="45" height="45" alt="<?=$arElement["PREVIEW_PICTURE"]["ALT"]?>" title="<?=$arElement["NAME"]?>" />[/url]<br />	[url=<?=$arElement[]">                          <?=$arElement["NAME"]?>                          [/url]                            <?if(count($arElement["SECTION"]["PATH"])>0):?>                            <br />                            <?foreach($arElement["SECTION"]["PATH"] as $arPath):?>                          [url=<?=$arPath[]">                            <?=$arPath["NAME"]?>                          [/url]                          <?endforeach?>                        <?endif?>	<?if(is_array($arProperty["DISPLAY_VALUE"])) echo implode(" / ", $arProperty["DISPLAY_VALUE"]); elseif($arProperty["DISPLAY_VALUE"] === false) echo " "; else echo $arProperty["DISPLAY_VALUE"];?>	<?if($arPrice = $arElement["PRICES"][$code]):?>                            <?if($arPrice["DISCOUNT_VALUE"] < $arPrice["VALUE"]):?>                                                          <?=$arPrice["PRINT_VALUE"]?>                          <br />                          <span class="catalog-price">                            <?=$arPrice["PRINT_DISCOUNT_VALUE"]?>                          </span>                            <?else:?>                            <span class="catalog-price">                              <?=$arPrice["PRINT_VALUE"]?>                          </span>                            <?endif?>                            <?else:?>                                                    <?endif;?>	<?if($arElement["CAN_BUY"]):?>                            [url=<?echo $arElement[]"><?echo GetMessage("CATALOG_BUY")?>[/url] [url=<?echo $arElement[]"><?echo GetMessage("CATALOG_ADD")?>[/url]                            <?elseif((count($arResult["PRICES"]) > 0) || is_array($arElement["PRICE_MATRIX"])):?>                            <?=GetMessage("CATALOG_NOT_AVAILABLE")?>                            <?endif?>

                   
                 

     <?if($arParams["DISPLAY_BOTTOM_PAGER"]):?>

 

<?=$arResult["NAV_STRING"]?>

<?endif?>
</div>

Необходимо чтобы выводились картинки вместо значения полей.