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.