{$colorVariations = false}
{foreach $product.variations as $variation}
   {if $variation.values[{$cfg.cyklospeciality_tpl.variation_color_labels_id}]}
      {$colorVariations = true}
   {/if}
{/foreach}
{if $product.variations && $colorVariations}
   <div class="product-variations">
      {$renderedColors = []}
      {$var_count = 0}
      {foreach $product.variations as $variation}
         {if !$renderedColors[$variation.values_data[{$cfg.cyklospeciality_tpl.variation_color_labels_id}].colorCode]}
            {$renderedColors[$variation.values_data[{$cfg.cyklospeciality_tpl.variation_color_labels_id}].colorCode] = true}

            {$currentColor = $variation.values_data[{$cfg.cyklospeciality_tpl.variation_color_labels_id}].colorCode}
         {$var_count = $var_count + 1}
            {if $variation.photo}
               {$photoId = $variation.photo}
            {else}
               {$photoId = $product.image.id|default:0}
            {/if}
            {if $var_count < 6}

               <a href="{url s=product IDproduct=$product.id TITLE=$product.title}#{$variation.id}"
                  class="color-var"
                  data-photo="{get_photo id=$photoId image=$img_size|default:'product_catalog'}"
                  data-tracking-click='{get_gtm_data encode=true type='ecommerce' method='ProductClick' data=['product' => $product, 'position' => $product_iteration, 'listType' => $listType, 'listId' => $listId]}'>
                     <span class="color color-{$variation.values[{$cfg.cyklospeciality_tpl.variation_color_labels_id}]|strip_accent}" title="{$variation.values[15]}"
                           style="background-color: {$variation.values_data[{$cfg.cyklospeciality_tpl.variation_color_labels_id}].colorCode}"></span>
               </a>
            {/if}
         {/if}
      {/foreach}
      {if $renderedColors|count > 5}
         <div class="var-count"><span class="text">+ {$renderedColors|count - 5}</span><span class="text-rwd">+ {$renderedColors|count - 3}</span></div>
      {/if}
   </div>
{/if}
