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

    Recent Articles
    Get a Free Quote

      Full Name

      Email Address

      Mobile Number

      Message

      Let’s initiate a discussion!!

      With Only Agency that provides a 24/7 emergency support.

        Full Name

        Email Address

        Mobile Number

        Message