4

I've been searching for an answer for a while but maybe I'm not searching correctly... We're upgrading to Magento 2 (2.3.2 to be exact) and we're modifying our theme based on Luma. The product page displays the product thumbnails under the main product image as a carousel ribbon that the user has to click through, like so: Product thumbnail ribbon We don't like this because it's hiding views of our products, our customers want to see all the product images in a glance, so we wish to show these as a grid. We were able to do this in Magento 1 without issue, like this example:

Product thumbnails as a grid

I could only find options to switch between a horizontal and vertical carousel but nothing for a "grid view" or "see all thumbnails" option. I tried toying with CSS but everything I did just made the "ribbon" taller and the thumbnails remained in a single line.

I can't be the only one who wants to do this, is there an obvious setting I'm missing, or do I need to modify the theme files... and if so, what's the best approach to getting the effect we're looking for?

Thank you in advance!

Improve this question
5
  • Update: By adding the following CSS I was able to get the images to display correctly, the only thing that doesn't seem to work correctly is the "fotorama__thumb-border" which indicates the current selected image. This border is only moving horizontally, so when I select an image below the 1st row, the border moves right and disappears. Otherwise I feel close. If there's a programmatic way to do do this without hacking the CSS, I'd be very happy to hear it though!
    – Dave Meowmers
    Commented Sep 26, 2019 at 7:20
  • .fotorama__nav__shaft { width: 100%; display:inherit; } .fotorama__nav-wrap--horizontal { position:relative; } .fotorama__nav--thumbs .fotorama__nav__frame { width:auto; } .fotorama__nav--thumbs { display: contents; }
    – Dave Meowmers
    Commented Sep 26, 2019 at 7:35
  • Newly discovered drawback to this solution, when a color swatch is selected, the simple product photo attached to the swatch is prepended to the thumbnails (as expected), but then all the thumbnails after the first 5 (the number of thumbnails that would be visible in the nav ribbon at full screen) suddenly disappear all you can see are the grey backgrounds where the thumbnails ought to be. The nav still works and you can still see the larger image when you click on the thumbnail placeholders... but why are they disappearing?
    – Dave Meowmers
    Commented Oct 7, 2019 at 13:40
  • I'm having the same issue now (images not loading after the first few). Did you figure anything out to fix it?
    – Jim
    Commented Oct 31, 2019 at 15:24
  • Hi @Jim I'm sorry it's been so long I'm not sure how but I think we got this resolved, you can see an example of it on the live site here: yoyostorerewind.com/en/shutter-bi-metal.html
    – Dave Meowmers
    Commented Apr 7, 2021 at 3:21

2 Answers 2

Reset to default
0

You have two options as:

1. Remove by Css

Easily add this CSS in your Existing CSS File.

#productThumbnails {
    display: none;
}

2. Remove by Code

if you want code, kindly specify in comments so that i will provide you.

Improve this answer
4
  • Thank you for your reply! I tried the CSS you provided but it didn't seem to make any difference. If there's any other way to do I'd really appreciate the solution... I like the general way the fotorama and magnifier work, we just don't like the single row "ribbon" nav and would like to just display all the thumbnails in a grid. Thank you!
    – Dave Meowmers
    Commented Sep 26, 2019 at 6:05
  • To clarify, I'm not trying to hide the thumbnails, I'm trying to make them all visible as a grid (see screenshots above), instead of displaying in the nav ribbon...
    – Dave Meowmers
    Commented Oct 7, 2019 at 7:20
  • Helo @DaveMeowmers, I am facing same issue, Did you get any solution for this?
    – Faisal Sheikh
    Commented Apr 5, 2021 at 18:13
  • Hi @FaisalSheikh, I think we're using the solution I added above. It's been a couple years now so I'm not 100%, but you can see an example of it on the live site: yoyostorerewind.com/en/shutter-bi-metal.html
    – Dave Meowmers
    Commented Apr 7, 2021 at 3:15
0

To Make it a Grid Display, CSS can do the work:

.product.media .fotorama__nav-wrap .fotorama__nav.fotorama__nav--thumbs {
    height: auto !important;
    width: 100% !important;
    white-space: normal;
}

Then replace the _loadMedia function to display all thumbnails when changing colors

Path: vendor/magento/module-swatches/view/base/web/js/swatch-renderer.js

_loadMedia: function () {
    var $main = this.inProductList ?
            this.element.parents('.product-item-info') :
            this.element.parents('.column.main'),
        images;

    if (this.options.useAjax) {
        this._debouncedLoadProductMedia();
    }  else {
        images = this.options.jsonConfig.images[this.getProduct()];

        if (!images) {
            images = this.options.mediaGalleryInitial;
        }
        this.updateBaseImage(this._sortImages(images), $main, !this.inProductList);

        // render all thumbnails initially
        let imagesLength = images.length,
            child,
            productName = $('.product-info-main .page-title span').text();
        if(imagesLength > 5){
            for (let i = 0; i < imagesLength; i++) {
                child = i + 2;
                $('.fotorama__nav__shaft div:nth-child('+child+')').html(
                    '<div class="fotorama__thumb fotorama_horizontal_ratio fotorama__loaded fotorama__loaded--img">'+
                        '<img src="'+images[i].thumb+'" alt="'+productName+'" class="fotorama__img" aria-hidden="false">'+
                    '</div>'
                );
            }
        }
        
    }
},
Improve this answer

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.