Download and then install our CORE plugin.
Go to its settings page, click on the Plugin Settings > Manage Inline Scripts
Put following script to the Scripts field
$(document).ready(function () {
var $thumbImages = $('.gallery .picture-thumbs .thumb-item img');
if ($thumbImages.length > 0) {
$thumbImages.each(function (index, item) {
var $item = $(item);
$item.wrap('<a class="thumb-item-link" href="' + $item.data('fullsize') + '" title="' + $item.attr('title') + '"></a>');
});
}
var magnificSettings = $.magnificPopup.defaults,
tPrev = magnificSettings.gallery.tPrev,
tNext = magnificSettings.gallery.tNext,
tCounter = magnificSettings.gallery.tCounter,
tClose = magnificSettings.tClose,
tLoading = magnificSettings.tLoading;
$('.thumb-item-link').magnificPopup({
type: 'image',
removalDelay: 300,
gallery: {
enabled: true,
tPrev: tPrev,
tNext: tNext,
tCounter: tCounter
},
tClose: tClose,
tLoading: tLoading
});
});
In the Widget Zones field, select productdetails_bottom.
Click on the Save and Continue Edit button.
It will look like following image