How To Change Fotorama Thumbnails Alignment on Mobile Devices in Magento 2

How To Change Fotorama Thumbnails Alignment on Mobile Devices in Magento 2

Magento2 uses Fotorama Plugin on a Product Page to display preview of product images. In order to change Fotorama options we should use view.xml file from app/design/frontend/Vendor/ Theme/etc. Let’s take a look at Fotorama options that are available in Magento2:

How To Change Fotorama Thumbnails Alignment on Mobile Devices in Magento2?

As we can see there is a variable, called “navdir”, and it has ability to change the thumbnails alignment in Fotorama:

<var name=”navdir”> horizontal</var>. So here horizontal/vertical values are available and by default it’s horizontal.

Also there is available breakpoints variable, where you can define conditions for “mobile” and define a breakpoint. In order to change thumbnails alignment on mobile version, switch it to vertical or horizontal, just by placing “navdir” variable value inside of the options:

How To Change Fotorama Thumbnails Alignment on Mobile Devices in Magento2?

So there is an example how it may look like. We’ve changed thumbnail alignment to vertical on a desktop and to horizontal on a mobile version:

How To Change Fotorama Thumbnails Alignment on Mobile Devices in Magento2?



1 comment

  1. thanks, exactly what I needed! too many thumbnails breaks the layout for mobile so need to change to dots. this makes it clear what to do.

Post a new comment

top