Jeśli chcesz aby w miniaturkach produktów było pokazywane drugie zdjęcie to ten poradnik pokaże Ci krok po kroku przez jak dokonać takiej modyfikacji

Zobacz poradnik

 #products .thumbnail-container img.img_2,
.featured-products .thumbnail-container img.img_2 {
    position: absolute;
    transform: rotateY(180deg);
    transition: .5s;
    z-index: -1;
}

#products .thumbnail-container:hover img.img_2,
.featured-products .thumbnail-container:hover img.img_2 {
    z-index: 1;
    transform: rotateY(0deg);
}

{block name='product_thumbnail'}
    {if $product.cover}
      <a href="{$product.url}" class="thumbnail product-thumbnail">
      {assign var='productimg' value=Image::getImages($language.id, $product.id)}                         
        {if isset($productimg[0]) && isset($productimg[1])}
          <img
            src="{$link->getImageLink($product.link_rewrite,$product.id_product|cat:"-"|cat:$productimg[0].id_image, 'home_default')}"
            alt="{if !empty($product.cover.legend)}{$product.cover.legend}{else}{$product.name|truncate:30:'...'}{/if}"
            loading="lazy"
            data-full-size-image-url="{$link->getImageLink($product.link_rewrite,$product.id_product|cat:"-"|cat:$productimg[0].id_image, 'large_default')}"
            width="250"
            height="250"
          />    
          <img
            class="img_2"
            src="{$link->getImageLink($product.link_rewrite,$product.id_product|cat:"-"|cat:$productimg[1].id_image, 'home_default')}"
            alt="{if !empty($product.cover.legend)}{$product.cover.legend}{else}{$product.name|truncate:30:'...'}{/if}"
            loading="lazy"
            data-full-size-image-url="{$link->getImageLink($product.link_rewrite,$product.id_product|cat:"-"|cat:$productimg[1].id_image, 'large_default')}"
            width="250"
            height="250"
          />    
        {else}
          <img
            src="{$product.cover.bySize.home_default.url}"
            alt="{if !empty($product.cover.legend)}{$product.cover.legend}{else}{$product.name|truncate:30:'...'}{/if}"
            loading="lazy"
            data-full-size-image-url="{$product.cover.large.url}"
            width="250"
            height="250"
          />               
        {/if}
      
        
      </a>
    {else}
      <a href="{$product.url}" class="thumbnail product-thumbnail">
        <img
          src="{$urls.no_picture_image.bySize.home_default.url}"
          loading="lazy"
          width="250"
          height="250"
        />
      </a>
    {/if}
  {/block}