🔥 Just Launched! Werra Premium Template for HyväSee it in Action

How to Change The Product Gallery View to The List View in Magento 2

By Sanjay JethvaUpdated on May 22, 2025 3 min read

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:

How to Change The Product Gallery View to The List View in Magento 2 - Before

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.

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:

<?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:

After.png

Also, do share the post via social media among the Magento developers.

Thank you.

Sanjay Jethva Full Image
Article bySanjay Jethva

Sanjay is the co-founder and CTO of Meetanshi with hands-on expertise with Magento since 2011. He specializes in complex development, integrations, extensions, and customizations. Sanjay is one the top 50 contributor to the Magento community and is recognized by Adobe. His passion for Magento 2 and Shopify solutions has made him a trusted source for businesses seeking to optimize their online stores. He loves sharing technical solutions related to Magento 2 & Shopify.