источник: [How-To] Прокрутка доп. изображений на странице Товара

Редактируемые файлы - 2:
header.tpl
product.tpl

Подключаемые файлы - 2: (оба файла уже есть в сборке)
carousel.css
jquery.jcarousel.min.js

=========================================================================
-----------------НЕ ЗАБЫВАЕМ ПРО РЕЗЕРВНОЕ КОПИРОВАНИЕ ФАЙЛОВ!-----------------
=========================================================================

1). Открываем файл catalog/view/theme/default/template/common/header.tpl и перед </head> подключаем 2 файла:

<script type="text/javascript" src="catalog/view/javascript/jquery/jquery.jcarousel.min.js"></script>
<link rel="stylesheet" type="text/css" href="catalog/view/theme/default/stylesheet/carousel.css" media="screen">

2). Открываем файл catalog/view/theme/default/template/product/product.tpl и находим строки:
(В шаблоне по умолчанию, это строка 16 и 24)

<div class="image-additional">
...
...
...
<div class="right">

Между ними, удаляем код и вставляем этот:

<div id="carousel-p">
<ul class="jcarousel-skin-opencart">
<?php foreach ($images as $image) { ?>
<li>
<a href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>" class="colorbox" rel="colorbox"><img src="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a>
</li>
<?php } ?>
</ul>
</div>
</div>
<?php } ?>
</div>
<?php } ?>

В этом же файле, (в самом конце) перед последней строкой:

<?php echo $footer; ?>

Добавляем код скрипта: (Добавил комментарии)

<script type="text/javascript"><!--
$('#carousel-p ul').jcarousel({
vertical: false,
visible: 3,
scroll: 1,
auto: 1, // Пауза перед переключением на следующее изображение (в секундах). Если поставить 0 - выключить автоматичустую прокрутку.
animation: "slow", // Анимация "slow" или "fast" (быстрое или медленное переклюцение на следующее изображение)
wrap: "both" // при достижении последнего изображения - возвращаемся на первое. Или "circular" - прокрутка до бесконечности.
});
$(function () {
$("SELECT").selectBox();
});
//--></script>

3). Открываем файл catalog/view/theme/default/stylesheet/stylesheet.css и находим два блока:

.product-info > .left {
float: left;
margin-right: 15px;
}
.product-info > .left + .right {
margin-left: 265px;
}

Вставляем с заменой:

.product-info > .left {
float: left;
margin-right: 15px;
width: 45%;
position: relative;
}
.product-info > .right {
float: left;
width: 365px;
color: #333333;
position: relative;
}

Чуть ниже, (в этом же файле) находим блок:

.product-info .image-additional {
width: 260px;
;
clear: both;
overflow: hidden;
}

И меняем на этот:

.product-info .image-additional {
width: 100%;
clear: both;
overflow: hidden;
}

4). Заходим в панель Администратора: "Система" > "Настройки" > (Выбор магазина - "Изменить") и переходим на вкладку "Изображения".
Меняем "Размер большого изображения товара:" на 328 (вместо 228 по умолчанию).

Открываем страницу источника и смотрим настройки скрипта...