2

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!

  • 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 Sep 26 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 Sep 26 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 Oct 7 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 Oct 31 at 15:24
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.

  • 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 Sep 26 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 Oct 7 at 7:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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