I'm new to magento 2, I'm having hard time transferring the product thumbnail below the product image to the right side. I have attached a screenshot to be more clearer.


enter image description here

  • Please also mention ur Purchased Theme URL if any
    – Jackson
    Commented Oct 4, 2016 at 4:34
  • Porto 2.1.0 for magento 2 Commented Oct 12, 2016 at 1:55
  • same i want to this any solutions?
    – Rv Singh
    Commented Dec 17, 2019 at 13:11

2 Answers 2


To do this you will need to make 2 changes:

1) Edit XML

2) Edit CSS

1) Find the file "app/design/frontend/[Your_Theme]/[Your_Theme]/etc/view.xml" and look for these lines:

<Vars module="Magento_Catalog">

         <!- Gallery and magnifier theme settings. Start ->
         <Var name="gallery">

In this place it is possible to make many alterations in the gallery.

Edit the line:

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


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

2) Create or edit the file "app/design/frontend/[Your_Theme]/[Your_Theme]/web/css/source/_extend.less"

Add in the end:

.fotorama__nav-wrap--vertical {
    &.fotorama__nav-wrap {
        right: 0;
        left: inherit;
.fotorama__stage {
    left: 0 !important;

Now compile your theme!

  • Hi Kaue M, Thank you for your answer. I tried your solution and it also worked in my end. Thanks again. keep sharing Commented Mar 13, 2017 at 1:37
  • Then see if it exists in the file: app/design/frontend/Magento/blank/etc/view.xml at line 200.
    – Kaue
    Commented Dec 14, 2017 at 18:53
  • You can check here the original version of the file if you changed at any time: github.com/magento/magento2/blob/2.2-develop/app/design/… at line 200
    – Kaue
    Commented Dec 14, 2017 at 18:56
  • How to show right side thumbnail image, if this css added in extend.less inside
    – Rv Singh
    Commented Dec 17, 2019 at 13:11
  • The css extend.less file is imported as one of the last items to compile the css, so by adding this CSS rule to the extend.less file and compiling, the resulting file will have this css rule at the end (which will have more relevance for be read by the browser).
    – Kaue
    Commented Jul 17, 2020 at 21:38

It's better to play with CSS i suggest

Code will be here vendor\magento\module-catalog\view\frontend\templates\product\view\gallery.phtml

Reference Demo: http://www.templatemonster.com/demo/56098.html

<div class="fotorama__nav-wrap fotorama__nav-wrap--horizontal" data-gallery-role="nav-wrap">


Go to magento2/pub/static/frontend/Magento/luma/en_US/mage/gallery/gallery.css

 position: absolute:
 left: XXX;
 top: XXX;
 right: XXX:

You have to also define width

<div class="fotorama__nav fotorama__nav--thumbs" style="height: 114px; width: 707px;">

& it's CSS class

.fotorama__wrap {
  • @MazeStricks i have just given suggestion. Please post ur answer how u achieve this, so it will be helpful for community
    – Jackson
    Commented Oct 4, 2016 at 7:07
  • I tried your suggestion. and I think for me it's applicable. Commented Oct 4, 2016 at 10:01
  • Good to hear @MazeStricks
    – Jackson
    Commented Oct 12, 2016 at 2:00
  • do you know how to edit in porto theme 2.1.0? thanks Commented Oct 12, 2016 at 2:32

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.