Скролинг дополнительных изображений в карточке товара с помощью owl

В стандартном шаблоне Opencart 2 дополнительные изображения товаров выводятся без скрола, в этом примере исправляем.

В файл \catalog\controller\product\product.php

где-нибудь после

$this->document->addStyle('catalog/view/javascript/jquery/datetimepicker/bootstrap-datetimepicker.min.css');

Вставляем

$this->document->addStyle('catalog/view/javascript/jquery/owl-carousel/owl.carousel.css');
$this->document->addScript('catalog/view/javascript/jquery/owl-carousel/owl.carousel.min.js');

В файл \catalog\view\theme\default\template\product\product.tpl добавим стилей:

<style>
#owl-demo .item{
  padding: 1px 1px;
  margin: 1px;
  color: #FFF;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  text-align: center;
}
.customNavigation{
  text-align: center;
}
.customNavigation a{
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.owl-carousel .owl-buttons .owl-prev{
left:1px !important;
opacity: 0.4 !important;
}
.owl-carousel .owl-buttons .owl-next{
right:1px !important;
opacity: 0.4 !important;
}
.owl-carousel:hover .owl-buttons div{
opacity:0.7 !important;
}
</style>

в конце в скрипты добавим

$(document).ready(function() {
     
      var owl = $("#owl-demo");
     
      owl.owlCarousel({
          items : 3, 
          itemsDesktop : [1000,3], 
          itemsDesktopSmall : [900,3], 
          itemsTablet: [600,2], 
          itemsMobile : false, 
		  navigation : true,
		  navigationText: ['<i class="fa fa-chevron-left fa-5x"></i>', '<i class="fa fa-chevron-right fa-5x"></i>'],
		  pagination: false
      }); 
    });

Ну и сам вывод дополнительных картинок

<?php if ($images) { ?>
  <?php foreach ($images as $image) { ?>
     <li class="image-additional"><a class="thumbnail" href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>"> <img src="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li>
  <?php } ?>
<?php } ?>

меняем на

<?php if ($images) { ?>
  <div id="owl-demo" class="owl-carousel owl-theme">
    <?php foreach ($images as $image) { ?>
	<div class="item">
	   <a href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>" class="colorbox"><img src="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a>
	</div>
    <?php } ?>
   </div>
<?php } ?>

На этом все. Буду рад если кому-то пригодится.