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

Aug 30, 20161714
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:

Partner With Us Let's discuss how to grow your business. Get a Free Quote.
Talk to Andrey

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?

Enhance your Magento product galleries with Product View Gallery extension.

magento_product slider

Product Slider

Take your online store to the next level with BelVG extension

Download here

Partner With Us Looking for a partner that will help you to grow your business? We are the right company to develop your webstore. Feel free to get in touch with us. We will be happy to discuss your business opportunities and provide you with a Free Quote. Talk to Andrey

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
BelVG Newsletter
Subscribe to our mailing list and get interesting stuff and updates to your email inbox.
Email *