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 a better way and compare them easily.
Customer convenience and better on-site experience is 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.
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 \Magento\Catalog\Block\Product\View\Gallery */ $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.
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.
Get Weekly Updates
Never miss Magento tips, tricks, tutorials, and news.
Thank you for subscribing.
Something went wrong.
