How to set fotorama thumbnail as vertical

Question

I am using magento 2 porto theme. In product details page i need to set the thumbnail of fotorama slider to left as vertical. Is it possible?? Please help

Suannesuarez

Answer 1

Go to the the file app/design/frontend/Vendor/Theme/etc/view.xml

We can see a variable navdir.

This variable has ability to change the thumbnails alignment in Fotorama.

By default it is set as:

<var name="navdir"> horizontal</var>

Change the code like this:

<var name="navdir"> vertical</var>

to make the thumbnails as vertical.

Daff

Amazing response. I was actually in big trouble which is solved. Thank u – Suannesuarez

Is there any need to compile theme after doing this changes? – Cheriecherilyn

After doing this.. thumbnail navigation that is thumbnail arrows not working. I checked in html there is disabled class is applied for this both top and bottom arrows. Any solution? – Cheriecherilyn

Bootstrap can break Fotorama, may need to add ".gallery-placeholder{width: 100%;}" to your css – Hamper

If that file doesn't exist, then it needs to be created, and have the correct XML tags in. It should look like this: <?xml version="1.0" ?> <view xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/view.xsd"> <vars module="Magento_Catalog"> <var name="gallery"> <var name="navdir">vertical</var> </var> </vars> </view> – Killigrew