Learn how to change the proportions of your product images in the following areas of your online store:

Product list section

Click on the product list section, and select Edit section. Expand the Layout tab and change the number of columns. The more columns, the smaller the product images, and vice versa:

How to show images in their original proportions, not square?

Access the website's integrations settings, and paste the below code in the Custom code field:

<script>
    function changeImageAddress(url) {
        let parts = url.split("cdn-cgi/");

        const sourceStart = parts[0];
        const sourceMiddle = 'cdn-cgi/image/format=auto,w=600,h=600,fit=scale-down,q=100/';

        parts = url.split('/');
        const secondToLastSlashIndex = parts.length - 2;
        const sourceEnd = parts[secondToLastSlashIndex] + "/" + parts[parts.length - 1];

        return sourceStart + sourceMiddle + sourceEnd;
    }

    function changeImage(image) {
        image.src = changeImageAddress(image.src);
        image.srcset = '';
        image.classList.add('fullImage');
    }

    setInterval(() => {
        if (document.querySelector('.block-product-list')) {
            document.querySelectorAll('.block-product-list').forEach(productList => {
                productList.querySelectorAll('.product-list-item__image').forEach(image => {
                    if (!image.classList.contains('originalAspectRatio'))
                        changeImage(image);
                    image.srcset = '';
                    image.classList.add('originalAspectRatio');
                })
            })
        }
    });
</script>

<style>
    .originalAspectRatio {
        object-fit: contain !important;
    }

    .originalAspectRatio + .ecommerce-product-ribbon{
        margin: 0 8px 8px 0 !important;
    }
</style>

Save the changes and update your website.

NOTE: As images will be shown in their original resolution, they will take longer to load, thus may slow down the website

Single product section and/or product page

Click on the product section, and select Edit section; then expand the Layout tab and change the image ratio:

To show images in their original proportions, select Original. If you select Square, you can also change the image border-radius (round the image corners).