How to move the slider to the left of the main picture?

enter image description here

  • just by saying him My dear slider please move to left :) Commented Sep 23, 2019 at 20:45
  • From image how community can help you please add proper details, its better to provide link of the site so any one look it and suggest you how it would be possible. Commented Sep 23, 2019 at 20:47
  • @HassanAliShahzad this is standard magento 2.2 Commented Sep 24, 2019 at 5:02

2 Answers 2


You can follow this link

magento 2.2.2 - How to transfer the product thumbnail to the left side

Modify your theme view.xml file

    <vars module="Magento_Catalog">
      <var name="gallery">
        <var name="navdir">vertical</var> <!-- Sliding direction of thumbnails (horizontal/vertical) -->   

also this your css file

.product.media .gallery-placeholder .fotorama__stage{ left: 0 !important; }
.product.media .gallery-placeholder .fotorama__nav-wrap--vertical.fotorama__nav-wrap{ right: 0; text-align: right;}
.product.media .gallery-placeholder .fotorama__nav--thumbs{float: right;}
  • This method causes a bug. If the scroll is clamped in the thamb and held up and down, then the scroll will be lag, but if you hold and move the mouse a little to the left or gently, the scroll will not lag Commented Sep 24, 2019 at 9:20
  • that is css thing than that needs debug from console , the proper way to move something position is by xml , and the way i added i think will work. Commented Sep 24, 2019 at 9:22

you can easily do it by css, Please add this following css in your existing css file:

.fotorama__stage__shaft.fotorama__grab {
    margin-left: -120px !important;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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