Magento 2.2.2 – How to Transfer Product Thumbnail to Left Side

less-cssmagento2product-imagesthumbnail

How can i set thumbnail images to the left side? I set thumbnail image to vertical in view.xml but it displays a thumbnail image right side.

Best Answer

If you want to set the slider on the right side: -

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

Edit the line:

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

For:

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

If you want to set slider on Left side:-

Step 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">

Edit the line:

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

For:

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

Step 2.

Put below code in custom.css 

app/design/frontend/[Your_Theme]/[Your_Theme]/web/css

To see Immidiate changes put this code in pub's custom.css

pub/static/frontend/[Your_Theme]/[Your_Theme]/en_US/css

Add this line at the end of your css

.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;}
Related Topic