I have to used Magento2.3.1 and in detail page i need to product image click after display popup image look like this type.if anyone idea how to achieved this by default magento. below share link Go to product image click than show popup inside image and thumbnail image display same look like.

  • Hi, Have you got any solution for this?
    – Soni5041
    Nov 6, 2020 at 16:26

1 Answer 1


You can follow the steps describe below .

I assume your are using a theme name "Company/mytheme".

step 1) Edit app/design/frontend/Company/mytheme/etc/view.xml and add/update followings section of the xml.

<?xml version="1.0"?>
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
<view xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/view.xsd">
    <vars module="Magento_Catalog">
        <!-- Gallery and magnifier theme settings. Start -->
        <var name="gallery">             
            <var name="fullscreen">
                <var name="nav">thumbs</var> <!-- Fullscreen navigation style (false/thumbs/dots) -->
                <var name="loop">true</var> <!-- Fullscreen navigation loop (true/false/null) -->
                <var name="arrows">false</var> <!-- Turn on/off arrows on the sides preview in fullscreen (true/false/null) -->
                <var name="caption">false</var> <!-- Display alt text as image title in fullscreen(true/false) -->
                <var name="navdir">vertical</var> <!--Sliding direction of thumbnails in fullscreen(horizontal/vertical)  -->
                <var name="navtype">thumbs</var> <!-- Sliding type of thumbnails (slides/thumbs) -->
                <var name="transition">
                    <var name="effect">dissolve</var> <!-- Sets transition effect for slides changing (slide/crossfade/dissolve) -->
                    <var name="duration">500</var> <!-- Sets transition duration in ms -->

step 2) Create or edit the file app/design/frontend/Company/mytheme/web/css/source/_extend.less

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

step 3) Step run static content deploy command and refresh cache


enter image description here

  • Thanks for reply but i need vertical thumbnail showing just like amazon link product wise with product name please check my question link
    – Rv Singh
    Dec 23, 2019 at 14:12

Your Answer

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

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