Для реализации этого нужно скачать сам Colorbox, подключить на сайте скрипт, стиль и заменить в файле product.html код

<!-- image gallery -->
<div class="align-center">
<!-- main image -->
<div class="image">
{if $product.images}
<div class="corner top right">
{$wa->shop->badgeHtml($product.badge)}
</div>
{/if}
{$wa->shop->productImgHtml($product, \'750x0\', [\'itemprop\' => \'image\', \'id\' => \'product-image\', \'title\' =>

$product.name|escape|cat:\' \':strip_tags($product.summary)|escape])}
</div>
<!-- gallery -->
{if count($product.images) > 1}
<div class="gallery" id="product-gallery">
{foreach $product.images as $image}
<div class="image">
<a id="product-image-{$image.id}" href="#">{$wa->shop->productImgHtml([\'id\'=> $product.id,

\'image_id\' => $image.id, \'ext\' => $image.ext, \'image_desc\' => $image.description], \'96x96\')}</a>
</div>
{/foreach}
</div>
{/if}
</div>

на

<!-- image gallery -->
<div class="align-center">
<!-- main image -->
<div class="image">

{if $product.images}
<div class="corner top right">
{$wa->shop->badgeHtml($product.badge)}
</div>
{/if}
<a rel="slideshow" href="{$wa->shop->productImgUrl($product,750x0)}">
{$wa->shop->productImgHtml($product, \'500\', [ \'itemprop\' => \'image\', \'id\' => \'product-image\', \'alt\' => $product.name|escape|cat:\' \':strip_tags($product.summary)|escape ])}
</a>
</div>
<!-- gallery -->
{if count($product.images) > 1}

<div id="product-gallery">
{foreach $product.images as $image}
<div class="image">
<a rel="slideshow" id="product-image-{$image.id}" href="{$wa->shop->productImgUrl([\'id\'=> $product.id, \'image_id\' => $image.id, \'ext\' => $image.ext, \'image_desc\' => $image.description], \'750x0\')}">{$wa->shop->productImgHtml([\'id\'=> $product.id, \'image_id\' => $image.id, \'ext\' => $image.ext, \'image_desc\' => $image.description], \'96x96\')}</a>
</div>
{/foreach}
</div>
{/if}
</div>

 Все желающие могут скачать архив с готовым решением и подробно ознакомиться на сайте нашей студии Lugobor по этой ссылке