We sacrifice by not doing any other technology, so that you get the best of Magento.

We sacrifice by not doing any other technology, so that you get the best of Magento.

    By default in Magento 2, we can’t set margin or space between more views thumbnail images using CSS on the product detail page.

    If you want to give some space between more views thumbnail images on the product detail page then follow the below steps.

    Step 1 : Override this file into your theme : vendor/magento/module-catalog/view/frontend/templates/product/view/gallery.phtml

    Step 2: Paste the below code in the last of the file

    <script type="text/x-magento-init">
        {
            "[data-gallery-role=gallery-placeholder]": {
                "mage/gallery/gallery": {
                    "mixins":["magnifier/magnify"],
                    "magnifierOpts": <?= /* @escapeNotVerified */ $block->getMagnifier() ?>,
                    "data": <?= /* @escapeNotVerified */ $block->getGalleryImagesJson() ?>,
                    "options": <?= /* @noEscape */ $block->getGalleryOptions()->getOptionsJson() ?>,
                    "thumbmargin":18,  /* You can set your margin here */
                    "fullscreen": <?= /* @noEscape */ $block->getGalleryOptions()->getFSOptionsJson() ?>,
                    "breakpoints": <?= /* @escapeNotVerified */ $block->getBreakpoints() ?>
                }
            }
        }
    </script>

    Step 3: Run below mentioned commands

    - php bin/magento setup:upgrade
    - php bin/magento cache:clean

    That’s it.

    Now, you can check your product detail page. You can see margin or space between more views thumbnail images.

    field_5bfb909c5ccae

      Get a Free Quote