В тройке можно немного попроще.
catalog/view/theme/default/template/product/product.twig
Найти весь блок картинок
{% if thumb or images %}
<ul class="thumbnails">
{% if thumb %}
<li><a class="thumbnail" href="{{ popup }}" title="{{ heading_title }}"><img src="{{ thumb }}" title="{{ heading_title }}" alt="{{ heading_title }}" /></a></li>
{% endif %}
{% if images %}
{% for image in images %}
<li class="image-additional"><a class="thumbnail" href="{{ image.popup }}" title="{{ heading_title }}"> <img src="{{ image.thumb }}" title="{{ heading_title }}" alt="{{ heading_title }}" /></a></li>
{% endfor %}
{% endif %}
</ul>
{% endif %}
И заменить со списка ul-li частично на блоки col.
Что то типа
<div class="row thumbnails">
{% if images %}
<div class="col-sm-2">
<ul class="thumbnails-list">
{% for image in images %}
<li>
<a class="thumbnail" href="{{ image.popup }}" title="{{ heading_title }}">
<img src="{{ image.thumb }}" title="{{ heading_title }}" alt="{{ heading_title }}" />
</a>
</li>
{% endfor %}
</ul>
</div>
{% endif %}
<div class="{{ images ? 'col-sm-10' : 'col-sm-12' }}">
{% if thumb %}
<a class="thumbnail main-image-container" href="{{ popup }}" title="{{ heading_title }}">
<img src="{{ thumb }}" title="{{ heading_title }}" alt="{{ heading_title }}" id="main-image" />
</a>
{% endif %}
</div>
</div>
Ну и перед {{ footer }} , так например
<style>
.thumbnails-list {list-style: none;padding: 0;margin: 0;overflow-y: auto;}
.thumbnails li {margin-bottom: 10px;}
</style>
<script type="text/javascript">
$(document).ready(function() {
var mainImageHeight = $('.main-image-container').height();
$('.thumbnails-list').height(mainImageHeight);
});
</script>