I need my gallery to look like this:

Fotorama Gallery

I struggle to find out, how I can change the navigation so that the arrows are not overlapping the thumbnails:

Navigation Now

It should be more like this:

Navigation how I need it to be

and how can I change the arrow icons?

The template where the gallery is showing is here:


    $images = $block->getGalleryImages()->getItems();
    $mainImage = current(array_filter($images, function ($img) use ($block) {
        return $block->isMainImage($img);

    if (!empty($images) && empty($mainImage)) {
        $mainImage = $block->getGalleryImages()->getFirstItem();

    $helper = $block->getData('imageHelper');
    $mainImageData = $mainImage ?
        $mainImage->getData('medium_image_url') :

<div class="gallery-placeholder _block-content-loading" data-gallery-role="gallery-placeholder">
        alt="main product photo"
        src="<?= /* @noEscape */ $mainImageData ?>"

<script type="text/x-magento-init">
        "[data-gallery-role=gallery-placeholder]": {
            "mage/gallery/gallery": {
                "magnifierOpts": <?= /* @escapeNotVerified */ $block->getMagnifier() ?>,
                "data": <?= /* @escapeNotVerified */ $block->getGalleryImagesJson() ?>,
                "options": <?= /* @noEscape */ $block->getGalleryOptions()->getOptionsJson() ?>,
                "fullscreen": <?= /* @noEscape */ $block->getGalleryOptions()->getFSOptionsJson() ?>,
                "breakpoints": <?= /* @escapeNotVerified */ $block->getBreakpoints() ?>

There is only some javascript where some options are passed as JSON object.

You can change the options here in the file:


    <!-- Gallery and magnifier theme settings. Start -->
    <var name="gallery">
        <var name="nav">thumbs</var> <!-- Gallery navigation style (false/thumbs/dots) -->
        <var name="loop">true</var> <!-- Gallery navigation loop (true/false) -->
        <var name="keyboard">true</var> <!-- Turn on/off keyboard arrows navigation (true/false) -->


Here is a list of all options which you can pass. (Not all options are supported by magento by default though, you have to extend the block class Magento\Catalog\Block\Product\View\GalleryOptions to add support for the missing options)

But I can't find a way to change the thumbnail nav arrow icon or change the position of them.

Do I have to write a hacky JS/CSS workaround, or is it possible to do this by changing options?

PS: Of course I did all the changes in my own theme, and not in the core.

1 Answer 1


If you look in the mage/gallery/gallery.js file you can see that Magento uses a mage/gallery/gallery.html template. I think you can move the position of the arrows but also with CSS remove the absolute position of these.

I hope I've helped you

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.