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:
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:
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: