Magento 2 : How to give some space (Margin) in more views thumbnail images on product detail page?

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>

{

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

1 2	- 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.

Fill the below form if you have any Magento programming need.

Add an image programmatically from any url in Magento 2
[crayon-641f0fe1e3446695865325/] Using above fucntion Images can be imported directly from...
Magento 2 : Override the Category view block file
Override view block using di.xml and add the below code...
How to check list of Layout XML called for a specific page in Magento 2?
You can check a list of called layout XML for...
Magento 2 : Setup PWA from Scratch
Follow the below steps to install and set up PWA...
How to remove leading zero’s from the order, invoice and shipment number in Magento 2?
If you want to remove all leading zero's from order,...

Author Info

Hire R. Patel

Let’s have a call

Fill the form & Get Installation Support