Иконки цвета в каталоге не показываются

А он есть именно в "выводимых характеристиках"? Тоже нужна ссылка на проблемную страницу. Для начала.

Отвечая на вопрос "Как сделать как на картинке": просто укажите явно лишь одну характеристику, которая и является кодом цвета. Если для разных товаров у вас используются разные характеристики для цвета, то можно их все через запятую указать. Если какая-либо характеристика отсутствует у товара, то она в принципе не выведется. Тогда самих характеристик у вас не будет, а будут лишь иконки цветов.

Так как по иным причинам вы дали доступ и я всё равно там ковырялся, то сделал правку в шаблонах list-thumbs.html и list-expanded, заменив строки:

{if !empty($_products_list_features_codes)}
	{foreach $_products_list_features_codes as $f_code}
		{if isset($p.features[$f_code])}
			{if $theme_settings.products_list_features_color_singly && $features[$f_code].type == color}
				{$p._features_color = $p.features[$f_code]}
			{else}
				{$p._selected_features[$f_code] = $p.features[$f_code]}
			{/if}
		{/if}
	{/foreach}
{else}
	{$p._selected_features = $p.features|default:[]}
{/if}

На:

{if !empty($_products_list_features_codes)}
	{foreach $_products_list_features_codes as $f_code}
		{if isset($p.features[$f_code])}
			{if $theme_settings.products_list_features_color_singly && $features[$f_code].type == color && !isset($p._features_color)}
				{$p._features_color = $p.features[$f_code]}
			{else}
				{$p._selected_features[$f_code] = $p.features[$f_code]}
			{/if}
		{/if}
	{/foreach}
{else}
	{foreach $p.features|default:[] as $f_code => $f_value}
		{if $theme_settings.products_list_features_color_singly && $features[$f_code].type == color && !isset($p._features_color)}
			{$p._features_color = $f_value}
		{else}
			{$p._selected_features[$f_code] = $f_value}
		{/if}
	{/foreach}
{/if}

С этой правкой опция "Отображать цвет под фото" будет работать даже без указания конкретных характеристик. Но пока не уверен, будем ли мы вводить это изменение в релизную версию следующих обновлений. Тут есть свои технические подводные камни. Плюс это может ввести в заблуждение еще сильнее, т.к. среди Х выводимых характеристик может и не быть цвета, хотя у самого товара он будет. То есть он просто не попадет в рандомную выборку.

Чтобы убрать эту доработку просто сбросьте изменение в шаблонах list-thumbs.html + list-expanded.html.