How to Change The Product Gallery View to The List View in Magento 2
Online shopping is preferred over offline shopping now more than ever due to social distancing and people not leaving their homes due to the COVID-19 pandemic.
Also, E-commerce gives a wide variety to shop from and customers can shop with convenience from the comfort of their home. However, it has its own limitations where the customers can not check the product to and fro and not get the experience of physical examination before buying.
The online store owners consistently try to overcome these limitations and as a part of it, they include the product images in the gallery on the product page. The customers can check the images of the product from different angles and get the idea of the physical appearance of the item.
The default Magento 2 product images are shown as below:
Improving how these images are displayed in the gallery can boost the conversion ratio. One such method to display the product images is to display them in the list view which gives the visitors a chance to view the product images in a better way and compare them easily. To craft images of the same dimension in the list we recommend using an image resizer tool.
Customer convenience and better on-site experience are the first priority of any Magento 2 store owner and hence as a part of it, implement the below solution to change the product gallery view to the list view in Magento 2 for a better view.
Method to change the product gallery view to the list view in Magento 2:
Override gallery.phtml file using the method given here override phtml file using custom module in Magento 2.
Replace the code in that file with the below code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<?php /** * Copyright © 2016 Magento. All rights reserved. * See COPYING.txt for license details. */ // @codingStandardsIgnoreFile /** * Product media data template * * @var $block MagentoCatalogBlockProductViewGallery */ $product = $this->getProduct(); $images = json_decode($block->getGalleryImagesJson(),true); ?> <div id="gallery-slider done" class="gallery-slider" data-mage-init='{"gallery":{}}'> <div class="viewport desktop owl-carousel" style=""> <?php foreach ($images as $i => $image): ?> <?php if(isset($image['videoUrl'])) :?> <?php $altText = $image['caption'] ? $image['caption'] : $product->getName(); $vimeo = $image['videoUrl']; $vid = (int) substr(parse_url($vimeo, PHP_URL_PATH), 1);; ?> <iframe src="https://player.vimeo.com/video/<?php echo $vid ?>" frameborder="0" title="<?php echo $altText ?>" webkitallowfullscreen mozallowfullscreen allowfullscreen style="width: 100%"></iframe> <?php else: ?> <?php $altText = $image['caption'] ? $image['caption'] : $product->getName(); ?> <img src="<?php echo $image['img']?>" alt="<?php echo $altText ?>"> <?php endif; ?> <?php endforeach ?> </div> </div> |
That’s it. Likewise you can also programmatically add product images to product gallery in Magento 2 as an solution to adding product images manually in the default of Magento 2.
Doing so, now the product images will be displayed as shown below:
Any doubts? If so, please mention them in the Comments section below. I’d be happy to help.
Also, do share the post via social media among the Magento developers.
Thank you.
2 Comments
but when we click on swatch color then image not change
Hello Zargam,
There might be any third party theme.
Moreover, there might be the click event on the image that would be according to the class hierarchy of JS
Thank You